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