chorme devtools 系列文：
-
chorme devtools：进阶高级工程师必须锻造的利器。
第二篇，Sources面板：
左侧面板
1 . Page
已加载的全部资源，以域名划分文件夹。
2 . Snippets
代码片段，不会因为刷新丢失，使用：添加=>保存(ctrl+s)=>运行(Run)=>不用则移除(Remove)
注：以下了解即可
- Filesystem & Overrides 可以加载本地文件夹
- Content scripts 扩展工具的脚本，比如百度翻译插件等
javaScipt调试
大家都会用的就略了...
右键行号，可以看到其他调试菜单
1 . Add conditional breakpoint
条件断点，选择后让你输入一个表达式，这个表达式返回值决定这行代码会不会暂停
2 . Blackbox Script
黑盒脚本，跟代码时不会走的代码的内部，比如第三方框架。一般来说，正确的使用f10 f11 f12用不到这个
右侧面板
1 . Watch
变量监察，添加个变量会一直监察这个变量的值，当前作用域无值时显示< not availble >
2 . Call Stack
函数调用栈
3 . Scope
作用域，会显示断点所在的作用域，级别如下：
- Local 当前作用域
展开显示作用域下的变量
- Closure (x) 闭包作用域，x是函数名称
Script 标签作用域
- Global 全局作用域Window
4 . Breakpoints
断点列表
5 . XHR/fetch Breakpoints
请求断点，ajax和fetch请求都可以在这里打断点，Call Stack可以查看调用栈
6 . DOM Breakpoints
这里列出的就是上篇中html的断点
7 . Global Listeners
全局监听器，指的是绑定在 window 对象上的事件
8 . Event Listeners Breakpoints
所有的事件，勾选指定类型，比如Mouse/click，则所有的click事件都会被断住
征文
本篇文章就到这里，下篇继续剩余的菜单，欢迎大家补充和提问~
【关注一下不迷路】
html css html css javascript html javascript css javascript css
閱讀更多 全棧前端 的文章
