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

来源：互联网 2023-02-21 23:30:00 161

Chrome浏览器是一款比较适合开发者的浏览器。比较适合web应用和网站开发人员。开发人员可以使用它进行HTML CSS布局。或者调试javaScript和jQuery脚本。那么如何使用Chrome浏览器开发者工具呢？这里我跟大家介绍下。

工具/原料

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

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

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

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

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

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

3本页面非法爬取自百度经验

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

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

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

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

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

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

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！