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