此页面由 Cloud Translation API 翻译。

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

Barry Pollard

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

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

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

对“pre-”的说明条款

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

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

。

`prefetch`的推测规则

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

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

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

调试 `prefetch` 项推测规则

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

Chrome 开发者工具中的 Network 面板，其中显示了预提取的文档 — Chrome 开发者工具中的“Network”面板显示预提取的文档

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

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

Chrome 开发者工具预提取标头，其中 Sec-Purpose 已设置为预提取 — 将“Sec-Purpose”（安全目的）设置为“prefetch”的 Chrome 开发者工具预提取标头

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

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

Chrome 开发者工具显示预提取规则的推测加载标签页 — Chrome 开发者工具显示预提取规则的“推测加载”标签页

要点：“推测加载”标签页适用于推测规则预提取和预呈现（统称为“导航推测”）。这些标签页不能用于调试使用 <link rel="preload"> 的子资源预加载、使用 <link rel="prefetch"> 的子资源预提取，以及旧版 <link rel="prerender"> 无状态预提取。

此部分有三个标签：

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

。

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

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

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

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

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

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

Chrome 开发者工具中的“推测加载”标签页显示成功预提取 — 显示成功预提取的 Chrome 开发者工具“推测加载”标签页

无与伦比的推测

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

Chrome 开发者工具“推测加载”标签页，显示了当前网址与上一页推测规则中的任何网址均不匹配的情况 — 不匹配的网址会在开发者工具中突出显示

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

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

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

显示失败的预提取的 Chrome DevTools Network 面板 — 显示预提取失败的 Chrome 开发者工具 Network 面板

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

`prerender`的推测规则

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

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

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

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

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

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

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，这意味着当链接被悬停或点击时，系统会预渲染导航。

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