chrome开发者工具入门

Chrome旧版本8个功能子集（旧版本，但是讲解比较详细）

参考文档：https://www.cnblogs.com/daishuguang/p/3972721.html

现在版本

断点设置

断点的设置，只是方式不太一样。前面说过断点的作用就是将函数挂起，DOM Breakpoints的作用就是在DOM被修改时，在修改的代码前挂起。XHR Breakpoints就是在出现了XHR请求的时候挂起，具体就是在xhr.send()这个方法处挂起。Event Breakpoints就是在触发了相应的事件时，在事件函数处挂起。我们可以选择不同的需要设置断点的事件，如Keyboard、Mouse等事件。例如我们设置了一个方法a.onclick = function(){…}，在点击a的时候，程序就会在这个function处挂起。最后是Workers，可以设置的只有Pause on start，就是在和Workers通信开始的时候挂起。

设置好了断点，下图的这几个按钮就非常有用了，他们出现在右边栏的顶部。第一个按钮（像播放一样的按钮）是暂停和开始。当设置了断点之后，js的执行就暂停了，如果我们想要跳过当前的断点继续执行js，就可以点击这个按钮，点击之后js的执行会继续，如果在接下来的执行过程中再次遇到断点，那么就会在那个断点处暂停。第二个按钮（弧形的按钮），是跳过按钮。如果在执行的过程中遇到了一个函数，点击这个按钮，调试程序就会跳过这个函数的具体执行过程，直接到达函数执行完毕的状态，不过如果没有遇到函数，调试也会一步一步地执行。向下的箭头是进入按钮， 如果遇到了一个函数，那么就会进入这个函数，如果没有遇到函数，调试就一步一步执行。向上的箭头是返回按钮，点击之后会退出当前正在执行的函数，到达函数执行完毕的在状态，如果是在全局作用域中，那么句退出调试。最后一个按钮是激活和反激活所有的断点，如果当前的断点是激活的，点击之后所有的断点将不起作用，再次点击之后恢复作用。

最后在左下部有三个按钮，如下图：

第一个按钮有三种状态：Don’t pause on exceptions，Pause on all exceptions，Pause on uncaught exceptions。第一种状态是出现异常时不暂停，第二种是在出现异常的地方暂停，第三种是在出现了没有被捕捉的异常处暂停，这里的暂停也就是设置一个断点。

第二个按钮表示代码的格式，是否格式化代码，不格式化将以原本的方式显示。最后一个铅笔图标的按钮点击之后就可以修改代码了。某些邪恶的同学可能已经想到可以用这个来干一些坏事了。

 

 

Chrome开发者工具 英文翻译：

Elements：元素（查看 HTML 结构）

Resources：资源（一些 Cookie 等资源可以在这里查看到）

Network：网络（一些 Http请求 都在这）

Sources：来源（相当于以前的“Scripts/脚本”,也相当于 Firebug 当中的“脚本”，用来 调试脚本 用的）

Timeline：时间线

Profile：性能分析

Audits：审查/检查（会提供一些“优化建议”，比如说 哪些CSS没有用到）

Console：控制台

----------------------------------------------------------------------------------------

Computed Style：计算后的样式

Show inherited：显示继承的样式

Metrices：测量

Properties：属性

DOM Breakpoints：Dom断点

Event Listeners：事件监听器

----------------------------------------------------------------------------------------

preserve log ：保存日志在导航

-- 说明：面板上，通常情况下，只能保持 当前页面的http请求，也就是说，如果页面发生跳转，先前的那个页面的日志信息就不见了，而这个功能能保存多个页面的日志分析，

尤其是在分析ajax请求时，该功能尤为重要！

----------------------------------------------------------------------------------------

在Console面板，可以按住 Shift + Enter 组合键 实现代码换行。

 

 

 

官方指导文档：https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/