Web 检查器参考URL 断点

URL 断点在调试由 JavaScript API(例如 XMLHttpRequestfetch)发起的网络请求时非常有用。

通过单击 [创建断点] 按钮,在导航侧边栏断点部分的右上角选择URL 断点…即可添加URL 断点,位于源代码标签页中。

所有URL 断点在 Web 检查器会话之间都会被保留。

URL 断点有两种不同类型:包含匹配

包含

启用后,包含类型的URL 断点会在 JavaScript API 发送任何 URL 包含给定文本的网络请求之前暂停 JavaScript 执行

匹配

启用后,匹配类型的URL 断点会在 JavaScript API 发送任何 URL 匹配给定正则表达式的网络请求之前暂停 JavaScript 执行

特殊断点

除了包含匹配类型的URL 断点之外,还有一个特殊的URL 断点所有请求

启用后,所有请求URL 断点无论请求的 URL 是什么,只要 JavaScript API 发送任何网络请求,都会暂停 JavaScript 执行

通过单击 [创建断点] 按钮,在导航侧边栏断点部分的右上角选择所有请求即可添加/启用所有请求URL 断点,位于源代码标签页中。

配置

URL 断点有几种不同的配置选项,通过右键单击并在上下文菜单中选择编辑断点…即可访问。

条件输入允许您仅在给定 JavaScript 评估为真值时才限制URL 断点暂停 JavaScript 执行。这对于您只想在满足特定条件(例如变量具有特定值)时才暂停 JavaScript 执行的情况非常有用。请记住,当URL 断点被命中时,包含的 JavaScript 会被评估,并且根据您作为条件运行的代码,可能会导致额外的副作用。

然而,除了执行任意代码,您可能只是想忽略URL 断点前几次被命中的情况。如果是这种情况,将忽略输入设置为任何正整数将阻止URL 断点暂停执行,直到它被命中那么多次数。

现在您可能想知道什么是“操作”。共有四种不同类型

  • 记录消息

    这基本上是使用 console.log 记录值的“快捷方式”。您提供的字符串行为类似于模板字面量,这意味着只要它在 ${…} 内部,您就可以评估任意 JavaScript。

  • 评估 JavaScript

    可以说是最强大的URL 断点操作,它允许您在URL 断点被命中时评估任何任意 JavaScript。给定的 JavaScript 会在代码行之前执行,这意味着它将可以访问相关行之前在该作用域中可用的所有变量。

  • 播放声音

    添加其中之一将使 Web 检查器在URL 断点被命中时播放系统蜂鸣声

  • 探测表达式

    探测表达式可以被认为是迷你“控制台”。每当相关的URL 断点被命中时,探测表达式都会被评估,结果会保存在详细信息侧边栏探测面板中,位于源代码标签页,允许您查看表达式的结果在程序生命周期中如何变化。您可以使用它来观察特定变量(例如 this)的变化,或整个表达式(例如 this.foo === "bar")的变化。

如果设置了任何操作,您还可以将URL 断点配置为评估后自动继续。这将使URL 断点实际上“不可见”,因为它永远不会暂停执行。“评估后自动继续”的URL 断点在图标中会有一个小的白色三角形(“空心”):

状态

URL 断点可以启用或禁用。理想情况下,URL 断点应始终处于启用状态,但有几个原因会导致它们被禁用

  • URL 断点被手动禁用。单击(或右键单击并在上下文菜单中选择启用断点禁用断点导航侧边栏中任何断点图标,即可在启用和禁用之间切换,位于源代码标签页中。
  • 断点已被全局禁用。全局断点控件是一个按钮,它看起来就像一个断点,位于导航侧边栏顶部,在源代码标签页中。

右键单击任何URL 断点时,所有启用/禁用/删除切换选项都可在上下文菜单中找到。

图标图例

  • 已启用(全局断点已启用)
  • 已启用(全局断点已启用)并自动继续
  • 已禁用(全局断点已启用)
  • 已禁用(全局断点已启用)并自动继续
  • 已启用(全局断点已禁用)
  • 已启用(全局断点已禁用)并自动继续
  • 已禁用(全局断点已禁用)
  • 已禁用(全局断点已禁用)并自动继续

更新于 Safari 技术预览版 120。试用它,获取最新的 Web 检查器功能,包括上述所有功能以及更多。


作者:Devin Rousso,发布于 2020 年 1 月 14 日

最后更新于 2021 年 3 月 10 日,作者:Devin Rousso