您可以使用推測規則預先擷取及預先轉譯下一頁的瀏覽動作，詳情請參閱上一篇文章。這樣一來，網頁載入速度就能大幅提升，甚至可達到即時載入的程度，大幅改善這些額外網頁導覽的網站體驗核心指標。
推測規則的偵錯作業可能相當棘手。這項問題尤其會發生在預先算繪的網頁，因為這類網頁會在個別轉譯器中算繪，類似於隱藏的背景分頁，在啟用時會取代目前分頁。因此，您無法隨時使用一般開發人員工具選項來偵錯問題。
Chrome 團隊一直在努力改善開發人員工具對推測規則偵錯的支援。本文將說明使用這些工具的各種方式，協助您瞭解網頁的推測規則、推測規則可能無法運作的原因，以及開發人員何時可以使用更熟悉的 DevTools 選項，以及何時不應使用。
「預先」條款的說明
許多「預先」術語都很容易混淆，因此我們先來解釋這些術語：
- 預先擷取：預先擷取資源或文件，以便改善日後的效能。本文將說明如何使用 Speculation Rules API 預先載入文件，而非較舊的
<link rel="prefetch">選項，後者通常用於預先載入子資源。 - 預先轉譯：這是預先擷取的做法，而當使用者實際瀏覽過整個網頁時，還會實際轉譯整個網頁，只是在使用者實際瀏覽網頁時，讓隱藏的背景轉譯器程序保持運作。請注意，本文件所討論的是較新的 Speculation Rules API 版本，而非舊版
<link rel="prerender">選項 (不再執行完整的預先算繪)。 - 導覽式推測：由推測規則觸發的新預先擷取和預先算繪選項的統稱。
- 預先載入：可參照許多技術和程序的超載字詞，包括
<link rel="preload">、預先載入掃描器，以及服務工作站導覽預先載入項目。我們不會在此處討論這些項目，但會列出這項詞彙，以便與「導覽推測」一詞做出明確區隔。
「prefetch」的推測規則
你可以使用推測規則預先擷取下一次導覽的文件。舉例來說，將下列 JSON 插入頁面時，系統會預先擷取 next.html 和 next2.html：
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
與舊版 <link rel="prefetch"> 語法相比，使用瀏覽預先擷取的推測規則有幾項優點，例如更明確的 API，並將結果儲存在記憶體快取 (而非 HTTP 磁碟快取) 中。
對 prefetch 推測規則進行偵錯
推測規則觸發的預先擷取作業能夠與其他擷取項目相同，在「網路」面板中查看：
以紅色標示的兩個要求是預先擷取的資源，如「Type」欄所示。這些資源會以 Lowest 優先順序擷取，因為它們是用於日後的導覽，而 Chrome 會優先處理目前網頁的資源。
點選任一資料列也會顯示 Sec-Purpose: prefetch HTTP 標頭，這可讓伺服器端識別這些要求：
使用推測載入分頁偵錯 prefetch
Chrome 開發人員工具的「Application」面板已在「Background services」部分下方新增「Speculative loads」部分，方便您偵錯推測規則：
這個部分提供三個分頁：
- 推測載入：列出目前網頁的預先算繪狀態。
- 規則：列出目前頁面中找到的所有規則集。
- 推測：列出規則集合中的所有預先擷取和預先轉譯的網址。
上一個螢幕截圖顯示「推測」分頁，可看到這個範例網頁含有一組預先擷取 3 個網頁的推測規則。其中兩個預先載入作業成功，另一個失敗。您可以按一下「規則集合」旁的圖示，前往「元素」面板中規則集合的來源。或者，您也可以點選「狀態」連結，前往篩選出該規則集的「推測」分頁。
「推測」分頁會列出所有目標網址、動作 (預先擷取或預先轉譯)、來源網址的來源規則集 (因為網頁上可能有多個規則)，以及每個推測的狀態：
在網址上方，您可以使用下拉式選單，顯示所有規則集合的網址，或只顯示特定規則集合的網址。底下則列出所有網址。按一下網址即可查看詳細資訊。
在這個螢幕截圖中，我們可以看到 next3.html 頁面失敗的原因 (該頁面不存在，因此會傳回 404，這是非 2xx HTTP 狀態碼)。
摘要分頁「推測載入」會顯示「這個網頁的推測載入狀態」報告，指出該網頁使用預先擷取或預先算繪。
如果是預先擷取的網頁，你應該會在該網頁上看到下列成功訊息：
不相符的推測
如果網頁含有推測規則，但使用者從該網頁導覽至其他網頁時並未使用預先擷取或預先算繪功能，分頁中就會顯示額外區段，說明網址為何不符合任何推測網址。這有助於您找出推測規則中的錯字。
舉例來說，我們在這裡導覽至 next4.html，但只有 next.html、next2.html 或 next3.html 是預先擷取，因此我們可以看到這項規則與這三項規則都不相符。
「Speculative loads」分頁非常適合用於偵錯推測規則本身，以及找出 JSON 中的任何語法錯誤。
至於預先載入作業本身，您可能會比較熟悉「Network」面板。如需預先載入失敗的範例，請參閱預先載入的 404 錯誤：
不過，推測載入分頁對於預先算繪推測規則更有幫助，我們會在下文中說明。
prerender 的推測規則
預先算繪的推測規則使用的語法與預先擷取推測規則相同。例如：
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
這個規則集會觸發指定網頁的完整載入和轉譯作業 (但須遵守特定限制)。這麼做雖然會增加資源成本，但可提供即時載入體驗。
不過，與預先擷取不同，這些項目不會顯示在「Network」面板中，因為這些項目是在 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
與預先載入不同，已預先算繪的網頁不會顯示在「網路」面板等「開發人員工具」面板中的目前算繪程序中，因為這些網頁會在其專屬的幕後算繪器中算繪。
不過，現在可以透過右上角的下拉式選單，或在面板頂端選取網址並選取「檢查」，切換開發人員工具面板使用的轉譯器：
所有其他面板 (例如「網路」面板) 也會共用這個下拉式選單 (和選取的值)，當中會顯示要求的頁面是預先算繪的頁面：
查看這些資源的 HTTP 標頭，我們可以看到這些標頭都會使用 Sec-Purpose: prefetch;prerender 標頭設定：
或者「元素」面板可顯示網頁內容，如以下螢幕截圖所示，<h1> 元素適用於預先算繪頁面：
或者，您也可以透過控制台面板查看預先算繪網頁所產生的控制台記錄：
在預先算繪頁面偵錯的推測規則偵錯
前幾節討論了如何在啟動預先算繪的頁面上偵錯預先算繪頁面。不過，預先算繪的網頁本身也可以提供偵錯資訊，方法是發出 Analytics 呼叫或記錄至控制台 (如前一個部分所述，可在控制台中查看)。
此外，使用者瀏覽預先算繪的頁面後，「推測載入」分頁就會顯示這個狀態，以及預先算繪是否成功。如果無法預先算繪，系統會說明為何無法預先算繪：
此外，如同預先擷取內容，如果您從網頁導覽至推測規則不符合目前網頁的情況，系統會嘗試在「推測載入」分頁中顯示為何網址不符合上一個網頁推測規則中的網址：
結論
在這篇文章中，我們介紹了開發人員可透過多種方式對預先擷取和預先轉譯推測規則進行偵錯。我們團隊會持續開發推測規則工具，也歡迎開發人員提供其他有助於偵錯這個令人期待的新 API 的建議。如果發現任何功能要求或錯誤，我們建議開發人員透過 Chrome Issue Tracker 回報問題。
特別銘謝
Thumbail 圖片是由 Nubelson Fernandes 在 Unsplash 提供。