如上一篇博文中所详述，推测规则可用于预提取和预渲染下一个网页导航。这样可以让网页加载速度更快（甚至是即时加载），从而显著提升这些额外网页导航的核心 Web 指标。
调试推测规则可能很棘手。对于预渲染的网页，这一点尤为重要，因为这些网页是在单独的渲染程序中渲染的，有点像是会在激活时替换当前标签页的隐藏后台标签页。因此，常规的 DevTools 选项并不总是可以用于调试问题。
Chrome 团队一直在努力增强开发者工具对推测规则调试的支持。在本文中，您将了解使用这些工具了解网页的推测规则、推测规则可能不起作用的原因，以及开发者何时可以使用更熟悉的 DevTools 选项，以及何时不适合使用这些选项的各种方法。
“预”字词的说明
有很多“预处理”术语令人困惑，因此我们先来解释一下这些术语：
- 预提取：提前提取资源或文档，以便日后提升性能。本文将介绍如何使用 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 个链接上后，我们会看到该网址的失败原因：
使用其他 DevTools 面板调试 prerender
与预提取不同，预渲染的网页不会显示在 DevTools 面板（例如 Network 面板）中的当前渲染进程中，因为它们是在自己的后台渲染程序中渲染的。
不过，现在可以通过右上角的下拉菜单或通过在面板顶部选择网址并选择检查来切换 DevTools 面板使用的渲染程序：
此下拉菜单（以及所选值）也会在所有其他面板（例如 Network 面板）中共享，您可以在该面板中看到请求的网页是预渲染的网页：
查看这些资源的 HTTP 标头，我们可以看到它们都将使用 Sec-Purpose: prefetch;prerender 标头进行设置：
或者，您也可以使用 Elements 面板查看页面内容，如以下屏幕截图所示，我们可以看到 <h1> 元素适用于预渲染的页面：
或者，在“控制台”面板中，您可以查看预渲染页面发出的控制台日志：
调试预渲染页面上的推测规则
前面部分介绍了如何在发起预渲染的页面上调试预渲染的网页。不过，预渲染页面本身也可以通过发出分析调用或记录到控制台（如前一部分所述，可在控制台中查看）来提供调试信息。
此外，当用户导航到预渲染的网页后，推测性加载标签页将显示此状态以及该网页是否已成功预渲染。如果无法预渲染，系统会说明原因：
此外，与预提取操作一样，如果您从推测规则与当前网页不匹配的网页进行导航，系统会尝试在推测加载标签页中向您显示网址与上一个网页的推测规则中涵盖的网址不匹配的原因：
总结
在本文中，我们介绍了开发者可以通过哪些方式调试预提取和预渲染推测规则。该团队正在继续开发推测规则工具，我们非常期待听取开发者关于如何调试这个令人兴奋的新 API 的其他方法的建议。我们鼓励开发者在 Chrome 问题跟踪器中提出任何功能请求或发现的 bug。
致谢
缩略图图片由 Unsplash 用户 Nubelson Fernandes 提供。