本文会忽略一些过于基础的知识和细节
持续更新，欢迎关注~
本篇文章介绍Sources面板的使用，截图如下：
面板
左侧面板
-
Page
已加载的全部资源，以域名划分文件夹，ctrl+p进行搜索。
-
Snippets
代码片段，不会因为刷新丢失，使用：添加=>保存(ctrl+s)=>运行(Run)=>不用则移除(Remove)
Snippets使用示例
-
Filesystem & Overrides可以加载本地文件夹 -
Content scripts谷歌扩展工具的脚本
-
Overrides
本地文件覆盖线上文件，需要保持和线上文件夹结构一致，这个功能还是很好用的，毕竟线上压缩后的代码没法看，而且刷新也起作用
js调试
大家都会用的就略了...另外调试时是可以修改代码的
右键行号，可以看到其他调试菜单
右键菜单
-
Add conditional breakpoint
条件断点：选择后让你输入一个表达式，这个表达式返回值决定这行代码会不会被暂停
条件断点示例 Blackbox Script
黑盒脚本：跟代码时不会走的代码的内部，比如第三方框架。一般来说，正确的使用f10 f11 f12不需要使用这个
右侧面板
右侧面板
Watch
变量监察：添加个变量后会一直监察这个变量的值，当前作用域无值时显示< not availble >Call Stack
函数调用栈：略Scope
作用域：显示断点所在的作用域，级别划分如下：
-
Local当前作用域
展开时作用域下的变量 -
Closure (x)闭包作用域，x是函数名称 -
Script标签作用域 -
Global全局作用域Window
Scope示例
Breakpoints
断点：略-
XHR/fetch Breakpoints
请求断点：ajax和fetch请求都可以在这里打断点并在Call Stack显示调用栈，很方便追踪
断点示例1
断点示例2 DOM Breakpoints
这里列出的就是上篇中html的断点Global Listeners
全局监听器：指的是绑定在 window 对象上的事件Event Listeners Breakpoints
所有事件的断点：勾选指定类型，比如Mouse/click，则所有的click事件都会被断住
