chrome开发者工具功能拾遗：Sources面板篇

本文主要介绍一些本人在此之前不甚了解，但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能。也借这篇文章提醒一下自己，在实际项目中多使用这些功能，尽快熟悉起来，提升自己的工作效率。

---

直接修改js进行调试

chrome开发者工具中一个比较常用的功能就是在Elements面板修改css直接看效果，殊不知，原来在Sources面板中，连js都可以直接修改。
原本我也感到很惊讶，js跟css的差别很大，js是执行完就完事了，哪像css一直都有效的呀，那这修改执行完的js又能有什么作用呢？在查阅相关资料后，发现这功能主要是在设置断点(breakpoint)进行单步调试时用的，步骤如下：
1. 直接给某行js代码设置断点。

2. 刷新页面后，程序就会停在断点设置的那一行上。

3. 然后我们就可以在断点那一行代码的后面添加我们自己的debug代码了，例如下面这样：

4. 按下快捷键Ctrl + s保存，发现该面板变红了，即表示保存生效：