点亮JS调试新体验，Chrome断点新升级，助你如虎添翼

Chrome 新断点侧边栏：点亮 JavaScript 调试新境界

作为前端开发人员，掌握 JavaScript 代码调试技能至关重要。谈及调试，断点是必不可少的利器。断点是开发人员在代码中设置的标记，当程序执行到断点时，程序会暂停执行，让开发人员能够检查变量值、调用栈等信息，从而找出问题所在。

Chrome 111 及更高版本中新推出的断点侧边栏迎来重大升级 ，为开发者带来更加直观、高效的调试体验。

新断点侧边栏的不同之处

1. 简洁直观的全新界面

全新的断点侧边栏采用简洁直观的界面设计，让您一眼就能获取所需信息。断点列表以清晰的卡片形式呈现，每个卡片包含断点的名称、位置、条件和状态等信息。

2. 更加灵活的断点管理

新断点侧边栏提供了更加灵活的断点管理功能。您可以轻松添加、删除、启用、禁用断点，还可以为断点设置条件，只有当条件满足时，断点才会触发。

3. 强大的断点过滤功能

新断点侧边栏还提供了强大的断点过滤功能。您可以根据断点的名称、位置、条件、状态等信息进行过滤，快速找到您需要的断点。

4. 支持断点分组

新断点侧边栏支持断点分组功能。您可以将相关的断点分组，以便于管理和查找。

如何使用新断点侧边栏？

1. 打开断点侧边栏

在 Chrome DevTools 中，您可以通过以下方式打开断点侧边栏：

• 点击 “Sources” 面板中的 “Breakpoints” 按钮
• 按下快捷键 Ctrl+B

2. 添加断点

要添加断点，请在代码编辑器中单击您要设置断点的行号，或右键单击并选择 “Add breakpoint” 选项。您还可以在断点侧边栏中点击 “Add breakpoint” 按钮添加断点。

3. 编辑断点

要编辑断点，您可以双击断点侧边栏中的断点卡片，或右键单击并选择 “Edit breakpoint” 选项。您可以在弹出的对话框中修改断点的名称、位置、条件和状态。

4. 删除断点

要删除断点，您可以点击断点侧边栏中的断点卡片上的 “×” 按钮，或右键单击并选择 “Delete breakpoint” 选项。

5. 启用/禁用断点

要启用或禁用断点，您可以点击断点侧边栏中的断点卡片上的开关按钮，或右键单击并选择 “Enable breakpoint” 或 “Disable breakpoint” 选项。

总结

Chrome 新的断点侧边栏为开发人员提供了更加直观、高效的调试体验。简洁的界面、灵活的断点管理、强大的断点过滤功能和支持断点分组等特性，让开发者能够更加轻松地调试 JavaScript 代码，提高开发效率。如果您还没有体验过新断点侧边栏，不妨现在就试试吧！

常见问题解答

1. 新断点侧边栏是否兼容旧版本 Chrome 浏览器？

不，新断点侧边栏仅适用于 Chrome 111 及更高版本。

2. 如何设置条件断点？

在添加或编辑断点时，您可以在 “Conditions” 字段中设置条件表达式。只有当条件表达式为 true 时，断点才会触发。

3. 如何在断点处暂停程序执行？

当程序执行到断点时，程序会自动暂停执行。您可以在断点侧边栏中看到暂停的信息，并检查变量值和其他调试信息。

4. 我可以在 Chrome DevTools 中使用其他断点类型吗？

除了普通断点之外，Chrome DevTools 还支持事件监听器断点、XHR 断点和 DOM 断点等其他断点类型。

5. 如何提高 JavaScript 代码调试效率？

除了使用新断点侧边栏之外，还可以使用其他调试工具和技巧，例如：

• 使用源映射
• 打印日志信息
• 使用控制台断点
• 调试远程设备上的代码