认识开发者工具

本节主要介绍认识开发者工具的主要功能菜单的作用。下面逐个介绍：

1. 箭头按钮

箭头按钮位于左上角，用于控制Elements按钮页面与DOM元素的绑定。可以点击箭头按钮，在页面中点击相应DOM，则Elements会定位到相应的元素标签。

Elements与DOM对应

2. 设备图标

设备图标位于左上角第二个图标，可以实现移动端与PC端的切换，查看网页的移动端效果。

移动端效果.png

3. Elements

Elements可以查看修改DOM元素的样式、标签以及盒模型相关的信息。

4. Console控制台

Console打印和输出相关命令信息。

5. Sources资源页面

Sources可以查看页面加载的所有文件，方便查看与调试。对于压缩后的文件，可点击大括号转为可读的代码。

Sources.png

Sources页面还提供Snippets功能，可以把它当作控制台使用，但是不会像控制台一样输入回车直接运行代码，避免了换行与回车的冲突。

Snippets.png

6. Network网络请求

Network可以查看所有资源请求信息，包括网络请求、图片、html css js等文件的请求。可以筛选需要查看的请求类型（All XHR JS ...），可以查看请求的具体信息，比如参数信息，请求到的数据等，方便前后端的联调。

network.png