在本機覆寫網頁內容和 HTTP 回應標頭

Sofia Emelianova

只要使用本機覆寫功能，您就可以藉由原型設計、測試變更和修正作業來解除封鎖工作流程，而不必等待後端、第三方或 API 提供支援。

即使您無法存取遠端資源，也可以使用本機覆寫值模擬遠端資源。您可以模擬要求和各種檔案的回應，例如 HTTP 回應標頭和網頁內容，包括 XHR 和擷取要求。

舉例來說，在下列情況下，本機覆寫值就很實用：

• 在實際發布前模擬 API 並測試 API 修正項目。
• 如果您已知後端將使用的資料結構，請建立新 UI 設計的原型。
• 測試成效修正項目，例如消除 CLS，以便事先確認修正項目是否有效。

注意： 請觀看上方影片，進一步瞭解應用情境。

本機覆寫值還可讓您在網頁載入期間保留在開發人員工具中所做的變更。

運作方式

• 在 DevTools 中進行變更時，DevTools 會將修改過的檔案副本儲存到您指定的資料夾。
• 重新載入網頁時，開發人員工具會提供已修改的本機檔案，而非網路資源。

注意： 本機覆寫值會自動停用快取。

您也可以將變更直接儲存至原始檔案。請參閱「使用工作區編輯及儲存檔案」。

限制

本機覆寫功能可用於網路回應標頭和大多數檔案類型，包括 XHR 和擷取要求，但有幾個例外情況：

• 啟用本機覆寫時，系統會停用快取。
• 開發人員工具不會儲存在「Elements」(元素) 面板中透過 DOM 樹狀結構所做的變更。
• 如果您在「Styles」窗格中編輯 CSS，且該 CSS 的來源是 HTML 檔案，則 DevTools 不會儲存變更。

您可以改為在「來源」面板中編輯 HTML 檔案。

設定本機覆寫

您可以立即在「Network」面板中覆寫網站內容或回應標頭：

1. 開啟開發人員工具，前往「Network」面板，在要覆寫的要求上按一下滑鼠右鍵，然後從下拉式選單中選擇「Override headers」或「Override content」。
2. 如果您尚未設定本機覆寫值，開發人員工具會在頂端的操作列中提示您：
   1. 選取要儲存覆寫檔案的資料夾。
   2. 按一下「Allow」，將權限授予開發人員工具。
3. 如果您已設定本機覆寫值但已停用，開發人員工具會自動啟用這些值。

4. 設定及啟用本機覆寫值後，視要覆寫的項目而定，開發人員工具會將您帶往以下位置：

   • 「來源」面板，可讓您變更網路內容。
   • 您可以透過「網路」>「標頭」>「回應標頭」的編輯器，變更回應標頭。

如要暫時停用本機覆寫值或刪除所有覆寫檔案，請依序前往「來源」 >「覆寫值」，然後分別取消勾選 「啟用本機覆寫值」核取方塊或按一下 「清除」。

如要刪除單一覆寫檔案或資料夾中的所有覆寫值，請在「來源」 >「覆寫值」中，按一下檔案或資料夾的滑鼠右鍵，選取「刪除」，然後在對話方塊中按一下「確定」。這項操作無法復原，您必須手動重新建立已刪除的覆寫值。

如要快速查看所有覆寫值，請在「Network」面板中按一下要求，然後選取「Show all overrides」。開發人員工具會依序前往「來源」>「覆寫」。

覆寫網路內容

如要覆寫網頁內容，請按照下列步驟操作：

1. 設定本機覆寫值。
2. 變更檔案並儲存在開發人員工具中。

注意：您無法覆寫來源對應檔案。如果在「Network」面板中按一下要求，然後選取「Override content」，開發人員工具就會顯示對話方塊，讓您前往原始來源檔案。

舉例來說，您可以編輯「來源」中的檔案，或是「元素」 >「樣式」中的 CSS，除非 CSS 位於 HTML 檔案中。

