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

透過「變更」分頁，您可以追蹤您所做的變更：

• 來源中的 HTML 已啟用本機覆寫值
• 位於 [元素] > [樣式] 或 [來源] 內的 CSS
• 來源中的 JavaScript

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

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

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

開啟「變更」分頁

開啟「變更」分頁的步驟如下：

1. 開啟開發人員工具。

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

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

   

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

變更" width="800" height="460">

根據預設，開發人員工具會在開發人員工具視窗底部的「Drawer」中顯示「Changes」分頁。

查看及瞭解變更

如何查看變更：

1. 開啟開發人員工具。

2. 變更來源：

   • HTML：先啟用「本機覆寫」，然後在「來源」中進行變更
   • 位於 [元素] > [樣式] 或 [來源] 內的 CSS
   • 來源中的 JavaScript

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

4. 觀察 diff 輸出內容，指出以下內容：

「Changes」分頁會自動美化 diff 輸出內容，讓您不必水平捲動，就能在同一行查看變更情形。

複製 CSS 變更內容

如果您變更了「Elements」(元素) >「Styles」(樣式) 中的 CSS，只要使用一個按鈕就能複製所有內容：

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

   

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

還原對檔案進行的所有變更

如何還原檔案變更：

1. 在「變更」分頁的左側，選取你要還原變更的檔案。
2. 在底部的動作列中，按一下 「將所有變更還原為目前檔案」。