2024年5月9日发(作者：)

GoogleChrome浏览器调试功能介绍

Chrome浏览器得益于其优秀的V8解释器，javascript执行速度和内存占有率表现

非常优秀。对于html+css+javascript前台技术的学习或者开发，浏览器developer

tool的使用时必不可少的，也能极大的提高学习或者开发效率。本文根据版本

23.0.1271.10。在window下，开启developer tool的快捷键为F12。

1 Developer tool功能结构

Developer tool的功能栏有8个，分别是标签、资源、网络、源码、时间轴、性能、

监察和显示（命令行）。

2 Element panel

2.1 Element控制面板基本功能

Element控制面板能够让你查看所有的DOM tree中的内容，可以根据html内容找

到页面中的元素或者根据页面中的定位标签，同时可以改变DOM的内容。由javascript

代码产生的标签，也只能通过这种方式查看了（在你的IDE中无法看到）。

Element控制面板

如上图所示，我选中

标签之后，在页面中显示的对应的元素就会选中。如果，我现在要定位百度一下这个

按钮，我可以通过左下角的放大镜，在页面中选中百度一下，DOM中也会把对应的标签

给你找出来。这个功能在调试时绝对是利器。最下面显示的是现在选中标签在DOM中的

层次关系。