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

Sofia Emelianova

您可以在「變更」分頁中追蹤您所做的變更：

• 「來源」中的 HTML 並啟用「本機覆寫」
• 依序點選「元素」>「樣式」或「來源」中的 CSS
• 「來源」中的 JavaScript

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

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

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

開啟「變更」分頁

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

1. 開啟開發人員工具。

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

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

   

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

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

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

查看及瞭解您的變更

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

1. 開啟開發人員工具。

2. 變更來源：

   • HTML：首先啟用「本機覆寫」，然後在「來源」中進行變更
   • 依序點選「元素」>「樣式」或「來源」中的 CSS
   • 「來源」中的 JavaScript

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

4. 觀察會醒目顯示以下內容的 diff 輸出內容：

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

複製 CSS 變更內容

如果您在 [Elements] (元素) > [Styles] (樣式) 中變更了 CSS，可以使用單一按鈕複製所有樣式：

1. 開啟「Changes」分頁，然後在分頁右側選取你做出變更的 CSS 檔案。

   

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

還原檔案的所有變更

如何還原檔案變更：

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