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