Sources面板

断点调试

debug介绍

下图红色区域从左至右依次是：

• （等号）pause script execution –>暂停脚本执行
• （半弧箭头）step 快捷键：F9 –>单步执行 注意：遇到子函数会进去继续单步执行
• （下箭头）step into 快捷键：F11 全称：step into next function call –>单步执行，遇到子函数就进去继续单步执行
• （上箭头）step over 快捷键：F10 全称：step over next function call –>单步执行，遇到子函数并不进去，将子函数执行完并将其作为一个单步
• （右箭头）step out 快捷键：Shift + F11 全称：step out of current function –>直接跳出当前的函数，返回父级函数
• （右粗箭头，点击一下多一个斜线，再次点击就取消了）deactivate breakpoints or activate breakpoints –>禁用断点/启用断点
• （圆形等号）pause on execution –>暂停执行

行断点

代码行断点

• 点击 Sources 标签。
• 打开包含您想要中断的代码行的文件。
• 转至代码行。
• 代码行的左侧是行号列。 点击行号列。 行号列顶部将显示一个蓝色图标。

条件代码行断点

在代码中调用debugger 可在该行暂停。 此操作相当于使用代码行断点，只是此断点是在代码中设置，而不是在 DevTools 界面中设置。

console.log('a');
console.log('b');
debugger;
console.log('c');

管理代码行断点

• 勾选条目旁的复选框可以停用相应的断点。
• 右键点击条目可以移除相应的断点。
• 点击代码可以跳转到断点对应位置

右键点击 Breakpoints 窗格中的任意位置可以取消激活所有断点、停用所有断点，或移除所有断点。 停用所有断点相当于取消选中每个断点。 取消激活所有断点可让 DevTools 忽略所有代码行断点，但同时会继续保持其启用状态，以使这些断点的状态与取消激活之前相同。

DOM 更改断点

设置 DOM 更改断点：

1. 点击 Elements 标签。
2. 转至要设置断点的元素。
3. 右键点击此元素。
4. 将鼠标指针悬停在 Break on 上，然后选择 Subtree modifications、Attribute modifications 或 Node removal。

• Subtree modifications：在移除或添加当前所选节点的子级，或更改子级内容时触发这类断点。 在子级节点属性发生变化或对当前所选节点进行任何更改时不会触发这类断点。
• Attributes modifications：在当前所选节点上添加或移除属性，或属性值发生变化时触发这类断点。
• Node Removal：在移除当前选定的节点时会触发。

图为DOM断点在source面板的窗格

XHR/Fetch 断点

1. 点击 Sources 标签。
2. XHR Breakpoints 窗格。
3. 点击 Add breakpoint。
4. 输入要对其设置断点的字符串。 DevTools 会在 XHR 的请求网址的任意位置显示此字符串时暂停。
5. 按 Enter 键以确认。

事件侦听器断点

1. 点击 Sources 标签。
2. 展开 Event Listener Breakpoints 窗格。 DevTools 会显示 Animation 等事件类别列表。
3. 勾选这些类别之一以在触发该类别的任何事件时暂停，或者展开类别并勾选特定事件。

异常断点

引发已捕获或未捕获异常的代码行暂停，可以使用异常断点。

1. 点击 Sources 标签。
2. 点击 Pause on exceptions 引发异常时暂停。 启用后，此按钮变为蓝色。

Filesystem

在 Chrome DevTools上调试 css 或 JavaScript时，修改的属性值在重新刷新页面时，所有的修改都会被重置。如果你想把修改的值保存下来并且同步到本地，可以使用Source的Filesystem，来与本地目录进行映射，前提是必须拥有，如果本地没有代码，那么更改不会被保存同步。

Overrides

与Filesystem的区别，Filesystem必须在本地有源代码，Overrides则不需要。

写在 Chrome DevTools上调试 css 或 JavaScript时，修改的属性值在重新刷新页面时，所有的修改都会被重置。如果你想把修改的值保存下来，刷新页面的时候不会被重置，可以使用Overrides。

Snippets

Chrome的snippets是代码片段，可以在Chrome DevTools的sources面板中执行。
可以从任何页面运行，当你运行一个片段，它会从当前打开的页面的上下文中执行指定的js代，在sources面板中run即可。