新的“Breakpoints”边栏如何帮助您更快地进行调试

Kim-Anh Tran
Kim-Anh Tran
Vaatika Dabra Groth
Vaatika Dabra Groth

旧版和新版断点边栏窗格并排显示。

如果您使用的是 Chrome 111 或更高版本,可能已经注意到我们更改了断点边栏的设计。在 Chrome 113 中,新边栏完全取代了旧版设计。我们重新设计此功能的目标是通过以下方式改进断点工作流

更好地概览已设置的所有断点。使包含断点的常见用户工作流程更易于访问更直观使现有的强大断点功能可见

本文假定您已熟悉使用断点进行调试。如果您之前未使用过断点,请参阅此关于断点的概览,详细了解如何使用断点调试代码。

现在,我们来看看新版的功能,以及如何使用新的边栏!请注意,此次重新设计主要集中于使现有功能更直观易用,而不是添加新功能。

遇到异常时暂停,以调查代码抛出错误的原因

在遇到捕获的和未捕获的异常时暂停。

您的代码是否会抛出异常?别担心!借助 Chrome 开发者工具,您可以在出现异常时暂停,以便在抛出异常的位置停止执行。这有助于您调查并更好地了解代码抛出错误的情况。您可以通过选中边栏中的相应复选框,选择是否要在捕获的异常或未捕获的异常时暂停。

管理断点:展开相关的断点组,并收起其他断点组,以便专注于相关内容

收起和展开断点组。

断点可能会分布在多个文件中。断点边栏会根据断点所属的文件对断点进行分组。展开相关断点组并收起其余断点组,以便仅关注对当前调试会话重要的断点。

管理断点:一键跳转到代码、移除或启用/停用断点

借助断点边栏,您可以一键完成常见任务。下面简要介绍了您可以执行哪些操作:

在代码编辑器中找到断点位置。 移除文件中的某个断点或所有断点。 启用或停用文件中的单个断点或所有断点。

只需点击一下,即可完成所有这些操作!当然,这些选项也显示在上下文菜单中:

点击断点代码段以跳转到断点位置

在代码编辑器中跳转到源代码位置。

您想检查在代码中的什么位置设置了断点,并分析周围的代码吗?只需点击边栏中断点的代码段,即可在代码编辑器中打开相应代码位置。

点击“移除”按钮,移除文件中的单个断点或所有断点

移除文件中的单个断点或所有断点。

将光标悬停在断点或断点组上,即可看到一个移除按钮,点击该按钮即可移除文件中的单个或所有断点。

停用文件中的单个或所有断点

启用或停用文件中的单个或所有断点。

选中或取消选中断点旁边的复选框,以启用或停用该断点。

如需启用或停用文件中的所有断点,请将鼠标悬停在断点组上,然后选中或取消选中文件名旁边显示的复选框。

利用这些鲜为人知的断点功能:条件断点和日志点

修改断点条件或通过修改断点更改日志点日志

修改断点条件或更改日志点日志。

如需修改断点条件或日志,请将鼠标悬停在断点上,然后点击显示的修改按钮。这会打开一个对话框,用于更改断点类型和断点的详细信息。

或者,在代码编辑器中选择断点所在的行,然后在 Linux 上按 Control+Alt+b,在 Mac 上按 Command+Alt+b 以打开断点修改对话框。

您还可以将鼠标悬停在边栏中的断点上,快速仔细检查条件或日志点日志:

查看条件或日志点日志。

总结

我们重新设计断点边栏的目标是让使用断点进行调试变得更轻松。最重要的是,我们力求使内容更有条理,更易于访问和理解。我们希望这些改进能帮助您在下次调试时事半功倍!

如果您有进一步改进的建议,请提交 bug 告诉我们!

下载预览渠道

不妨考虑将 Chrome Canary 版开发者版Beta 版用作默认开发浏览器。通过这些预览版渠道,您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API,并帮助您在用户发现问题之前发现网站上的问题!

与 Chrome DevTools 团队联系

您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。