如上一篇博文中所详述，推测规则可用于预提取和预渲染下一页导航。这样可以让网页加载速度更快（甚至是即时加载），从而显著提升这些额外网页导航的核心 Web 指标。
调试推测规则可能很棘手。对于预渲染的网页，这一点尤为重要，因为这些网页是在单独的渲染程序中渲染的，有点像是会在激活时替换当前标签页的隐藏后台标签页。因此，常规的开发者工具选项并不总能用于调试问题。
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"> 语法相比，使用推测规则进行导航预提取具有一些优势，例如更具表现力的 API 以及结果存储在内存缓存（而非 HTTP 磁盘缓存）中。
调试 prefetch 推测规则
由推测规则触发的预提取操作与其他提取操作一样，都可以在 Network 面板中看到：
如“Type”（类型）列所示，以红色突出显示的两个请求是预提取的资源。这些资源的提取优先级为 Lowest，因为它们用于未来的导航，而 Chrome 会优先处理当前网页的资源。
点击其中某一行还会显示 Sec-Purpose: prefetch HTTP 标头，这是服务器端识别这些请求的方式：
使用“推测加载”标签页调试 prefetch
Chrome DevTools 的 Application 面板中新增了 Background services 部分下的 Speculative loads 部分，以帮助调试推测规则：
此部分包含三个标签页：
- 推测加载，列出了当前网页的预渲染状态。
- 规则：列出了当前页面上的所有规则集。
- 推测，其中会列出规则集中所有预提取和预呈现的网址。
上图显示了推测标签页，我们可以看到此示例网页只有一组用于预加载 3 个网页的推测规则。其中两次预提取成功，一次失败。点击规则集旁边的图标，即可前往元素面板中规则集的来源。或者，您也可以点击状态链接，前往过滤到该规则集的推测标签页。
推测标签页会列出所有目标网址、操作（预提取或预渲染）、这些网址来自哪个规则集（因为一个网页上可能有多个规则集）以及每种推测的状态：
在网址上方，您可以使用下拉菜单来显示所有规则集中的网址，也可以仅显示特定规则集中的网址。下方列出了所有网址。点击网址即可查看更多详细信息。
在此屏幕截图中，我们可以看到 next3.html 网页的失败原因（网页不存在，因此会返回 404，即一个非 2xx HTTP 状态代码）。
摘要标签页推测加载会显示此网页的推测加载状态报告，说明此网页是否使用了预提取或预渲染。
对于预提取的网页，当您导航到该网页时，应该会看到一条成功消息：
不匹配的推测
如果从包含推测规则的网页进行导航，但未使用预提取或预渲染，该标签页的其他部分会显示更多详细信息，说明网址为何与任何推测网址都不匹配。这有助于发现推测规则中的拼写错误。
例如，在这里，我们导航到了 next4.html，但只有 next.html、next2.html 或 next3.html 是预提取，因此我们可以看到，这与这三条规则都不完全匹配。
推测性加载标签页非常适合调试推测规则本身，以及查找 JSON 中的任何语法错误。
至于预提取本身，网络面板可能更为熟悉。如需查看预加载失败示例，您可以在此处查看预加载的 404 错误：
不过，推测加载标签页在预渲染推测规则（详见下文）时将会更加实用。
prerender的推测规则
预渲染推测规则遵循与预提取推测规则相同的语法。例如：
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
此规则集会触发指定网页的完整加载并呈现（受特定限制的约束）。这可以提供即时加载体验，但会产生额外的资源成本。
不过，与预提取不同，这些资源无法在网络面板中看到，因为它们是在 Chrome 的单独渲染进程中提取和渲染的。因此，推测加载标签页在调试预渲染推测规则方面更为重要。
使用“推测加载”标签页调试 prerender
相同的推测性加载界面可用于预渲染推测规则，如以下尝试预渲染（而非预提取）三个网页的类似演示页面所示：
在这里，我们再次看到，三个网址中有一个网址未能预渲染，开发者可以点击 2 Ready, 1 Failure 链接，在 Speculations（推测）标签页中获取每个网址的详细信息。
在 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，这意味着在用户悬停或点击链接时预渲染导航。
推测性规则演示网站上也有类似的规则，使用该网站上新的推测性加载部分可以了解此新标签页的实用性，因为其中列出了浏览器在网页上找到的所有符合条件的网址：
由于这些广告的预渲染流程尚未开始，因此状态为未触发。但是，当我们将指针悬停在链接上时，可以看到每个网址预渲染后状态会发生变化：
Chrome 对预渲染设置了限制，包括 moderate 急切性预渲染的数量上限为 2 次，因此在将鼠标悬停在第 3 个链接上后，我们会看到该网址的失败原因：
使用其他开发者工具面板调试 prerender
与预提取不同，预渲染的网页不会显示在 DevTools 面板（例如 Network 面板）中的当前渲染进程中，因为它们是在自己的后台渲染程序中渲染的。
不过，现在可以通过右上角的下拉菜单或通过在面板顶部选择网址并选择检查来切换 DevTools 面板使用的渲染程序：
此下拉菜单（以及所选值）也会在所有其他面板（例如 Network 面板）中共享，您可以在该面板中看到请求的网页是预渲染的网页：
查看这些资源的 HTTP 标头，我们可以看到它们都将使用 Sec-Purpose: prefetch;prerender 标头进行设置：
或者，您也可以使用 Elements 面板查看页面内容，如以下屏幕截图所示，我们可以看到 <h1> 元素适用于预渲染的页面：
或者，在“控制台”面板中，您可以查看预渲染页面发出的控制台日志：
在预渲染页面上调试推测规则
前面部分介绍了如何在发起预渲染的页面上调试预渲染的网页。不过，预渲染页面本身也可以通过发出分析调用或记录到控制台（如前一部分所述，可在控制台中查看）来提供调试信息。
此外，当用户导航到预渲染的网页并激活该网页后，推测性加载标签页将显示此状态以及该网页是否已成功预渲染。如果无法预渲染，系统会说明原因：
此外，与预提取一样，如果从具有与当前网页不匹配的推测规则的网页进行导航，系统将尝试在推测加载标签页内向您显示网址与前一网页的推测规则所涵盖的网址不符的原因：
总结
在本文中，我们介绍了开发者可以通过哪些方式调试预提取和预渲染推测规则。该团队正在继续开发推测规则工具，我们非常期待听取开发者关于如何调试这个令人兴奋的新 API 的其他方法的建议。我们鼓励开发者在 Chrome 问题跟踪器中提出任何功能请求或发现的 bug。
致谢
Nubelson Fernandes 在 Unsplash 活动中的缩略图图片。