透過本機覆寫功能,您可以針對變更和修正項目設計原型、測試變更和修正,而不必等待後端、第三方或 API 支援,藉此解除封鎖工作流程。
即使您沒有遠端資源的存取權,也可以使用本機覆寫值模擬遠端資源。您可以模擬對要求和各種檔案的回應,例如 HTTP 回應標頭和網頁內容 (包括 XHR 和擷取要求)。
舉例來說,本機覆寫可在以下用途派上用場:
- 測試 API 及 API 修正項目後,才實際發布正式版。
- 如果您知道後端要使用的資料結構,可以設計新 UI 設計的原型。
- 測試效能修正程式 (例如淘汰 CLS),事先確認修正後所具備的重大影響。
本機覆寫值也能讓您在網頁載入時,保留您在開發人員工具中所做的變更。
運作方式
- 當您在開發人員工具中做出變更時,開發人員工具會將修改過的檔案副本儲存到指定的資料夾。
- 重新載入頁面時,開發人員工具會提供本機修改過的檔案,而非網路資源。
你也可以直接將變更儲存至來源檔案。請參閱「使用工作區編輯及儲存檔案」。
限制
本機覆寫功能適用於網路回應標頭和大多數檔案類型,包括 XHR 和擷取要求,但以下幾點除外:
- 啟用本機覆寫時,系統會停用快取。
- 開發人員工具不會儲存您在元素面板 DOM 樹狀結構中所做的變更。
- 如果您在「Styles」窗格中編輯 CSS,且該 CSS 的來源為 HTML 檔案,開發人員工具不會儲存變更。
但可以改為在「來源」面板中編輯 HTML 檔案。
設定本機覆寫
您可以立即在「網路」面板中覆寫網頁內容或回應標頭:
- 開啟開發人員工具前往「網路」面板,在要覆寫的要求上按一下滑鼠右鍵,然後在下拉式選單中選取「覆寫標頭」或「覆寫內容」。
- 如果尚未設定本機覆寫值,開發人員工具會在頂端的動作列中提示您執行以下動作:
- 選取要儲存覆寫檔案的資料夾。
- 按一下「允許」,授予開發人員工具的存取權。
- 如果設定了本機覆寫值,但停用,開發人員工具會自動加以啟用。
本機覆寫設定完成並啟用後,開發人員工具就會根據您要覆寫的內容,要求您進行以下操作:
如要暫時停用本機覆寫設定或刪除所有覆寫檔案,請依序前往「來源」 >「覆寫」,然後清除
「啟用本機覆寫」核取方塊,或分別點選「清除」 。如要刪除單一覆寫檔案或資料夾中的所有覆寫值,請在「來源」 >「覆寫」中的檔案或資料夾上按一下滑鼠右鍵,然後選取「刪除」,再按一下對話方塊中的「確定」。這項操作無法復原,您必須手動重新建立已刪除的覆寫值。
如要快速查看所有覆寫設定,請在「網路」面板中在請求上按一下滑鼠右鍵,然後選取「顯示所有覆寫值」。開發人員工具會將您導向「來源」 >「覆寫」。
覆寫網路內容
如何覆寫網路內容:
- 設定本機覆寫值。
- 編輯檔案並儲存在開發人員工具中。
舉例來說,您可以編輯 來源 或 CSS 中的 元素 > 樣式檔案,除非 CSS 位於 HTML 檔案。
開發人員工具會儲存修改過的檔案,並依序前往「Sources」 >「Overrides」,在相關面板和窗格中找出已覆寫的檔案,並在旁邊顯示 圖示:「Elements」 >「Styles」、「Network」和「Sources」 >「Overrides」。
此外,「網路」面板會在包含覆寫網路內容的要求中的「Response」分頁旁邊顯示紫色圓點圖示,以及工具提示。
覆寫 XHR 或擷取要求,以模擬遠端資源
使用本機覆寫功能時,您不需要存取後端,也不必等待後端支援變更。即時模擬和實驗:
- 設定本機覆寫值。
- 在「網路」中,篩選 XHR/fetch 要求,找出所需項目,在上面按一下滑鼠右鍵,然後選取「覆寫內容」。
- 變更已擷取的資料,並儲存檔案。
- 重新整理網頁,觀察變更是否套用。
如要瞭解這個工作流程,請觀看以下影片:
追蹤本機變更
「變更」導覽匣分頁可讓您集中追蹤您對網頁內容所做的所有變更。
此外,您可以依序前往「來源」 >「覆寫」,在已儲存的檔案上按一下滑鼠右鍵,然後在內容選單中選取「在含有資料夾中開啟」。這樣就會開啟您在overrides setup期間選取的資料夾。在這個頁面中,您可以使用慣用的程式碼編輯器修改檔案。
覆寫 HTTP 回應標頭
如果透過「網路」面板,您可以在不存取網路伺服器的情況下覆寫 HTTP 回應標頭。
透過回應標頭覆寫,您可以在本機修正各種標頭的原型,包括但不限於:
如何覆寫回應標頭:
- 設定本機覆寫並檢查,例如這個示範頁面。
- 前往「網路」找出要求,在請求上按一下滑鼠右鍵,然後選取「覆寫標頭」。開發人員工具會將您導向「Headers」 >「Response Headers」編輯器。
將滑鼠遊標懸停在回應標頭值上,然後將遊標放在其中。
如要啟用「回應標頭」編輯器,請將滑鼠遊標懸停在回應標頭值上,然後按一下「編輯」。
修改或新增頁首。
- 如要編輯標頭值,請按一下該值。
- 如要新增頁首,請按一下「新增頁首」圖示 。
- 如要移除標頭覆寫設定,請按一下旁邊的 。這樣會移除您新增的標頭,或是將修改過的值還原為原始值。
「網路」面板會醒目顯示修改過的標題,並以綠色標示,並移除紅色並劃掉的覆寫值。此外,「Headers」分頁會顯示紫色圓點圖示,以及有工具提示的工具提示,指出標頭已覆寫。
重新整理頁面即可套用變更。
編輯所有回應標頭覆寫設定
如何在同一處編輯所有標頭覆寫設定:
按一下「Response Headers」部分旁邊的 「.headers」。.headers.headers
開發人員工具會將您導向至「來源」 >「覆寫」中的對應
.headers
檔案。編輯
.headers
檔案:如要新增覆寫規則,請按一下「新增覆寫規則」。這裡的規則是一組標頭和值,以及要套用它們的一或多個要求。
如要在規則中新增標頭/值組合,請將滑鼠遊標懸停在其他組合上,然後按一下
。如要還原標頭值,請移除新增的標頭或規則,然後將滑鼠遊標懸停在該標頭或規則上,然後按一下
即可。
使用 Command / Control + S 鍵儲存
.headers
檔案。重新整理頁面即可套用變更。