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

Sofia Emelianova
Sofia Emelianova
GitHub

有了本機覆寫功能，您就能在不等待後端、第三方或 API 支援的情況下，製作原型並測試變更和修正內容，解除工作流程的封鎖。

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

舉例來說，在下列情況下，您可以使用本機覆寫：

  • 模擬 API 並測試 API 修正，再實際投入生產。
  • 如果您已瞭解後端將使用的資料結構，可以製作新的 UI 設計原型。
  • 測試效能修正項目 (例如消除 CLS)，預先確認這些項目是否重要。

此外，您也可以透過本機覆寫，在網頁載入時保留在開發人員工具中所做的變更。

運作方式

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

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

限制

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

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

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

設定本機覆寫

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

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

  4. 設定並啟用本機覆寫後，開發人員工具會根據您要覆寫的內容，將您帶往下列位置：

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

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

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

如要快速查看所有覆寫，請在「Network」面板中，在要求上按一下滑鼠右鍵，然後選取「Show all overrides」。開發人員工具會將您帶往「來源」 >「覆寫」。

覆寫網頁內容

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

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

舉例來說，您可以編輯「來源」中的檔案，或編輯「元素」>「樣式」中的 CSS，但 CSS 位於 HTML 檔案中時不在此限。

開發人員工具會儲存修改後的檔案，並在「來源」 >「覆寫」中列出這些檔案，同時在相關面板和窗格中，於覆寫的檔案旁顯示 已儲存。 圖示：「元素」 >「樣式」、「網路」和「來源」 >「覆寫」。

「來源」、「網路」和「元素」中的覆寫檔案旁，以及「樣式」中，會顯示對應的圖示

此外，在「網路」面板中，如果要求含有覆寫的網頁內容，其「回應」分頁旁邊會顯示紫色圓點圖示和工具提示。

「回覆」分頁旁邊的紫色圓點圖示，並顯示工具提示。

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

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

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

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

追蹤本機變更

您可以在「變更」抽屜式分頁中，集中追蹤對網頁內容所做的所有變更。

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

「開啟所屬的資料夾」選項。

覆寫 HTTP 回應標頭

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

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

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

  1. 設定本機覆寫，然後開啟要偵錯的頁面。
  2. 前往「網路」，找到要求，按一下滑鼠右鍵，然後選取「覆寫標頭」。開發人員工具會將您帶往「Headers」 >「Response Headers」編輯器。

  3. 將游標懸停在回應標頭值上，然後將游標放在該處。

    「回應標頭」編輯器。

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

  4. 修改或新增標題。

    修改現有標頭值、新增標頭值，以及移除覆寫。

    • 如要編輯標頭值，請按一下該值。
    • 如要新增標頭，請按一下 「新增標頭」。
    • 如要移除標頭覆寫，請按一下旁邊的 。這會移除您新增的標題，或將修改過的值還原為原始值。

    「網路」面板會以綠色醒目顯示已修改的標頭，並以紅色和刪除線顯示已移除的覆寫。此外，「標頭」分頁會顯示附有工具提示的紫色圓點圖示，表示標頭已遭到覆寫。

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

編輯所有回應標頭覆寫功能

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

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

    「回應標頭」部分旁邊的「標頭覆寫」連結。

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

  2. 編輯 .headers 檔案：

    編輯 .headers 檔案。

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

    • 如要為規則新增標題/值組合，請將游標懸停在其他組合上，然後按一下 。

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

  3. 按下 Command / Control + S 鍵，儲存 .headers 檔案。

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