chrome开发者工具的使用

一、Elements

（用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。）

在页面上点击右键（Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台)，或者直接按F12。）

打开：

在Element中主要分两块大的部分：HTML结构面板、操作dom样式、结构、时间的显示面板

1.点击图中的箭头，你的鼠标移动到任何一个元素上,对应的html视图中会给该元素蓝色的背景。

2.如果你单击选中一个元素,在结构面板的底部,会显示该元素在html结构中的位置关系

3. 在syles中，修改某个样式时，会实时更新

4.点击 Event Listeners选项,观察该元素绑定的事件。

5.随便选中一个元素，点击鼠标右键，会有个弹窗，找到 Break on

Break on:为该元素添加dom操作事件监听。包含三个选项(树结构改变、属性改变、节点移除)。这个选项的作用是帮助我们监控和定位操作元素的代码。

6.在显示面板中切换到Properties选项,可以看到选中元素的各种信息

7.在html面板，按ctrl+f,会在底部出现搜索框，可以快速查到你想找的内容

二、Network

（网络页面主要用于查看header等与网络连接相关的信息。 ）

1 .Network是一个监控当前网页所有的http请求的面版,它主体部分展示的是每个http请求,每个字段表示着该请求的不同属性和状态


2. 单击面板中的任意一条http信息,会在底部弹出一个新的面板,其中记录了该条http请求的详细参数header(表头信息、返回信息、请求基本状态－－-请参看http1.1协议内容对号入座)、Preview(返回的格式化转移后文本信息)、response(转移之前的原始信息)、Cookies(该请求带的cookies)、Timing(请求时间变化)

3. 1.停止2.清空3.录像截屏4.fault，可以快速查找4.视图模式5.可以不覆盖之间的数据6.强制更新7.调试代码
filter：查找参数（支持正则表达式），all：所有的数据，XHR：axios的请求，js，css，img就是对应的东西，doc：document

4.最后在主面板的底部有记录了整体网络请求状态的一些基本信息