《Chrome浏览器超强调试工具》由会员分享，可在线阅读，更多相关《Chrome浏览器超强调试工具（22页珍藏版）》请在金锄头文库上搜索。
1、http:/ 浏览器超强调试工具 2011-08-30 13:31:27| 分类： 转载 | 标签：李赞红 html css chrome脚本调试 |字号 订阅在 Google Chrome 浏览器出来之前，我一直使用 FireFox，因为 FireFox 的插件非常丰富，更因为 FireFox 有强大的 Firebug，对于前端开发可谓神器。在 Chrome 出来的时候，我就喜欢上它的简洁、快速，无论是启动速度还是页面解析速度还是 Javascript 执行速度（现在的 FireFox4 也比之前的FireFox3 有很大的进步）。不过当时由于 Chrome 的开发者工具还不是很完善，而我又
2、不是很熟悉，加之对于 Firebug 的好感和依 赖，当时还是用回 FireFox 作为我的主浏览器。后来由于开发 Chrome 的插件 (现在的 FaWave)，就一直使用 Google Chrom 作为我的主浏览器，渐渐熟悉 Chrome 的开发者工具，而 Chrome 也一直在快速迭代，快速进步中，到现在，Chrome 已经绝对成为我的主 浏览器，Chrome 的开发者工具，我也认为比 Firebug 更好用。得益于 Google V8 的快速，和对 HTML5 和 CSS3 的支持也算比较完善，html 类的富客户端应用 Chrome 上无论是流畅性还是呈现的效果，都是比较出色的，这对
3、于开发者，特别是对于那些喜欢研究前沿技术的前端开发者来说，是很重要的。对于本文，作为一个 Web 开发人员，除了上面的原因以外，与我们开发相关的，就是 Chrome 的开发者工具。而本文，就是要详细说说 Chrome 的开发者工具，说说我为什么认为它比 Firebug 要好用。怎样打开 Chrome的开发者工具？你可以直接在页面上点击右键，然后选择审查元素：或者在 Chrome 的工具中找到：或者，你直接记住这个快捷方式： Ctrl+Shift+I (或者 Ctrl+Shift+J 直接打开控制台)，或者直接按 F12。打开的开发者工具就长下面的样子：不过我一般习惯与点左下角的那个按钮，将开发
4、者工具弹出作为一个独立的窗口：下面来分别说下每个 Tab 的作用。Elements标签页这个就是查看、编辑页面上的元素，包括 HTML 和 CSS：左侧就是对页面 HTML 结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性，或者你点右键选Edit as Html直接对元素的 HTML 进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。（注：看到上面右键菜单的最后一个选项审查元素 了么？这是不是说明这个开发者工具的页面也是 HTML 来的呢？你点一下就知道了哦，嘿嘿 ）你还可以对某个元素进行监听，在 JS 对元素的属性或者 HTML 进行修改的时候，直接触发断点，跳转到对
5、改元素进行修改的 JS 代码处：Elements 标签页的右侧可以对元素的 CSS 进行查看与编辑修改：你还可以通过这里看到各 CSS 选择器设置的 CSS 值的覆盖情况。下面的 Metrics 可以看到元素占的空间情况（宽、高、Padding、Margin 神马的）：注意到上面的 Properties 没有？这个很有用哦，可以让你看到元素具有的方法与属性，比查 API 手册要方便得多哦（ 要注意某些方法和属性在 IE、FireFox等其他浏览器下面的支持情况哦）。Resources标签页Resources 标签页可以查看到请求的资源情况，包括 CSS、JS 、图片等的内容，同时还可以查看到存
6、储相关的如 Cookies、HTML5 的 Database 和LocalStore 等，你可以对存储的内容编辑和删除。这里的 CSS 文件有一个好玩的特性，你可以直接修改 CSS 文件，并且修改即时生效哦：Network标签页Network 标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用，特别是在查看 Ajax 类请求的时候，非常有帮助。注意是在你打开 Chrome 开发者工具后发起的请求，才会在这里显示的哦。点击左侧某一个具体去请求 URL，可以看到该请求的详细 HTTP 请求情况：我们可以在这里看到 HTTP 请求头、HTTP 响应头、HTTP 返回的内
7、容等信息，对于开发、调试，都是很有用的。Scripts标签页很明显，这个标签页就是查看 JS 文件、调试 JS 代码的，直接看下图的说明：还有你可以打开 Javascript 控制台，做一些其他的查看或者修改：你甚至还可以为某一 XHR 请求或者某一事件设置断点：Timeline标签页注意这个 Timeline 的标签页不是指网络请求的时间响应情况哦（这个在Network 标签页里查看），这个 Timeline 指的 JS 执行时间、页面元素渲染时间：点击底部的 Record 就可以开始录制页面上执行的内容。（这个不熟悉，请参考文末链接）Profiles标签页这个主要是做性能优化的，包括查看
8、CPU 执行时间与内存占用：这个也不熟悉，不多说，还是请参考文末链接吧。Audits标签页这个对于优化前端页面、加速网页加载速度很有用哦（相当与 Yslow）：点击 run 按钮，就可以开始分析页面，分析完了就可以看到分析结果了：它甚至可以分析出页面上样式表中有哪些 CSS 是没有被使用的哦：Console标签页就是 Javascript 控制台了：这个除了查看错误信息、打印调试信息（console.log()）、写一些测试脚本以外，还可以当作 Javascript API 查看用。例如我想查看 console 都有哪些方法和属性，我可以直接在 Console 中输入console并执行：怎么
9、样，一目了然了吧 ？再例如我想查看日期函数都有哪些方法：（注：注意在这里看到的某些方法和属性是 ES5 新增的，记得兼容其他浏览器的支持情况哦）结语Google Chrome 除了简洁、快速，现在的 Chrome 的插件也非常的丰富了。而对于 web 开发者来说，Chrome 对于 HTML5、CSS3 等一些新标准的支 持也是比较完善的，而且 Chrome 的开发者工具我个人认为真的非常好用，这就是为什么我向 web 开发者推荐使用 Chrome 的原因。注 1：本文截图的 Chrome 版本为：13.0.782.215 m注 2： Chrome 开发者工具更详细的说明请参考：http:/ 阅读(2517)| 评论(0)| 转载 (2) |举报每个程序员都必须遵守的编程原则 让程序员愤怒的 10种事最近读者
