使用 Chrome 开发者工具调试推测规则

推测规则可用于预提取和预渲染下一页导航,如上一篇博文中详述。这有助于更快速地(甚至即时)加载网页,从而极大地改进核心网页指标,实现这些额外的网页导航。

调试推测规则可能会比较棘手。对于预渲染的网页来说尤其如此,因为这些网页是在单独的渲染程序中渲染的,有点像隐藏的背景标签页,它会在启用后替换当前标签页。因此,常规的开发者工具选项并不总能用于调试问题。

Chrome 团队一直致力于增强开发者工具对推测规则调试的支持。在这篇博文中,您将了解使用这些工具的各种方法,以了解页面的推测规则、这些规则可能不起作用的原因、开发者何时可以使用更熟悉的开发者工具选项,以及何时无法使用这些选项。

对“pre-”的说明条款

有很多“前”内容我们先来解释一下:

  • 预取:提前提取资源或文档以提高日后的性能。本博文介绍了如何使用 Speculation Rules API 来预提取文档,而不是使用通常用于预提取子资源的类似但较旧的 <link rel="prefetch"> 选项。
  • 预渲染:这比预提取更进一步,实际上会像用户导航到该网页一样渲染整个网页,但它会将该网页保留在隐藏的后台渲染程序进程中,以便在用户实际导航到该网页时使用。同样,本文档涉及的是较新的 Speculation Rules API 版本,而不是旧版 <link rel="prerender"> 选项(不再执行完整预渲染)。
  • 导航推测:由推测规则触发的新预提取和预渲染选项的总称。
  • 预加载:一个重载术语,可指代许多技术和流程,包括 <link rel="preload">预加载扫描器Service Worker 导航预加载。这些内容不一而足,但加入这个术语是为了明确将其与“导航猜测”区分开来条款。

prefetch的推测规则

推测规则可用于预取下一个导航的文档。例如,在将以下 JSON 插入页面时,系统会预提取 next.htmlnext2.html

<script type="speculationrules">
  {
    "prefetch": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"]
      }
    ]
  }
</script>

与旧版 <link rel="prefetch"> 语法相比,使用推测规则进行导航预提取具有一些优势,例如更具表现力的 API 以及结果存储在内存缓存(而非 HTTP 磁盘缓存)中。

调试 prefetch 项推测规则

网络面板中,您可以查看由推测规则触发的预提取,具体方式与其他提取相同:

<ph type="x-smartling-placeholder">
</ph> Chrome 开发者工具中的 Network 面板,其中显示了预提取的文档
Chrome 开发者工具中的“Network”面板显示预提取的文档

以红色突出显示的两个请求是预提取的资源,如类型列所示。系统会以 Lowest 优先级抓取这些资源,因为它们会用于未来导航,而且 Chrome 会优先抓取当前网页的资源。

点击其中某一行还会显示 Sec-Purpose: prefetch HTTP 标头,该标头用于在服务器端识别这些请求:

<ph type="x-smartling-placeholder">
</ph> Chrome 开发者工具预提取标头,其中 Sec-Purpose 已设置为预提取
将“Sec-Purpose”(安全目的)设置为“prefetch”的 Chrome 开发者工具预提取标头

使用“推测加载”标签页调试 prefetch

在 Chrome 开发者工具的 Application 面板的后台服务部分下新增了推测加载部分,以帮助调试推测规则:

<ph type="x-smartling-placeholder">
</ph> Chrome 开发者工具显示预提取规则的推测加载标签页
Chrome 开发者工具显示预提取规则的“推测加载”标签页

此部分有三个标签:

  • 推测加载,其中会列出当前网页的预渲染状态。
  • 规则:列出了当前页面上的所有规则集。
  • 推测,其中会列出规则集中所有预提取和预呈现的网址。

上一个屏幕截图中显示的是推测标签页,我们可以看到,这个示例页面中有一组推测规则,用于预提取 3 个网页。其中 2 次预提取成功,1 次预提取失败。您可以点击规则集旁边的图标,前往元素面板中的规则集的来源。或者,您也可以点击状态链接,转到过滤出相应规则集的推测标签页。

推测标签页会列出所有目标网址、操作(预提取或预渲染)、这些网址来自哪个规则集(因为一个网页上可能有多个规则集)以及每个推测的状态:

