Chrome 开发者工具（三）------ Sources
JS 快速调试利器，直接在 F12 进行断点调试。
不用再去文件中打印。
一、Sources 面板都有哪些神奇的内容
打开 F12 切换到 Sources 面板，可以看到下面三个区域
- 区域①，页面加载的文件，这一区域又有五个 Tab。
- Page：页面加载的资源文件
- Filesystem：可以选择本地任意文件查看
- Overrides：打开本地文件并编辑，可以直接修改文件内容
- Content scripts：浏览器插件及浏览器本身的资源文件
- Snippets：自己编写的测试 JS 片段。
- 会保存在浏览器中，刷新页面也不会消失。这样不必在文件中频繁编写测试脚本。
- 可以追加多个片段
- 右键可以保存文件到本地，可以执行脚本、重命名、删除
- 区域②，在区域①中选中的文件，都在这个区域打开显示。
- 点击 JS 文件中的行号，可以设置断点
- 左下角的一对花括号，点击之后可以调整代码格式
- Ctrl + G，可以快速定位到文件的某一行
- 调试状态下，鼠标划过元素会自动显示相关信息。信息非常齐全很强大
- 区域③，在区域②中设置的断点信息，会显示在这个区域
- Breakpioints：显示所有区域②中设置的断点，双击某一个断点，可以定位到区域②的相应位置
- Scope：调试停止在断点处时，显示当前断点位置的所有变量。Local（环境变量）、Global（全局变量）、Closure（闭包变量）、Script
- Call Stack：显示方法加载的过程（先执行什么，后调用什么）
- DOM Breakpoints：添加的 DOM 监控信息
- Event Listener Breakpoints：几乎包含了所有 JS 事件，选中某一项之后，在网页上只要触发这个时间，就会执行断点监控
- XHR/fetch Breakpoints：调试 Ajax，点击加号“+”添加 URL，调试到执行 URL 位置后会返回信息
- Watch：编写监控脚本，在执行啊哦每个断点的位置都会执行这个脚本
二、断点调试到底是怎么进行的呢
在区域③中最上面，有上图中这几个按钮
- ①、开始或停止断点调试（F8 或 Fn + F8，下面同理）
- ②、不进入方法内部，继续往下执行（F10）
- ③、进入方法中（F11）
- ④、从方法中跳出（Shift + F11）
- ⑤、跳到下一步（F9）
- ⑥、禁用所有断点
- ⑦、程序运行异常时，是否中断
下面开始调试：
1、首先在区域②中，设置断点
2、点击区域③中的开始调试按钮，看到区域②中代码进去调试状态
3、此时，鼠标放在代码的任何位置，会自动显示当前位置的所有信息
4、在区域③的 Watch 中编写监控脚本，在 XHR/fetch Breakpoints 中设置调试的 URL
5、然后根据情况点击上面的 7 个按钮移动调试点，结合区域③下方的信息查看调试结果
6、结合 Console 控制台打印信息，可以更好更快的完成调试
7、调试状态下，在区域②中直接修改代码，Ctrl + s 保存后，查看修改后的效果
以上基本能解决 JS 大部分的问题，调试好后，将修改代码移到 JS 文件中即可。
下一篇接着探索其他功能。。
