Sources

Source

查看变量

断点调试

• debugger; 代码中加入后自动创建断点，不需要在source中去找需要断点的代码所在行，线上需保证删除。
• 条件断点

  右击断点 - Edit breakpoint 编辑条件

• 查看被压缩的js:

  点击{ }符号

  

Execution control

添加删除断点

Interact with paused breakpoints

Call Stack panel

Blackbox JavaScript files

当我们开发网页的时候都会用一些第三方的框架或者库，它们几乎都是经过测试并且相对而言Bug较少的。不过当我们调试我们自己的脚本的时候也会一不小心跳到这些文件中，引发额外的调试任务。解决方案就是禁止这部分不需要调试的脚本运行。

Console drawer

Breakpoints in Dynamic JavaScrip

Pause on Next JavaScript Statement

Pause on Exceptions

Pause on Uncaught Exceptions

xhr断点

JavaScript Event Listeners

Exceptions

Tracking exceptions

Printing stack traces

常用快捷键

• 到指定的行数：快捷键CMD + O或在“Sources”面板中选择指定的文件中使用“:行数:列数”的功能。
• 移动光标：按住CMD + 点击可以添加多个光标，你也可以使用CMD + U撤销你选择的最后一个光标。

Source Maps

SASS Source Maps

JavaScript Source Maps

Content scripts

运行代码片段（Running Code Snippets）

可以让你想保存小段的脚本、书签或是你在浏览器中调试时经常用到的代码，都可以使用Snippets，你可以在Source面板里创建、存储和运行这些Snippets。