<ph type="x-smartling-placeholder">
</ph> 显示预提取网址及其状态的 Chrome 开发者工具“推测”标签页
显示预提取网址及其状态的 Chrome 开发者工具“推测”标签页

在网址上方,可以使用下拉菜单显示来自所有规则集的网址,也可以仅显示来自特定规则集的网址。其下方会列出所有网址。点击网址可以查看更多详细信息。

在此屏幕截图中,我们可以看到 next3.html 页面的失败原因(由于该页面不存在,因此会返回 404,即一个非 2xx HTTP 状态代码)。

摘要标签页推测加载会显示此网页的推测加载状态报告,说明此网页是否使用了预提取或预渲染。

对于预提取的网页,在该网页被导航到时,您应该会看到一条成功消息:

<ph type="x-smartling-placeholder">
</ph> Chrome 开发者工具中的“推测加载”标签页显示成功预提取
显示成功预提取的 Chrome 开发者工具“推测加载”标签页

无与伦比的推测

如果在某个网页上进行导航,且该网页采用了不会导致系统使用预提取或预渲染的推测规则,该标签页的另一个部分会显示与任何推测网址均不匹配原因的更多详细信息。这有助于发现推测规则中的拼写错误。

<ph type="x-smartling-placeholder">
</ph> Chrome 开发者工具“推测加载”标签页,显示了当前网址与上一页推测规则中的任何网址均不匹配的情况
不匹配的网址会在开发者工具中突出显示

例如,在这里,我们导航到了 next4.html,但只有 next.htmlnext2.htmlnext3.html 是预提取的,因此可以看到这与这三条规则中的任何一条都并不完全匹配。

推测加载标签页对于调试推测规则本身以及查找 JSON 中的任何语法错误非常有用。

至于预提取本身,Network 面板可能是一个更熟悉的地方。对于预提取失败的示例,预提取的 404 错误如下:

<ph type="x-smartling-placeholder">
</ph> 显示失败的预提取的 Chrome DevTools Network 面板
显示预提取失败的 Chrome 开发者工具 Network 面板

不过,推测加载标签页在预渲染推测规则(详见下文)时将会更加实用。

prerender的推测规则

预渲染推测规则遵循与预提取推测规则相同的语法。例如:

<script type="speculationrules">
  {
    "prerender": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"]
      }
    ]
  }
</script>

此规则集会触发指定网页的完整加载和呈现(受特定限制的约束)。这可以提供即时加载体验,但会产生额外的资源成本。

不过,与预提取不同的是,这些信息不会显示在“网络”面板中,因为这些内容是在 Chrome 中单独的呈现进程中进行提取和呈现的。因此,推测加载标签页在调试预渲染推测规则方面更为重要。

使用“推测加载”标签页调试 prerender

同样的“推测加载”屏幕也可用于预渲染推测规则,正如一个类似的演示页面所示,该页面尝试预渲染(而不是预取这三个页面):

<ph type="x-smartling-placeholder">
</ph> Chrome 开发者工具“推测”会加载包含预渲染推测规则的页面标签页
Chrome 开发者工具推测性加载某个网页的标签页,其中包含预渲染推测规则

在这里,我们再次看到三个网址中有一个无法预渲染,开发者可以在 Speculations(推测)标签页中点击 2 Ready, 1 Failure(2 就绪,1 失败)链接获取各网址的详细信息。

Chrome 121 中,我们推出了文档规则支持。这样,浏览器就可以从网页上的同源链接获取这些内容,而不是列出一组特定的网址:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {"href_matches": "/*"},
          {"not": { "href_matches": "/not-safe-to-prerender/*"}}
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

此示例会选择所有相同的源链接,但以 /not-safe-to-prerender 开头的链接除外作为预渲染候选链接。

它还会将预渲染 eagerness 设置为 moderate,这意味着当链接被悬停或点击时,系统会预渲染导航。

推测性规则演示网站上也有类似的规则,在该网站上使用新的推测加载部分,即可了解这个新标签页的实用性,因为系统会列出浏览器在网页上找到的所有符合条件的网址:

<ph type="x-smartling-placeholder">
</ph> Chrome 开发者工具的“Speculations”标签页,包含许多未触发的网址
Chrome 开发者工具“推测”标签页,其中包含多个未触发的网址

