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

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

請使用本機覆寫功能模擬遠端資源，即使您無權存取這些資源。您可以模擬回應要求和各種檔案 (例如 HTTP 回應標頭和網路內容，包括 XHR 和擷取要求) 的回應。

舉例來說，本機覆寫功能適用於以下用途：

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

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

運作方式

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

你也可以將變更直接儲存至來源檔案。請參閱使用工作區編輯及儲存檔案。

限制

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

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

不過，您可以在「來源」面板中編輯 HTML 檔案。

設定本機覆寫值

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

1. 開啟開發人員工具，前往「網路」面板，在要覆寫的要求上按一下滑鼠右鍵，然後從下拉式選單中選擇「覆寫標頭」或「覆寫內容」。
2. 如果您尚未設定本機覆寫值，開發人員工具會在頂端的動作列中提示您：
   1. 選取要儲存覆寫檔案的資料夾。
   2. 按一下「允許」，授予 DevTools 存取權。
3. 如果您已設定本機覆寫功能但已停用，開發人員工具就會自動啟用。

4. 根據即將覆寫的項目設定及啟用本機覆寫值後，開發人員工具會引導您：

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

如要暫時停用本機覆寫設定或刪除所有覆寫檔案，請前往「來源」>[覆寫] 並取消勾選 check_box_outline_blank「啟用本機覆寫」核取方塊，或是分別點選 block「清除」。

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

如要快速查看所有覆寫值，請在「網路」面板中的要求上按一下滑鼠右鍵，然後選取「顯示所有覆寫值」。開發人員工具會帶您前往「Sources」>「Overrides」。

覆寫網頁內容

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

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

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

開發人員工具會儲存修改的檔案，並列在「來源」中 >覆寫，並在相關面板和窗格中覆寫的檔案旁邊顯示 圖示：Elements >「Styles」(樣式)、「Network」(網路) 和「Sources」(來源) >覆寫：

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

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

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

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

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

追蹤本機變更

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

此外，您也可以在「Sources」>「Overrides」中，在已儲存的檔案上按一下滑鼠右鍵，然後從內容選單中選取「Open in containing folder」。系統隨即會開啟您在覆寫設定時選取的資料夾。然後在其中使用慣用的程式碼編輯器修改檔案。

覆寫 HTTP 回應標頭

您可以在「Network」面板中，在不存取網路伺服器的情況下覆寫 HTTP 回應標頭。

透過回應標頭覆寫，您可以在本機針對各種標頭進行原型修正，包括但不限於：

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

如何覆寫回應標頭：

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

3. 將滑鼠遊標懸停在回應標頭值上，並將遊標移至該標頭值。

   

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

4. 修改或新增頁首。

   

   • 如要編輯標頭值，請點選該值。
   • 如要新增標頭，請按一下 add「Add header」(新增標頭)。
   • 如要移除標頭覆寫，請按一下旁邊的 delete。即可移除您新增的標頭，或是將修改過的值還原為原始值。

   「網路」面板會以綠色醒目顯示修改過的標頭，並移除紅色和劃掉的覆寫值。此外，「Headers」分頁會顯示紫色圓點圖示，並顯示工具提示，讓您知道標頭已覆寫。

5. refresh請重新整理頁面以套用變更。

編輯所有回應標頭覆寫設定

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

1. 按一下「回應標頭」部分旁邊的 「.headers」。

   

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

2. 編輯 .headers 檔案：

   

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

   • 如要在規則中加入標頭/值組合，請將滑鼠遊標懸停在其他組合上，然後按一下 add。

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

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

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