Chrome 调试工具【DevTools】详解( 二 ) _调试

翻译过来就是片段，可以在这里创建代码片段，并独立运行和调试，刷新页面不会丢失
工作区
点击行号可以添加/移除断点，在断点上打开右键菜单可以禁用断点，以及设置断点触发条件进行编辑（比如可以设置断点在程序循环多少次后触发）
控制区
这里提供有调试操作按钮，以及一些调试信息的显示，顶部的几个按钮便是调试代码的核心按钮
名称描述
Pause/
暂停/恢复脚本执行（程序执行到下一断点停止）
Step over nextcall
执行到下一步的函数调用（跳到下一行）。
Step into nextcall
进入当前函数。
Step out of
跳出当前执行函数。
/ all
关闭/开启所有断点（不会取消）
Pause on
异常情况自动断点设置。
名称描述
【Chrome 调试工具【DevTools】详解】Watch
跟踪监控变量，点击"+"号添加变量名。
Call Stack
函数调用栈，显示执行路径。
Scope
查看属性作用域。
查看属性作用域。
XHR/fetch
当XHR的请求URL包含某一特定的字符串时所触发的断点。
DOM
当改变一个节点或其子元素时所触发的断点。
全局监听器，绑定在对象上的事件。
Event
事件发生时所触发的断点。
调试小技巧格式化调试代码，如下图：
设置（屏蔽JS库）
很多时候我们都会调用已封装好的库代码，最常用的比如，设置可以将代码给屏蔽掉，调试时就不再进入源文件中去了。
这样做可以省去我们调试的很多麻烦，提高调试效率，所以很有必要学会使用。
名称描述
这是针对于扩展的JS脚本的一个屏蔽设置，如果你开发过扩展应该明白。
自定义JS文件名匹配规则（可以使用正则表达式）。
启用，关闭。
Add
添加一个新的匹配规则。
参考文档