此页面由 Cloud Translation API 翻译。

调试推测规则

Barry Pollard

推测规则可用于预提取和预呈现下一页导航，详见上一篇博文。这可以大幅提升网页加载速度，甚至是即时加载网页，从而极大地提升这些额外的网页导航操作的核心网页指标。

调试推测规则可能会比较复杂。对于预渲染的网页尤其如此，因为这些网页在单独的渲染程序中渲染，有点像隐藏的背景标签页，会在激活后替换当前标签页。因此，可能无法始终使用常规的开发者工具选项来调试问题。

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

“使用前”字词的说明

许多“前”术语很容易混淆，因此我们先解释一下这些术语：

预提取：提前提取资源或文档，以提高未来性能。这篇博文介绍了如何使用 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"> 语法相比，使用推测规则进行导航预提取具有一些优势，例如具有更丰富的表现力，并且结果会存储在内存缓存（而不是 HTTP 磁盘缓存）中。

调试 `prefetch` 推测规则

在“网络”面板中查看由推测规则触发的预提取与其他提取一样的方式：

如 Type 列所示，以红色突出显示的两个请求是预提取的资源。系统会按照 Lowest 优先级提取这些网页，因为它们会用于日后的导航，而 Chrome 会优先抓取当前网页的资源。

点击其中一行还会显示 Sec-Purpose: prefetch HTTP 标头，即在服务器端识别这些请求的方式：

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

Chrome 开发者工具的 Application 面板中的 Background services 部分下添加了新的 推测加载部分，以帮助调试推测规则：

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

此部分提供了三个标签页：

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

推测标签页显示在上一个屏幕截图中，我们可以看到，此示例页面有一组用于预提取 3 个页面的推测规则。其中两个预提取成功，一个失败。您可以点击规则集旁边的图标，前往元素面板中的规则集的来源。或者，您也可以点击状态链接，将您带到按该规则集过滤的推测标签页。

推测标签页列出了所有目标网址，同时列出了相应操作（预提取或预呈现）、它们来自哪个规则集（因为一个网页上可能有多个规则集），以及每个推测的状态：

Chrome 开发者工具“Speculations”标签页，显示预提取的网址及其状态

在网址上方，您可以使用下拉菜单显示所有规则集中的网址，或仅显示特定规则集中的网址。下方列出了所有网址。点击网址即可查看更详细的信息。

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

“摘要”标签页推测加载会显示此网页的推测加载状态报告，以表明该网页是使用了预提取还是预渲染。

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

无与伦比的推测

如果从某个页面中导航时，推测规则不会使用预提取或预呈现，该标签页的另一部分会显示更多详细信息，说明相应网址与任何推测网址都不匹配的原因。这有助于发现推测规则中的拼写错误。

Chrome 开发者工具“推测加载”标签页，显示当前网址与上一页推测规则中的任何网址都不匹配

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

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

至于预提取本身，Network 面板可能是更为熟悉的地方。对于预提取失败的示例，您可以在此处查看预提取的 404 错误：

不过，推测加载标签页对于预渲染推测规则（我们将在下文中介绍）更加有用。

“`prerender`”的推测规则

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

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

此规则集会触发完全加载并呈现指定网页（具体取决于特定限制）。这样可以提供即时加载体验，但需要额外的资源成本。

不过，与预提取不同，这些内容无法在网络面板中查看，因为这些预提取是在 Chrome 中单独的渲染进程中进行提取并呈现的。这使得“推测加载”标签页在调试预渲染推测规则方面更为重要。

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

如演示页面所示，同一推测加载屏幕可用于预渲染推测规则，该演示页面尝试预渲染，而不是预提取这三个页面：

在这里，我们再次看到三个网址中有其中一个未能预渲染，开发者可以在 Speculations 标签页中点击 2 Ready, 1 Failure 链接来获取每个网址的详细信息。

在 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，这意味着当用户将鼠标悬停在链接上或点击链接时，系统会预渲染导航。

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