Status(状态)为 Not trigger(未触发),因为这些事件的预渲染过程尚未开始。但是,当我们将指针悬停在链接上时,可以看到每个网址预渲染后状态会发生变化:

<ph type="x-smartling-placeholder">
</ph> 显示已触发的预渲染页面的 Chrome 开发者工具“推测”标签页
触发预渲染页面的 Chrome 开发者工具“推测”标签页

Chrome 对预渲染设置了限制,其中包括针对 moderate 紧急程度最多进行 2 次预渲染,因此,当将鼠标悬停在第 3 个链接上时,我们可以看到该网址的失败原因:

<ph type="x-smartling-placeholder">
</ph> 显示失败预加载的 Chrome 开发者工具“推测”标签页
显示失败预加载项的 Chrome 开发者工具“推测”标签页

使用其他开发者工具面板调试 prerender

与预提取不同,已预渲染的页面不会显示在开发者工具面板(例如 Network 面板)的当前渲染进程中,因为它们是在其自己的后台渲染器中渲染的。

不过,现在可通过右上角的下拉菜单来切换开发者工具面板使用的渲染程序,或者在面板顶部选择一个网址并选择 Inspect 来切换:

<ph type="x-smartling-placeholder">
</ph> 现在,您可以使用 Chrome 开发者工具切换显示信息的渲染程序
现在,您可以使用 Chrome 开发者工具切换显示信息的渲染程序

此下拉菜单(及所选值)也会在所有其他面板之间共享,例如 Network 面板,您可以在其中看到请求的网页是预渲染的网页:

<ph type="x-smartling-placeholder">
</ph> Chrome DevTools 的 Network 面板,其中显示了对预渲染页面的网络请求
显示对预渲染页面的网络请求的 Chrome 开发者工具 Network 面板

通过查看这些资源的 HTTP 标头,我们可以看到它们全部使用 Sec-Purpose: prefetch;prerender 标头进行设置:

<ph type="x-smartling-placeholder">
</ph> 显示预渲染页面的 Sec-Purpose 标头的 Chrome DevTools Network 面板
显示预渲染页面的 Sec-Purpose 标头的 Chrome 开发者工具 Network 面板

或者Elements面板,您可以在其中查看网页内容,如以下屏幕截图所示,<h1> 元素对应于预渲染的网页:

<ph type="x-smartling-placeholder">
</ph> 预渲染页面的 Chrome 开发者工具的“Elements”面板
Chrome 开发者工具中预渲染页面的“Elements”面板

或者“控制台”面板,您可以在其中查看预渲染的页面发出的控制台日志:

<ph type="x-smartling-placeholder">
</ph> 显示预渲染页面的控制台输出的 Chrome DevTools Console 面板
显示预渲染页面的控制台输出的 Chrome 开发者工具“控制台”面板

在预渲染页面上调试推测规则

前面的部分讨论了如何在启动预渲染的网页上对预渲染的网页进行调试。不过,预渲染的网页本身也有可能通过以下两种方式提供调试信息:调用 Google Analytics 或登录到控制台(如上一部分所述)。

此外,当用户前往预渲染的网页后,推测加载标签页会显示此状态,并说明该网页是否已成功预渲染。如果无法预渲染,请提供出现这种情况的原因:

<ph type="x-smartling-placeholder">
</ph> Chrome 开发者工具“推测加载”标签页,显示成功和失败的预渲染页面
Chrome 开发者工具“推测加载”标签页,同时显示预渲染成功和失败的页面

此外,与预提取一样,如果从具有与当前网页不匹配的推测规则的网页进行导航,系统将尝试在推测加载标签页内向您显示网址与前一网页的推测规则涵盖的网址不匹配的原因:

<ph type="x-smartling-placeholder">
</ph> Chrome 开发者工具“推测加载”标签页显示当前网址与上一页涵盖的网址不匹配的网址
Chrome 开发者工具显示网址不匹配问题

总结

在这篇博文中,我们展示了开发者可以调试预提取和预渲染推测规则的各种方法。该团队仍在继续努力开发推测规则工具,我们很想听听开发者的建议,了解还有哪些方法有助于调试这个令人兴奋的新 API。对于任何功能请求或发现的错误,我们建议开发者在 Chrome 问题跟踪器上提出问题。

致谢

Nubelson FernandesUnsplash 活动中的缩略图图片。