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

Sofia Emelianova

透過本機覆寫值，即使您沒有遠端資源的存取權，仍可覆寫 HTTP 回應標頭和網路內容 (包括 XHR 和擷取要求) 來模擬遠端資源。這樣一來，您不必等待後端支援變更原型，本機覆寫值也能讓您在網頁載入時，保留您在開發人員工具中所做的變更。

具體情況如下：

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

限制

本機覆寫功能適用於網路回應標頭和大多數檔案類型，包括 XHR 和擷取要求，但以下幾點除外：

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

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

設定本機覆寫

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

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

4. 本機覆寫設定完成並啟用後，開發人員工具就會根據您要覆寫的內容，要求您進行以下操作：

   • 「來源」面板可讓您變更網頁內容。
   • 依序前往「網路」 >「標頭」 >「回應標頭」，可讓您變更回應標頭。

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

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

如要快速查看所有覆寫設定，請在「網路」面板中在請求上按一下滑鼠右鍵，然後選取「顯示所有覆寫值」。開發人員工具會將您導向「來源」 >「覆寫」。

覆寫網路內容

如何覆寫網路內容：

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

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

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

此外，「網路」面板會在包含覆寫網路內容的要求中的「Response」分頁旁邊顯示紫色圓點圖示，以及工具提示。

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

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

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

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

追蹤本機變更

「變更」導覽匣分頁可讓您集中追蹤您對網頁內容所做的所有變更。

覆寫 HTTP 回應標頭

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

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

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

如何覆寫回應標頭：

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

3. 將滑鼠遊標懸停在回應標頭值上，然後將遊標放在其中。

   

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

4. 修改或新增頁首。

   

   • 如要編輯標頭值，請按一下該值。
   • 如要新增頁首，請按一下「新增頁首」圖示 add。
   • 如要移除標頭覆寫設定，請按一下旁邊的 delete。這樣會移除您新增的標頭，或是將修改過的值還原為原始值。

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

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

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

如何在同一處編輯所有標頭覆寫設定：

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

   

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

2. 編輯 .headers 檔案：

   

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

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

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

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

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