如果您使用的是 Chrome 111 或更高版本,可能已经注意到我们更改了断点边栏的设计。在 Chrome 113 中,新边栏完全取代了旧版设计。我们重新设计此功能的目标是通过以下方式改进断点工作流:
更好地概览已设置的所有断点。使包含断点的常见用户工作流程更易于访问且更直观。 使现有的强大断点功能可见。
本文假定您已熟悉使用断点进行调试。如果您之前未使用过断点,请参阅此关于断点的概览,详细了解如何使用断点调试代码。
现在,我们来看看新版的功能,以及如何使用新的边栏!请注意,此次重新设计主要集中于使现有功能更直观易用,而不是添加新功能。
遇到异常时暂停,以调查代码抛出错误的原因
您的代码是否会抛出异常?别担心!借助 Chrome 开发者工具,您可以在出现异常时暂停,以便在抛出异常的位置停止执行。这有助于您调查并更好地了解代码抛出错误的情况。您可以通过选中边栏中的相应复选框,选择是否要在捕获的异常或未捕获的异常时暂停。
管理断点:展开相关的断点组,并收起其他断点组,以便专注于相关内容
断点可能会分布在多个文件中。断点边栏会根据断点所属的文件对断点进行分组。展开相关断点组并收起其余断点组,以便仅关注对当前调试会话重要的断点。
管理断点:一键跳转到代码、移除或启用/停用断点
借助断点边栏,您可以一键完成常见任务。下面简要介绍了您可以执行哪些操作:
在代码编辑器中找到断点位置。 移除文件中的某个断点或所有断点。 启用或停用文件中的单个断点或所有断点。
只需点击一下,即可完成所有这些操作!当然,这些选项也显示在上下文菜单中:
点击断点代码段以跳转到断点位置
您想检查在代码中的什么位置设置了断点,并分析周围的代码吗?只需点击边栏中断点的代码段,即可在代码编辑器中打开相应代码位置。
点击“移除”按钮,移除文件中的单个断点或所有断点
将光标悬停在断点或断点组上,即可看到一个移除按钮,点击该按钮即可移除文件中的单个或所有断点。
停用文件中的单个或所有断点
选中或取消选中断点旁边的复选框,以启用或停用该断点。
如需启用或停用文件中的所有断点,请将鼠标悬停在断点组上,然后选中或取消选中文件名旁边显示的复选框。
利用这些鲜为人知的断点功能:条件断点和日志点
修改断点条件或通过修改断点更改日志点日志
如需修改断点条件或日志,请将鼠标悬停在断点上,然后点击显示的修改按钮。这会打开一个对话框,用于更改断点类型和断点的详细信息。
或者,在代码编辑器中选择断点所在的行,然后在 Linux 上按 Control+Alt+b,在 Mac 上按 Command+Alt+b 以打开断点修改对话框。
您还可以将鼠标悬停在边栏中的断点上,快速仔细检查条件或日志点日志:
总结
我们重新设计断点边栏的目标是让使用断点进行调试变得更轻松。最重要的是,我们力求使内容更有条理,更易于访问和理解。我们希望这些改进能帮助您在下次调试时事半功倍!
如果您有进一步改进的建议,请提交 bug 告诉我们!
下载预览渠道
不妨考虑将 Chrome Canary 版、开发者版或 Beta 版用作默认开发浏览器。通过这些预览版渠道,您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API,并帮助您在用户发现问题之前发现网站上的问题!
与 Chrome DevTools 团队联系
您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。
- 请访问 crbug.com 向我们提交反馈和功能请求。
- 在 DevTools 中,依次选择 More options > Help > Report a DevTools issue 以报告 DevTools 问题。
- 向 @ChromeDevTools 发送推文。
- 在 “开发者工具的新变化”YouTube 视频或 “开发者工具提示”YouTube 视频中留言。