您当前位置：chrome >> chrome资源

Web前端开发进阶篇Chrome浏览

本文首发于今日头条。作者Web前端开发进阶篇

自Google发布Chrome浏览器以来，其随着Chrome浏览的优化及其附带的Chrome开发者工具和额外的扩展程序，受到了广大开发者的喜爱，越来越多的前端开发人员喜欢在Chrome里开发调试代码，对开发人员非常友好，许多的优秀插件可以帮助开发人员更高效完成开发工作，另外可以登录，不管到哪里，只要一登录就可以实现同步，极为方便，只是目前Chrome不能使用谷歌的搜索引擎，以及谷歌账号相关服务。但是不影响我们开发者调试，部分功能可通过代理服务器安装谷歌访问助手，下载扩展程序即可使用，安装完之后就是如下图：

这是我的Chrome，为了开发调试和便捷使用安装的一些扩展插件，用起来是极其方便，关于这图有什么不懂得可以下方留言咨询。

提高前端技术，先从使用谷歌调试器做起

具体的调试呢，我们就需要打开开发者工具然后进行调试，我们要做到明白每一项内容，才能为我们开发使用。下面我就给大家介绍一下关于开发者工具的一些调试方法，认识学习一下开发者工具。

选择功能

点击选择按钮，在网页中选择一个元素，这时候会选择相应的DOM结构，点击后变成选择状态，出现相关DOM结构的一些信息。（下方会出现选择元素的DOM结构和CSS信息）

设备按钮

点击就会进入移动端的开发模式，如上图点击第一个黑色小按钮就会弹出不同的移动设备，可选择不同的尺寸比例，这与真实的移动设备相差无几，是非常合适进行响应式开发和移动端的开发。可自定义移动端尺寸，缩放，限制网络流量和CPU占用率，横屏调试等。

Element面板

显示Html页面的DOM结构，可直接在上面修改DOM元素，标签，以及CSS的修改，还有页面的盒子模型，点击相关的DOM结构，右键可进行直接修改DOM（EditasHTML），删除DOM（DeleteHTML），焦点定位（focus）等常用的功能，查看相关的盒子模型知道元素对应的padding，border，margin值。选中相应的DOM，可在右边style区域修改其样式，也可修改页面相关的js。通过Element修改调试细微的相关DOM，要快得多哦。

Console控制台

用于打印输出一些相关的信息，在这里我们能看页面中的报错，警告信息，你可在这里输入相关的代码进行调试。如图：

像Console控制台（1）中有报错信息，我们可直接点击进入相关详细的报错文件，然后查看出错的文件，方便我们查看出错的地方和调试错误。

Sources面板

Sources.js资源页面里我们可以找到我们打开当前页面中的js源文件，方便我们查看和调试，图中我们可以看到当前页面的css、images、js和一些上传的路径，我们可以从其中找到一些图片和调试我们页面中的js，说到调试，这里面就不得不提打断点调试，也就是Debug调试，如下图：

但是很多人却对这个使用起来不是很会，看不清怎么运行的，建议大家找些简单的页面调试，看看具体是怎么一步一步走的，此外推荐大家使用如下图的Snippets代码片段功能，点击创建一个新的代码片段，写完后右键运行，然后去控制台查看相关的信息，下图我新建一个new.js，然后去运行去控制台查看。

Network网络请求

这里呢可以看到所有的资源请求，页面只要有的都会通过请求加载到这里，你会看到很多（如图片，HTML、CSS、JS，视频、文件等等），在平时的开发中我们主要用于网络请求的查看和分析，分析接口的传输情况，请求头，参数，路径，及当前的文件，这个尤为重要，除了起到判断请求的状况外还可以看看加载时间，分析哪些加载的慢，然后做出调整是页面加载变快。

Performance面板

这是页面运行时的性能分析，它会模拟移动设备的CPU，一般情况下移动设备的CPU会比台式机笔记本弱很多，但当你想分析页面的时候，可以用这个来分析。

Memory面板

这是内存占用分析功能，具体到每一个页面，我们可以使用Performance面板具体分析也页面的内存使用情况（选择Memory然后录制一段当前页面进行你想监测的一些页面操作，时间自己掌握。）

Application面板

该面板主要记录网站加载的所有资源信息，包括存储数据（localStorage、sessionStorage、indexedDB、WebSQL、Cookie）、缓存数据、字体、图片、脚本、样式表等。这里面就简单多了。

LocalStorage如果你在开发中使用了localstorage来存储键值对（KVPS），那么就可以通过它来增删改查这个键值对。

ApplicationCache你可以使用ApplicationCache窗格去查看通过ApplicationCacheAPI创建的资源。

Frames将页面上的资源按frame类别进行组织显示。

Security面板

通过该面板可以去调试当前网页的安全和认证等问题，检测你的网站是否添加了HTTPS。没有的话就会是下面的提示，如果你添加了HTTPS，则会弹出这样的一条信息：Thispageissecure(validHTTPS)。

Audits面板