chrome浏览器设置断点（翻译）

原文地址： https://developers.google.com/web/tools/chrome-devtools/debug/breakpoints/add-breakpoints

调试代码最有效的方式就是设置断点. 启用断点将允许你终止脚本执行 然后查看调用栈的变量值 在该特定时刻. 

这里您可以设置俩种类型的断点: 手动和有条件的.

• 手动断点设置是在特定的代码行上设置断点. 你可以设置通过 Chrome 图形界面开发工具, 或者在你的代码里插入关键词  debugger .
• 条件断点会在满足特点条件时被触发 (例如. 一个 onclick  事件触发, 一个异常抛出等,). 你可以开启他通过 开发者工具 , DevTools 会为你自动设置断点.

内容

1. 查看断点
2. 创建手动断点
3. 创建条件断点

将会使用到三种类型demo

• 在代码的指定一行使用手动代码终止脚本执行.
• 使用条件断点当指定条件被满足的时候.
• 设置条件断点在 DOM 节点被改变的时候, XHR 请求, event 事件监听, 和捕获异常.

查看断点

任何时候查看存在的断点在  Sources  资源面板里

1. 打开 Chrome 菜单 .
2. 选择  More tools > Developer tools, 或者右击页面上的一个元素然后菜单中选择 Inspect element .
3. 选择 Sources 资源面板

断点显示在侧边栏 sidebar, 按类型进行分组.

创建手动断点

手动断点是你设置在单行代码上. 这里有俩种方式设置断点, 通过开发者工具, 或者在你的代码中插入关键词  debugger 

使用手动断点在你强烈怀疑你的代码会失败的时候, 你想查看回调栈和变量.

在单行代码上添加手动断点

添加一行断点

• 点击你想设置断点所在行的行号. 你能添加多个断点通过点击行号.
• 添加 debugger 关键词在你的代码里, 等价于上面的点击行号.
  
  

临时关闭一个断点, 在侧边栏 关闭复选框即可.

移除一个断点, 点击所在行号即可  或者 右击 侧边栏的断点 选择 Remove breakpoint.

创建条件断点

条件断点会触发当一个指定条件被满足的时候(例如. 一个  onclick 事件触发的时候, 或者一个未知异常被捕获的时候). 你可以启用通过  DevTools GUI, 然后 DevTools 会自动

中断当指定条件满足的时候.

使用条件断点 当你一次需要设置多个断点时. 例如, 假设你遇到错误当 DOM 节点被移除时. 可能会有20种不同的错误来源，不可能每一个可疑的语句前放置一个手动断点，你可以设置一个条件断点。断点被触发，只要任何代码删除DOM节点。

DevTools提供四种条件断点：

• DOM 变动 事件 (添加, 修改, 移除)
• XMLHttpRequest
• JavaScript event 监听
• Uncaught exceptions 捕获异常

 DOM 变动 event 之前中断

使用 DOM 变动 event 断点当脚本 添加, 修改, 或者移除 一个 DOM 节点 你想隔离他来观察变化. 执行中断当一个指定的 DOM 节点被修改, 在修改之前应用 (看 Edit the DOM).

添加一个 DOM 变动断点, 打开 Elements 面板然后右击一个元素. 在菜单中选择,  Break on…, 然后选择一个可选条件: Subtree modifications, Attributes modifications, 或者 Node removal.

临时关闭一个 DOM 可以通过 选择侧边栏的 复选框.

移除一个 DOM 断点, 再次右击元素, 点击 Break on…, 然后选择当前启用的元素. 或者, 右击在侧边栏中的断点选择 Remove breakpoint.

在 XMLHttpRequest 中断

有两种方式你能为  XMLHttpRequest 创建条件断点:

• 当请求的 URL 包含一个指定的字符串时. DevTools 开发者工具在请求之前中断.
• 在一个指定的  XMLHttpRequest event 事件之前 (例如. load 加载, timeout 超时, error 错误). DevTools 会正确中断在 XMLHttpRequest 事件触发时.

中断当 XMLHttpRequest URL 包含指定字符串

中断当 XMLHttpRequest URL 包含一个指定字符串:

1. 点击 Add XHR breakpoint 按钮  在侧边栏.
2. 在 Break when URL contains 字段里, 键入您希望 URL 包含的字符串 来导致 XHR 请求中断并按  Enter.

编辑这个字段, 双击断点.

移除这个断点, 右击侧边栏的断点, 然后选择  Remove breakpoint.

在指定的 XMLHttpRequest event 事件之前中断

在指定的 XMLHttpRequest event 事件触发之前中断:

1. 找到 Event Listener Breakpoints 面板.
2. 扩展 XHR 下拉菜单.
3. 选择事件周期中你想中断的事件. DevTools 将中断这个状态在所有 XMLHttpRequest events 的事件中.

中断 JavaScript event 事件监听被触发时

使用JavaScript event listener 断点 如果你想了解由脚本处理的某个事件 (例如按下 或 双击) . 执行中断在事件监听被触发时(看 View element event listeners).

添加 JavaScript event listener 断点:

1. 展开侧边栏的 Event Listener Breakpoints 区域 , 然后展开你想中断的事件 (Animation, Clipboard, Control, 等.).
2. 在目录展开下面, 点击复选框选择 中断监听的事件类型. 选择所有, 点击目录本身的复选框.

移除事件通过清除选择复选框.