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

Sofia Emelianova
Sofia Emelianova

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

概览

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

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

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

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

打开“更改”面板

如需打开更改面板,请执行以下操作:

  1. 打开开发者工具

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

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

    运行“显示更改”命令

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

“更多工具”下拉菜单中的“更改”选项

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

查看并了解您所做的更改

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

  1. 打开开发者工具
  2. 更改来源:

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

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

在“更改”面板中突出显示了差异

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

复制 CSS 更改

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

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

    复制。

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

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

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

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

“还原”按钮