Chrome 开发工具如何使用

前言：谷歌开发工具(以下用开发者工具简称），是基于谷歌浏览器内含的一套网页制作和调试工具。开发者工具允许网页开发者深入浏览器和网页应用程序的内部。该工具可以有效地追踪布局问题。

就算你不是一名前端开发工程师，相信你也不会对Chrome浏览器感到陌生。根据最新的一份（2015/06）的浏览器市场占有率报告，Chrome近乎占有浏览器天下的半壁江山。简单、快捷使它成为了新时代人们的新宠。如果你是一名web开发人员，我推荐你使用Chrome。作为前端开发的"IDE"，你只需要搭配一个编辑器就能完成几乎所有的开发任务了。关于它的使用和功能分析要么都是大而不全，要么是巨细糜烦。本系会比较详细地分享卤煮的一些Chrome（F12开发者功能）使用经验，从一些基础的功能开始到它的一些高级性能分析器（Timeline、Profiles）,在最后，将会推荐几款好的插件，希望对您的开发工作有些许的作用。如果你对一些面板模块功能已经很了解可以直接跳过去阅读你感兴趣的部分。

网友1：Chrome开发工具中最有用的面板Sources。 Sources面板几乎是我最常用到的Chrome功能面板，也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题，在审视一遍自己的代码而一无所获之后，我首先就会打开Sources进行js断点调试，而它也几乎能解决我80%的代码问题。Js断点这个功能让人兴奋不已，在没有js断点功能，只能在IE（万恶的IE）中靠alert弹出窗口调试js代码的时代（特别alert一个object根本不会理你），那样的开发环境对于前端程序员来说简直是一场噩梦；

网友2：现在wap端页面越来越多，Chrome的设备模式能模拟不同的屏幕大小和分辨率，方便了调试移动端产品的体验，虽然和在手机上看有一定的差异，但也基本满足需求。更何况Chrome还可以远程调试。建议学习教程的人，边看边操作，可以更快的上手。

多端阅读《Chrome 开发工具指南》:

谷歌浏览器开发工具综述

谷歌开发工具(以下用开发者工具简称），是基于谷歌浏览器内含的一套网页制作和调试工具。开发者工具允许网页开发者深入浏览器和网页应用程序的内部。该工具可以有效地追踪布局问题，设置 JavaScript 断点并可深入理解代码的最优化策略。

注意：如果你是一个网页开发者同时想要获得最新版本的开发工具，那么你应该使用<a rel="nofollow" href=""https://www.google.com/">谷歌浏览器（金丝雀）Canary 版。

手册简介:

谷歌 Chrome 开发工具，是基于谷歌浏览器内含的一套网页制作和调试工具。开发者工具允许网页开发者深入浏览器和网页应用程序的内部。该工具可以有效地追踪布局问题，设置 JavaScript 断点并可深入理解代码的最优化策略。

更新记录：

Chrome 开发工具 15 个必须知道的技巧(动图) 03-01 18:54

Chrome开发工具树形提示 (不稳定) 03-01 18:52

Chrome开发工具版本 1.1 (稳定) 03-01 18:52

Chrome开发工具展示 Chrome 调试协议客户端实例 03-01 18:52