goole浏览器

GoogleChrome浏览器开发者⼯具使⽤教程

对于Chrome浏览器，除了占⽤内存的缺点，其他都很不错。对于Chrome浏览器的开发者⼯具，Jeff除了Elements、Resources、

Network、Console这四个标签页⽤得⽐较多外，其他的都甚少理解。今天偶然看到⼀篇Chrome浏览器开发者⼯具的使⽤教程，感觉不错，

顺便转载在这⾥，感谢原作者的⾟苦劳动。

作为⼀个Web开发⼈员，除了上⾯的原因以外，与我们开发相关的，就是Chrome的开发者⼯具。⽽本⽂，就是要详细说说Chrome的开

发者⼯具，说说我为什么认为它⽐Firebug要好⽤。

怎样打开Chrome的开发者⼯具？

你可以直接在页⾯上点击右键，然后选择审查元素：

或者在Chrome的⼯具中找到：

或者，你直接记住这个快捷⽅式：Ctrl+Shift+I(或者Ctrl+Shift+J直接打开控制台)，或者直接按F12。

打开的开发者⼯具就长下⾯的样⼦：

不过我⼀般习惯与点左下⾓的那个按钮，将开发者⼯具弹出作为⼀个独⽴的窗⼝：

下⾯来分别说下每个Tab的作⽤。

各个标签分析

Elements标签页

这个就是查看、编辑页⾯上的元素，包括HTML和CSS：

左侧就是对页⾯HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性，或者你点右键选”EditasHtml”直接对元素的

HTML进⾏编辑，或者删除某个元素，所有的修改都会即时在页⾯上得到呈现。（注：看到上⾯右键菜单的最后⼀个选项”审查元素”了么？

这是不是说明这个开发者⼯具的页⾯也是HTML来的呢？你点⼀下就知道了哦，嘿嘿）

你还可以对某个元素进⾏监听，在JS对元素的属性或者HTML进⾏修改的时候，直接触发断点，跳转到对改元素进⾏修改的JS代码处：

Elements标签页的右侧可以对元素的CSS进⾏查看与编辑修改：

你还可以通过这⾥看到各CSS选择器设置的CSS值的覆盖情况。

下⾯的Metrics可以看到元素占的空间情况（宽、⾼、Padding、Margin神马的）：

注意到上⾯的Properties没有？这个很有⽤哦，可以让你看到元素具有的⽅法与属性，⽐查API⼿册要⽅便得多哦（要注意某些⽅法和属

性在IE、FireFox等其他浏览器下⾯的⽀持情况哦）。

Resources标签页

Resources标签页可以查看到请求的资源情况，包括CSS、JS、图⽚等的内容，同时还可以查看到存储相关的如Cookies、HTML5的

Database和LocalStore等，你可以对存储的内容编辑和删除。

这⾥的CSS⽂件有⼀个好玩的特性，你可以直接修改CSS⽂件，并且修改即时⽣效哦：

Network标签页

Network标签页对于分析⽹站请求的⽹络情况、查看某⼀请求的请求头和响应头还有响应内容很有⽤，特别是在查看Ajax类请求的时

候，⾮常有帮助。注意是在你打开Chrome开发者⼯具后发起的请求，才会在这⾥显⽰的哦。

点击左侧某⼀个具体去请求URL，可以看到该请求的详细HTTP请求情况：

我们可以在这⾥看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息，对于开发、调试，都是很有⽤的。

Scripts标签页

很明显，这个标签页就是查看JS⽂件、调试JS代码的，直接看下图的说明：

还有你可以打开Javascript控制台，做⼀些其他的查看或者修改：

你甚⾄还可以为某⼀XHR请求或者某⼀事件设置断点：

Timeline标签页

注意这个Timeline的标签页不是指⽹络请求的时间响应情况哦（这个在Network标签页⾥查看），这个Timeline指的JS执⾏时间、页⾯

元素渲染时间：

点击底部的Record就可以开始录制页⾯上执⾏的内容。（这个不熟悉，请参考⽂末链接）

Profiles标签页

这个主要是做性能优化的，包括查看CPU执⾏时间与内存占⽤：

这个也不熟悉，不多说，还是请参考⽂末链接吧。

Audits标签页

这个对于优化前端页⾯、加速⽹页加载速度很有⽤哦（相当与）：

点击run按钮，就可以开始分析页⾯，分析完了就可以看到分析结果了：

它甚⾄可以分析出页⾯上样式表中有哪些CSS是没有被使⽤的哦：

Console标签页

就是Javascript控制台了：

这个除了查看错误信息、打印调试信息（()）、写⼀些测试脚本以外，还可以当作JavascriptAPI查看⽤。

例如我想查看console都有哪些⽅法和属性，我可以直接在Console中输⼊”console”并执⾏：

怎么样，⼀⽬了然了吧？再例如我想查看⽇期函数都有哪些⽅法：

（注：注意在这⾥看到的某些⽅法和属性是ES5新增的，记得兼容其他浏览器的⽀持情况哦）

结语

GoogleChrome除了简洁、快速，现在的Chrome的插件也⾮常的丰富了。⽽对于web开发者来说，Chrome对于HTML5、

CSS3等⼀些新标准的⽀持也是⽐较完善的，⽽且Chrome的开发者⼯具我个⼈认为真的⾮常好⽤，这就是为什么我向web开发者推

荐使⽤Chrome的原因。

注1：本⽂截图的Chrome版本为：13.0.782.215m