Chrome浏览器开发者工具界面布局及代表的意思

1、首先打开Chrome浏览器，点击右上方的三个竖点按钮，选择更多，开发者工具。

2、然后进入开发者界面。首先是一个屏幕适配按钮，可以调试各种移动设备的屏幕分辨率。

3、然后是Elements（元素）标签。这里显示HTML标签元素，同时也能够查询到网页源代码。将鼠标移动至标签处，即可显示出对应的标签在网页中的位置。

4、Console（控制台）标签，用于输入web命令，如Console.log()，方便调试。

5、接着是Source（资源）标签。这里显示的是网页用到的资源文件。包括html,js文件和图片文件等。

6、然后是network（网络）标签。这里显示浏览器发生的网络事件。包括名称，用时等。点击名称还可以看到详细的网络交换信息。包括请求头，预览，回应，用时等。