CSS 鏡像編輯提供雙向互動，讓你可以任意更改 CSS：
在程式碼編輯器裡編輯
.css檔案，你的變更會鏡像到Edge DevTools分頁的元素工具裡。在 Edge DevTools 分頁的 Elements 工具中，你的變更會被鏡像到
.css程式碼編輯器的檔案中。
CSS 鏡像編輯預設已啟用於擴充功能中。 因此，在 DevTools 擴充功能中，元素工具的樣式標籤中，當你更改 CSS 選擇器、規則或值時，本地.css檔案會自動編輯。
例如，當你為身體元素選擇點大小值，然後按上箭頭或向下箭頭時，如果你打開檔案.css，可以在 Styles 標籤中即時看到該值自動在檔案中改變.css：
沒有 CSS 鏡像編輯，Microsoft Edge DevTools 中的 樣式 標籤非常適合除錯和調整 CSS 選擇器和 CSS 規則。 然而，雖然這些變更會在瀏覽器中立即呈現，但它們並不會反映在你的 .css 檔案中。 這表示在你在樣 式 標籤中更改 CSS 後，需要將修改內容複製貼回檔案 .css 。
CSS 鏡像編輯是 Microsoft Edge DevTools 擴充套件中的一項功能，能解決這個問題。 你在樣式標籤所做的任何更改，也會自動更改.css你在 Visual Studio Code 中開啟資料夾中的檔案。 你可以編輯任何 CSS 選擇器，或在 Styles 標籤中建立新的 CSS 選擇器，所有變更都會自動鏡像到正確的 .css 檔案中。
CSS 鏡像編輯也適用於 .html 包含 <style> 元素的檔案，例如成功頁面。 這在「 啟動實例」按鈕的「啟動」中示範。
CSS 鏡像編輯的核取方塊
如果你使用 URL (而非檔案路徑) ，CSS 鏡像編輯需要打開一個包含網頁原始檔案的資料夾，Visual Studio Code該擴充功能能映射到輸入地址列或launch.json檔案的 URL 資源。 如果你沒有本地原始碼檔案，但想在 DevTools 中更改 CSS，請清除 CSS 鏡像編輯 勾選框，以避免出現關於映射和鏡像編輯的錯誤訊息。 詳見下方 啟用 CSS 鏡像編輯。
將變更儲存到 .css 檔案
擴充功能不會自動儲存它在編輯器中所做的修改。 在編輯器的檔案分頁上會出現 .css 一個白色圓圈;如果你想保留更改，就必須手動儲存。
如果你關閉 Visual Studio 或目前的資料夾或檔案， .css Visual Studio 會提示你儲存變更。
從樣式標籤鏡像變更到.css檔案的範例
以下範例中，index.html已在 Visual Studio Code 中開啟，且 Microsoft Edge DevTools 擴充功能已開啟。 我們在 CSS 選擇器中選取 flexbox 圖示 .searchbar ，然後將 flex-direction 變更為 column。
這項變更反映在 Edge DevTools 標籤和 Edge DevTools： 瀏覽器 標籤中：
由於 CSS 鏡像編輯，Visual Studio Code 也會自動導覽到正確的.css檔案與行號，並插入 CSS 程式碼：flex-direction: column
啟用 CSS 鏡像編輯
如果你有可寫且受信任的原始碼檔案，且你希望 DevTools 中的 CSS 變更能自動在原始檔案中編輯，請選擇 CSS 鏡像編輯 的勾選框。 此為預設選取的選項。
如果你只是在做實驗，且 Edge DevTools： 瀏覽器分頁的地址列是 URL 而非檔案路徑，請清除 CSS 鏡像編輯的勾選框，且活動欄>的Explorer> 的「開啟資料夾」按鈕沒有本地原始檔案，也不想看到關於映射和鏡像編輯的錯誤訊息。
啟用或停用 CSS 鏡像編輯：
在 Edge DevTools 分頁的 Elements 分頁，點到 Styles 分頁。
選擇或清除 CSS 鏡像編輯 的勾選框：
或者，打開 指令選單，開始輸入 「鏡像」這個字，然後選擇 Microsoft Edge 工具：在工作空間中切換鏡像編輯開關，針對 CSS 檔案：
原始碼地圖支援
當你設定專案產生原始碼地圖時，CSS 鏡像也支援像 Sass 或 CSS-in-JS 這類抽象功能。 GitHub 上有一個追蹤問題，歡迎任何改進建議： CSS 鏡像編輯與 Sourcemaps：已知問題與回饋。