您可以使用推測規則預先擷取及預先轉譯下一頁的瀏覽動作，詳情請參閱上一篇文章。這可以加快網頁載入速度，或甚至即時載入網頁，大幅改善網站體驗核心指標，以便為使用者另外瀏覽網頁。
對推測規則進行偵錯並不容易。對預先算繪的網頁來說尤其如此，因為這類頁面會透過獨立的轉譯器轉譯，這種隱藏的背景分頁會在啟用時取代目前的分頁。因此，一般的開發人員工具選項不一定能用來偵錯。
Chrome 團隊一直在努力改善開發人員工具對推測規則偵錯的支援。本文將介紹這些工具的各種使用方法，說明頁面的推測規則、規則無法運作的原因，以及開發人員何時可以使用較熟悉的開發人員工具選項，以及何時無法使用這些工具。
「之前」的說明條款
由於每個 Pod 的我們會先解釋下列內容：
- 預先擷取：預先擷取資源或文件，以提高日後的效能。本文將介紹使用 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 推測規則進行偵錯
推測規則觸發的預先擷取作業能夠與其他擷取項目相同，在「網路」面板中查看：
以紅色醒目顯示的兩個要求是預先擷取的資源，可在「類型」欄中查看。這些擷取資源的優先順序是Lowest，因為這是供日後瀏覽使用，且 Chrome 會優先使用目前網頁的資源。
按一下其中一列也會顯示 Sec-Purpose: prefetch HTTP 標頭，這是伺服器端可識別這些要求的方式：
使用「推測載入」分頁對 prefetch 進行偵錯
在 Chrome 開發人員工具的「應用程式」面板中，於「背景服務」部分下方新增了「推測載入」部分，有助於協助對推測規則進行偵錯：
這個部分包含三個分頁：
- 「推測載入項目」：列出目前頁面的預先算繪狀態。
- 規則會列出目前網頁上找到的所有規則組合。
- 推測：列出規則集中所有預先擷取和預先算繪的網址。
上一個螢幕截圖顯示「推測」分頁，可看到這個範例網頁含有一組預先擷取 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 進行偵錯
和預先擷取不同，預先算繪的網頁不會顯示在開發人員工具 (例如「網路」面板) 目前的轉譯程序中，因為這類頁面會在專屬的幕後轉譯器中轉譯。
不過，你現在可以使用右上方的下拉式選單，切換開發人員工具面板使用的轉譯器，也可以選取面板頂端的網址並選取「Inspect」：
所有其他面板 (例如「網路」面板) 也會共用這個下拉式選單 (和選取的值)，當中會顯示要求的頁面是預先算繪的頁面：
查看這些資源的 HTTP 標頭，即可看到所有資源都設為 Sec-Purpose: prefetch;prerender 標頭：
或者「元素」面板可顯示網頁內容，如以下螢幕截圖所示，<h1> 元素適用於預先算繪頁面：
或者「控制台」面板，您可以在其中查看預先算繪頁面產生的主控台記錄：
在預先算繪頁面偵錯的推測規則偵錯
前幾節討論如何在啟動預先算繪的網頁上對預先算繪頁面進行偵錯。不過，預先算繪頁面也可以自行提供偵錯資訊，方法是進行 Analytics 呼叫或記錄控制台 (詳情請見上一節)。
此外，使用者瀏覽預先算繪的頁面後，「推測載入」分頁就會顯示這個狀態，以及預先算繪是否成功。如果無法預先算繪說明，並說明原因：
此外，與預先擷取的情況相同：如果網頁的推測規則與目前網頁不符，系統會在「推測載入項目」分頁中，顯示不符合上述頁面推測規則所涵蓋網址的原因：
結論
在這篇文章中，我們介紹了開發人員可透過多種方式對預先擷取和預先轉譯推測規則進行偵錯。該團隊將持續開發一套推測規則的工具，我們也歡迎開發人員提供意見，說明這個令人期待的全新 API 偵錯還有哪些幫助。如果發現任何功能要求或錯誤，我們建議開發人員透過 Chrome Issue Tracker 回報問題。
特別銘謝
Thumbail 圖片是由 Nubelson Fernandes 在 Unsplash 提供。