開發人員工具會儲存已修改的檔案，並在「Sources」 >「Overrides」中列出這些檔案，並在相關面板和窗格中顯示已覆寫檔案旁的 圖示：「Elements」>「Styles」、「Network」和「Sources」 >「Overrides」。

此外，如果要求含有覆寫的網頁內容，Network 面板會在「Response」分頁旁顯示紫色點點圖示，並顯示相關提示。

覆寫 XHR 或擷取要求，以模擬遠端資源

使用本機覆寫值時，您不需要存取後端，也不必等待後端支援您的變更。即時模擬及實驗：

1. 設定本機覆寫值。
2. 在「Network」中，篩選 XHR/fetch 要求，找出所需要求，按一下滑鼠右鍵，然後選取「Override content」。
3. 變更擷取的資料並儲存檔案。
4. 重新整理頁面，並觀察變更是否已套用。

如要瞭解這個工作流程，請觀看以下影片：

追蹤本機變更

您可以集中一處追蹤所有網路內容變更，也就是「變更」導覽匣分頁。

此外，您也可以在「來源」>「覆寫」中，在已儲存的檔案上按一下滑鼠右鍵，然後從內容選單中選取「在包含資料夾中開啟」。系統會開啟您在覆寫設定期間選取的資料夾。您可以使用喜愛的程式碼編輯器修改檔案。

覆寫 HTTP 回應標頭

您可以在「Network」面板中覆寫 HTTP 回應標頭，而無須存取網路伺服器。

您可以使用回應標頭覆寫值，在本機為各種標頭製作修正程式原型，包括但不限於：

• 跨來源資源共享 (CORS) 標頭
• Permissions-Policy 標頭
• 跨來源隔離標頭

如要覆寫回應標頭，請按照下列步驟操作：

1. 設定本機覆寫值，並檢查這類示範頁面。
2. 前往「網路」，在要求上按一下滑鼠右鍵，然後選取「覆寫標頭」。開發人員工具會前往「Headers」>「Response Headers」編輯器。

3. 將滑鼠游標懸停在回應標頭值上，並將游標放在該處。

   

   或者，如要啟用「回應標頭」編輯器，將滑鼠遊標懸停在回應標頭值上，然後按一下「編輯」。

4. 修改或新增標頭。

   注意：這個範例會新增 Access-Control-Allow-Origin: * 標頭，以排除 CORS 錯誤。

   

   • 如要編輯標頭值，請按一下該標頭。
   • 如要新增標頭，請按一下 「Add header」(新增標頭)。
   • 如要移除標頭覆寫值，請按一下標頭旁的 。這麼做會移除您新增的標頭，或將已修改的值還原為原始值。

   「網路」面板會以綠色醒目顯示修改過的標頭，並移除以紅色和叉號移除的覆寫值。此外，「Headers」分頁會顯示紫色圓點圖示，並顯示工具提示，說明標頭已遭到覆寫。

5. 重新整理頁面即可套用變更。

編輯所有回應標頭覆寫值

如要集中編輯所有標頭覆寫值，請按照下列步驟操作：

1. 按一下「Response Headers」部分旁的 .headers。

   

   開發人員工具會將您導向「Sources」 >「Overrides」中的對應 .headers 檔案。

2. 編輯 .headers 檔案：

   

   • 如要新增覆寫規則，請按一下「新增覆寫規則」。規則是一組標頭和值，以及要套用的單一或多個要求。

     注意：您可以使用萬用字元，一次指定多個要求。使用 * 指定多個字元，使用 ? 指定單個字元。

   • 如要為規則新增標頭和值組合，請將滑鼠游標移至其他組合上，然後按一下 。

   • 如要還原標頭值，請移除已新增的標頭或規則，將滑鼠游標懸停在標頭或規則上，然後按一下 。

3. 使用 Command / Control + S 鍵儲存 .headers 檔案。

4. 重新整理頁面即可套用變更。