解锁Chrome开发工具的隐藏功能

chrome浏览器的自带的开发者工具不仅可以调试web应用，也可以模拟终端设备。

开发和测试在工作中也常常会用到chrome开发者工具，它有很多隐藏的小功能，运用的好可以事半功倍，提高工作效率。今天来给大家介绍一下：

Chrome开发工具打开方式

1、按下键盘F12

2、按下键盘Ctrl+shift+I

3、浏览器导航栏 …–>更多工具–>开发者工具

模拟终端设备

点击红色部分，开启模拟各种机型设备，如果没有你想要的，可以点击Edit进行勾选添加。

另外还可以设置不同手机型号的尺寸、屏幕缩放比例，用于模拟手机端测试非常方便。

元素（Elements）

1. 查看元素代码

点击工具栏最左侧的箭头按钮（快捷键Ctrl+Shift+C）进入元素选择模式，鼠标在页面上滑过时，可以在元素（Elements）面板中自动定位到该元素源代码的具体位置。

2. 查看元素属性

点击右侧工具栏上的Properties，可以查看到该元素的所有属性

3. 修改元素的代码和属性

双击想要修改的部分，直接进行编辑。也可以选中要修改的行，点击右键，在右键选择修改。当然这只是对当前的页面进行修改，不会改变源代码，只适用于代码调试。

4. DOM断点设置

选中要断点的部分，鼠标右键–Break on 选中断点情况，打下断点后，该行会出现一个蓝色圆圈的断点标记，同时在右侧工具栏中的DOM　breakpoints中也会显示断点标记。

当js去修改指定元素的DOM结构时，就会在修改的位置打下断点，这样就比较方便的查找到哪里对页面元素进行了修改。

Console控制台

1. 查看日志

console控制台中可以查看到js代码输出的日志，比如：error、info、warn。可以方便定位。

常用的方法比如：当页面操作时点击按钮没有反应，查看接口请求和返回无报错信息时，可以回到console中心查看是否是js代码报错。

2. 执行js语句

在定位问题时，也常常会在console控制面板中执行js语句，方便定位。例如：

3. 查看源代码Sources

在Sources中可以查看到页面的 HTML 文件源代码，包括 JS、CSS 、images等，同时也可以将本地的js文件替换到网页中，进行调试。

在工具栏中选择Overrides–>Select folder for overrides,添加本地文件,添加后勾选Enable Local Overrides，在network中会显示黄色感叹号，刷新页面，此时是导入后的js文件。

4. 另外，也可以进行简单的debug调试
   
   Network网络面板

这个应该是用到最多的工具，从左到右依次介绍：

• 红色圆点

：默认只要打开开发者工具，就会处于启动状态，自动记录所有请求日志。再点击一次，小圆点成为灰色，即可停止记录日志。

• 第2个圆点

：清除当前面板中所有的请求信息

• 过滤器

：默认开启状态，点击可切换隐藏下面的条件，用于过滤请求URL

• 放大镜

：用于对所有请求资源和响应内容（包括请求 url、请求体、响应体 等）进行全量搜索，支持正则表达式等复杂搜索条件

• Preserve log复选框

：勾选后，可以保存页面加载的请求，不管当前页面的 url 如何变化，都会记录并保存所有的请求信息

• Disable cache复选框

：勾选后，启动清除浏览器缓存功能，也就是说，每次请求访问页面的响应结果不是从浏览器的缓存获取，而是从服务器中获取。不勾选，则表示使用浏览器缓存。

• 网络调节工具

：可以模拟不同的网络状态，例如：Online 正常网络、Offline 无网络、Slow 3G 弱网络等不同情况，从而很方便的测试异常网络场景。

过滤器菜单

点击漏斗，展示如下菜单

• Filter输入框

：可以通过输入 url 来过滤请求，支持模糊匹配，同时也可以输入正则表达式进行匹配过滤

• Hide date urls

：隐藏所有以date：或bolb:开头的 url 请求

• 按类型过滤请求

：默认请求类型为All，点击后在下面的请求列表中展示所有类型的请求，可直接点击XHR、JS、CSS、Img等会过滤出某一种请求类型。

请求列表部分

可以看到每个请求后面都有一个绿色的区域，这个绿色区域表示每个请求的Time To First Byte(TTFB)，即请求第一个字节的时间。Content Download表示请求的下载，显示为蓝色区域。

查看请求详情

Headers：信息头，包含请求的基本信息、响应信息头、请求信息头、Cookies、请求体

Preview：预览响应正文，在查看图像时很有用

Response：查看响应正文

Initiator：发起请求的启动器

Timing:展示请求过程中的总时间及时间消耗明细

Cookies：请求中所有站点的cookie

一般情况下，页面出现报错时，查看接口，如果接口返回没有问题，定位前端的入参请求参数是否有误；如果前端请求参数没有问题，返回报错，那么定位后端问题，查看日志信息。

Summary面板

底部记录了总请求数、网络传输的数据量、页面加载的总资源数据量、页面总的加载时间

以上是总结了一些Chrome开发者工具常用的使用方式，其实还有很多功能，在工作中运用可以大大提高我们的工作效率，同时可以方便定位问题。