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

Sofia Emelianova

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

總覽

使用「變更」面板，即可追蹤您所做的變更：

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

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

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

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

開啟變更面板

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

1. 開啟開發人員工具。

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

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

   

或者，按一下右上角的「 自訂及控制開發人員工具」>更多工具 >變更。

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

查看及瞭解您的變更

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

1. 開啟開發人員工具。

2. 變更來源：

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

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

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

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

複製 CSS 變更內容

如果您在 Elements 中變更了 CSS 資訊，樣式，使用單一按鈕就能複製所有樣式：

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

   

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

還原檔案的所有變更

如何還原檔案變更：

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