變更：追蹤 HTML、CSS 和 JavaScript 變更

Sofia Emelianova

使用「變更」面板，追蹤在開發人員工具中所做的程式碼變更。

總覽

您可以使用「變更」面板追蹤下列項目的變更：

• 來源中的 HTML，且已啟用本地覆寫值
• 元素 >「樣式」或「來源」中的 CSS
• 來源中的 JavaScript

「Changes」面板只會顯示您在開發人員工具中所做的變更。如果重新載入開發人員工具或網頁，變更就會消失。

如要讓開發人員工具在網頁載入期間保留變更，請按照「本機覆寫」中的步驟操作。

如要讓開發人員工具將變更寫入本機來源，請按照「使用 Workspaces 編輯及儲存檔案」中的步驟操作。

開啟「變更」面板

如要開啟「變更」面板，請按照下列步驟操作：

1. 開啟開發人員工具。

2. 按下 Command + Shift + P 鍵 (Mac) 或 Control + Shift + P 鍵 (Windows、Linux、ChromeOS) 即可開啟指令選單。

3. 開始輸入 changes，選取「顯示變更」，然後按下 Enter 鍵。

   

或者，您也可以依序點選右上角的 「自訂及控制開發人員工具」 >「更多工具」 >「變更」。

根據預設，開發人員工具會在開發人員工具視窗底部的側欄中顯示「變更」面板。

查看及瞭解變更

如要查看變更內容，請按照下列步驟操作：

1. 開啟開發人員工具。

2. 變更來源：

   • HTML：首先啟用「Local overrides」，然後在「Sources」中進行變更
   • 元素 >「樣式」或「來源」中的 CSS
   • 來源中的 JavaScript

3. 開啟「變更」面板，然後在面板右側選取檔案。

4. 觀察 diff 輸出內容，找出以下項目：

「變更」面板會自動以美化輸出 diff，因此您不必水平捲動畫面，即可查看單一行中的變更內容。

複製 CSS 變更內容

如果您在「元素」 >「樣式」中變更 CSS，可以使用單一按鈕複製所有 CSS：

1. 開啟「變更」面板，然後在面板右側選取您變更的 CSS 檔案。

   

2. 按一下「變更」面板底部的 「複製」按鈕。

還原檔案的所有變更

如要還原對檔案所做的變更，請按照下列步驟操作：

1. 在「變更」面板的左側，選取要還原的檔案。
2. 在底部的操作列上，按一下 「將所有變更還原至目前的檔案」。