Chrome开发调试各面板介绍

各个按钮

前两个图标

1.箭头。

选择后在页面点击要查看的元素，可以在Elements中定位到相应代码片段所在的具体位置。

2.方框。

可以切换为移动端和PC端来进行开发

可以在Responsive中选择适配哪一种机型。

Elements

可以查看修改页面上的某个元素，选中某个DOM后，可以在侧栏查看该元素的所有属性

Style的CSS预处理器

可以直接在样式表中进行修改，页面效果会随之改动。（index）是指具体位置，点击之后可以直接跳转到Source位置。不会影响源文件。这些修改，仅对当前浏览器的页面展示生效，不会修改CSS源代码。

Computed选中元素盒子模型样式属性的计算值

可以看到选中的元素盒子模型样式具体的各个计算后的值。
可以根据盒子各个边距的颜色看出页面上的各个边距所在位置及大小。

Event Listeners元素绑定的事件

可以查看绑定的事件以及定位绑定事件对应函数所在的JS文件以及在该文件中的具体位置（行数）

DOM Breakpoints展示断点

在元素的右键菜单中选择断点选项，选中之后，当元素被修改（通常是被JS代码修改）时，页面加载会暂停，然后可以查看该元素的属性。
三个添加断点方法依次是DOM结点及其子节点结构变动时中断，DOM结点（不包括子节点）属性变动时中断，DOM结点移除DOM树时中断。
DOM Breakpoints页面中看到，这个页面可以看到当前网页的所有元素断点。

Console

Default levels类似于Android studio中的日志过滤

Verbose：从Chromium58开始，仅显示 console.debug() 的输出
Info：仅显示 console.info() 的输出
Warnning：仅显示 console.warn() 的输出
Errors：仅显示 console.error() 的输出
Default：默认勾选Info、Warnings、Errors
filter过滤
输入 url:https://www.jianshu.com/ 显示jianshu相关的信息
输入 -url:https://www.jianshu.com/ 隐藏jianshu相关的信息
各个按键可查看Chrome开发者工具——Console

控制台输出日志信息

可以打印一些信息。在代码中写入console.log()，运行时，浏览器的控制台便会显示console.log()中的数据。

控制台交互

可以对页面数据进行某些指令操作，执行JS语句。
比如想查看console都有哪些方法和属性，我可以直接在Console中输入“console.dir(console)”并执行。

Source

JS资源页面：这个页面内可以找到当然浏览器页面中的js 源文件，方便我们查看和调试，所有的代码都是压缩之后的代码，可以点击下面的{}大括号按钮将代码转成可读格式

分为左中右三个模块，左边是来选择资源的，选择js等文件；中间是js调试窗口，可以在左边打断点，刷新页面，进行调试。右边重点说明一下： 可查看博客Chrome调试技巧

Network

网络请求标签页：可以看到所有的资源请求，包括网络请求，图片资源，html,css，js文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看

点开一个请求，可以查看请求的入参，出参，cookie等信息。

如果只选择XHR 异步请求资源，则我们可以分析相关的请求信息

Headers

Rsponse header存放的返回的头部信息；Request Header存放的是请求头信息。
Post请求，多了个Request Payload，存放请求参数信息（json格式），通过这里就可以拿到请求的入参，很重要。

Preview

就是返回信息的预览。

Response

服务器端返回信息。HTTP 响应数据

Tming

交互响应时间分解。
若返回时间过长就需要看一下是否有问题。

Performance（性能面板）

记录和查看网站生命周期内发生的各种事件来提高页面运行时的性能

Memory（内存面板）

分析web应用或者页面的执行时间以及内存使用情况 。

Application（应用面板）

记录网站加载的所有资源信息，包括存储数据、缓存数据、字体、图片、脚本、样式表等。

Security（安全面板）