谷歌浏览器Chrome developer tool详细介绍

很多Web前台开发者都喜欢这种浏览器自带的开发者工具，这对前台设计、代码调试很大帮助的。

Chrome浏览器得益于其优秀的V8解释器，javascript执行速度和内存占有率表现非常优秀。对于html+css+javascript前台技术的学习或者开发，浏览器developer tool的使用时必不可少的，也能极大的提高学习或者开发效率。本文根据版本 23.0.1271.10。在window下，开启developer tool的快捷键为F12。

1 Developer tool功能结构

Developer tool的功能栏有8个，分别是标签、资源、网络、源码、时间轴、性能、监察和显示（命令行）。

谷歌浏览器2014(Chrome) 37.0.2062.120 官方正式版 评分: 9.7 类别： 浏览器类    大小：39M    语言： 中文
查看详细信息 >>

2 Element panel

2.1 Element控制面板基本功能

Element控制面板能够让你查看所有的DOM tree中的内容，可以根据html内容找到页面中的元素或者根据页面中的定位标签，同时可以改变DOM的内容。由javascript代码产生的标签，也只能通过这种方式查看了（在你的IDE中无法看到）。

Element控制面板

如上图所示，我选中标签之后，在页面中显示的对应的元素就会选中。如果，我现在要定位百度一下这个按钮，我可以通过左下角的放大镜，在页面中选中百度一下，DOM中也会把对应的标签给你找出来。这个功能在调试时绝对是利器。最下面显示的是现在选中标签在DOM中的层次关系。

选元素找标签功能

我们也可以对里面的内容进行临时性修改，如刚才找到的百度一下标签中的value改成“调试一下”后马上在页面中相应显示。

临时修改内容

12345在本页阅读全文 本文导航 第1页: 首页 第2页: 右侧功能栏 第3页: 资源控制面板\网络控制面板 第4页: js调试源码控制面板 第5页: 性能查看控制面板