更改：跟踪您的 HTML、CSS 和 JavaScript 更改

Sofia Emelianova

使用 Changes 面板可以跟踪在开发者工具中所做的代码更改。

概览

在“更改”面板中，跟踪您对以下各项所做的更改：

• 来源中的 HTML（已启用本地替换）
• 元素 > 中的 CSS样式或来源
• JavaScript（来源）

Changes 面板仅显示您在开发者工具中所做的更改。如果您重新加载开发者工具或页面，更改将消失。

如需让开发者工具在页面加载后保留更改，请按照本地替换中的步骤操作。

如需让开发者工具将更改写入本地源代码，请按照使用工作区修改和保存文件中的步骤操作。

打开“更改”面板

如需打开更改面板，请执行以下操作：

1. 打开开发者工具。

2. 按 Command+Shift+P (Mac) 或 Ctrl+Shift+P（Windows、Linux、ChromeOS）打开命令菜单。

3. 开始输入 changes，选择显示更改，然后按 Enter 键。

   

或者，点击右上角的 自定义和控制开发者工具 >更多工具 >更改。

默认情况下，DevTools 会在 DevTools 窗口底部的 Drawer 中显示 Changes 面板。

查看并了解您所做的更改

要查看您所做的更改，请执行以下操作：

1. 打开开发者工具。

2. 更改来源：

   • HTML：首先，启用本地替换，然后在来源中进行更改
   • 元素 > 中的 CSS样式或来源
   • JavaScript（来源）

3. 打开更改面板，然后在面板右侧选择一个文件。

4. 查看突出显示以下内容的 diff 输出：

Changes 面板会自动显示 diff 输出内容，因此您无需水平滚动即可查看单行更改。

复制 CSS 更改

如果您更改了元素 > 中的 CSS样式，那么只需一个按钮即可复制所有样式：

1. 打开更改面板，然后在面板的右侧选择您做出了更改的 CSS 文件。

   

2. 点击“更改”面板底部的 复制按钮。

还原对文件所做的所有更改

如需还原对文件所做的更改，请执行以下操作：

1. 在更改面板的左侧，选择要还原的更改所在的文件。
2. 在底部的操作栏中，点击 还原对当前文件的所有更改。