Chrome DevTools：之一：整体功能划分

核心功能分成即为上图中绿色部分：Element（元素）、Console（控制台）、Sources（资源）、Network（网络）、Performance（性能）、Memory（内存）、Application（应用）、Security（安全）、Audits（监控）。其中前四种为最常用的功能。

    注：上图中，Adbolck Plus不是原生功能，而是第三方插件带来的。

    这些按钮的主要功能点如下（还有很多细节的用法，后面详细说明）：

• Elements: 查找网页源代码HTML中的任一元素, 手动修改任一元素的属性和样式且能实时在浏览器里面得到及时变化。
• Console: 记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。同时可以通过配置，记录所有的Ajax(XMLHttpRequest)请求。
• Sources: 查看所有资源文件，对文件按照域名组织成文件夹形式。同时支持查看文件内容，格式化文件，断点调试。通过 snippet 可以插入一段 JS 代码并执行，可读性比在Console中加入JS代码要强很多。
• Network: 记录页面中各个请求资源信息（包括状态、请求和响应头、Cookie、相应、资源类型、大小、所用时间等），能够根据关键词或者请求类型进行过滤，还能查看请求的最终发起方。同时还有载入过程截图，限速调试，保存跳转过程中的记录等等功能。

• Timeline: 记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。
• Profiles: 如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
• Application: 记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
• Security: 判断当前网页是否安全。
• Audits: 对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。

    除了上面的核心功能，有两个功能需要注意：模拟移动版浏览器 + 改变开发工具所在位置。这两点往往会结合起来用。具体按钮就是上图中 蓝框和红框 所标记的位置。

    如图所示，可以模拟不同设备打开网页。上图中可以看到设备类型、分辨率、缩放、屏幕方向。而此时开发工具是放在模拟屏幕的右侧，这样使用起来更加方便。

对于有两个屏幕的开发者，可以选择吧开发工具单独放置在另一个屏幕上，方便操作。

    此外，在 More tools 中还有其他工具，其中在分析页面交互过程的时候 “Search” 是非常有用的。它可以搜索所有资源内容，找到特定字符串。

    记得在Settings中有一个匿名内容搜索的选项，记得选中。

    在 Setting > General > Show rulers 下可以启用一个尺子，当你鼠标悬停在某个元素上或者选中一个元素的时候，它会显示出来。

    在 Settings 中，除了设置之外，有两个功能藏得比较深

http://isux.tencent.com/chrome-workspace.html https://developers.google.com/web/tools/setup/setup-workflow Workspace: 能够在开发者工具中调试修改js或者css同时自动保存文件，能够避免开发人员在工具中调试好，再到编辑器中修改一次代码的重复操作，能够提高一定的效率。 http://www.cnblogs.com/zhuyang/p/2768166.html Blackboxing: 在Chrome调试代码时不进入“拉黑”的JS。