本节主要介绍认识开发者工具的主要功能菜单的作用。下面逐个介绍：
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
网友评论