likes
comments
collection
share

Chrome 新的断点如何帮助你更快地进行调试

作者站长头像
站长
· 阅读数 1

原文链接: developer.chrome.com/en/blog/bre…

如果您使用的是Chrome 111或更高版本,则可能已经注意到我们已更改了断点侧边栏的设计。随着Chrome 113,新的侧边栏完全替换了旧设计。我们重新设计的目标是通过以下方式改进断点工作流程

提供更好的概览,涵盖所有设置的断点。使使用断点的常见工作流程更易于访问直观。使现有的断点功能更加明显

本文假定您已经熟悉使用断点进行调试。如果您以前没有使用过断点,请转到此断点概述并了解有关如何使用断点调试代码的更多信息。

现在,让我们来看看重新设计提供了什么,以及如何利用新的侧边栏!请注意,重新设计集中于使现有功能更易于使用和更易于访问,而不是添加新功能。

# 点击“暂停异常”以调查代码为什么会抛出错误

Chrome 新的断点如何帮助你更快地进行调试

您的代码是否会抛出异常?别担心!Chrome开发者工具允许您暂停异常,以在抛出异常的点停止执行。这可以帮助您调查和更好地了解代码抛出错误的情况。您可以通过在侧边栏中选中相应的复选框来选择是否要暂停捕获的异常、未捕获的异常或两者都暂停。

警告

对于Node调试,如果Chrome 113暂停捕获的异常,则只有在同时暂停未捕获的异常时才能实现。这是一个之前存在的依赖项,出于与Node LTS兼容性的原因需要保留。一旦Node LTS版本18不再受支持,我们也将允许Node独立暂停。请关注crbug/1382762的更新。

# 管理您的断点:展开相关断点组并折叠其他内容以关注相关内容

Chrome 新的断点如何帮助你更快地进行调试

断点可能分布在多个文件中。断点侧边栏根据它们所属的文件将断点分组。通过展开相关的断点组并折叠其余的组,只关注当前调试会话中的断点。

重要

如果几个文件恰好具有相同的文件名,则Chrome开发者工具还会尝试在文件名旁边显示文件路径的一部分,以帮助您区分文件。

# 管理您的断点:单击即可跳转到代码、删除或启用/禁用断点

断点侧边栏允许您通过单击完成常见任务。以下是您可以完成的任务的概述...

在代码编辑器中导航到断点位置。删除一个断点或文件中的所有断点。启用或禁用一个断点或文件中的所有断点。

这一切都可以通过单击来完成!当然,这些选项也在上下文菜单中可用:

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

Chrome 新的断点如何帮助你更快地进行调试

您想要检查您在代码中设置断点的位置,并分析周围的代码吗?只需单击侧边栏内断点的代码片段,它将在代码编辑器中打开代码位置。

# 单击“删除”按钮以删除文件中的单个断点或所有断点

Chrome 新的断点如何帮助你更快地进行调试

将鼠标悬停在断点或断点组上,以显示一个删除按钮,单击该按钮可删除文件中的单个或所有断点。

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

Chrome 新的断点如何帮助你更快地进行调试

选中断点旁边的复选框以启用或禁用它。

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

# 利用这些不太常见的断点功能:条件断点和日志点

关键术语

如果您想了解常规断点、条件断点和日志点之间的区别,请转到我们的断点类型文档,该文档解释了您可以使用这些不同的断点类型来调试代码的方式。

TLDR:条件断点仅在您指定的条件为真时停止执行。另一方面,日志点是使用console.log在Chrome开发者工具中的对应项。

# 通过编辑断点来编辑断点条件或更改日志点日志

Chrome 新的断点如何帮助你更快地进行调试

通过将鼠标悬停在断点上并单击出现的“编辑”按钮来编辑断点条件或日志。这将打开一个对话框,以更改断点类型和断点的详细信息。

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

您还可以通过将鼠标悬停在侧边栏中的断点上来快速检查您的条件或日志点日志:

Chrome 新的断点如何帮助你更快地进行调试

# 结论

我们重新设计断点侧边栏的目标是使使用断点调试更加容易。最重要的是,我们旨在使事情更有结构、更易于访问和理解。我们希望这些改进能帮助您在下一次调试会话中!

如果您对进一步的改进有建议,请通过提交错误让我们知道!