显示通过 Chrome 开发者工具所做的所有更改

Posted 2023-03-06

【中文标题】显示通过 Chrome 开发者工具所做的所有更改

【英文标题】：Show all changes made through Chrome Developer Tools

【发布时间】：2014-09-21 03:11:30

【问题描述】：

如何显示我使用 Chrome 开发者工具所做的所有更改？

示例：

打开一个网站。 打开 Chrome 开发者工具。 更改标签的样式属性。 为某些 css 文件添加新样式。 更改 javascript 函数。

如何查看这些变化？比如：

    page.html:56 Change style attribute of foo to bar.
    page.css:21 Lines added: 21,22,23,24.
    page.js:12 Line modified.

【参考方案1】：

从 Chrome 65 开始，有一个更改选项卡！！

是的，真的，太棒了:)

打开开发工具 > Ctrl+Shift+P > Show Changes

https://developers.google.com/web/updates/2018/01/devtools#changes

【讨论】：

@AsGoodAsItGets 仍然不适用于 dom/css 更改

您还可以单击将打开并修改文件的更改！然后就可以保存更改了，非常好！ （版本 72.0.3626.109（正式版）（64 位））

遗憾的是，Chrome 78 中似乎不再存在该选项卡。

@qwertzguy 它在 78 岁时还在我身边 :)

@AdamHughes，我添加了如何打开它的说明。

【参考方案2】：

因此，本地修改适用于您对文件所做的任何更改，但如果您添加内联样式或以任何方式更改 DOM，它们对您没有帮助。

我喜欢使用在更改前后捕获 DOM 的方法。

copy(document.getElementsByTagName('html')[0].outerHTML)

这会将 DOM 的当前状态放入复制缓冲区。

将其粘贴到 vimdiff、http://www.mergely.com/ 或 Meld 等差异工具的左侧列中。

然后我完成我的修改并再次运行复制命令。我将它粘贴到差异工具的右侧列中，然后我可以看到我的更改。

全文在这里：https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a

【讨论】：

哦，我想如果你不记得之前做过，你可以复制（html）然后重新加载页面并再次复制。谢谢

这很棒。如果有办法用 CSS 做到这一点，那就太好了。

【参考方案3】：

您可能想尝试Local Modifications 功能：

DevTools 还维护对所有更改的修订历史 本地文件。如果您编辑了脚本或样式表并保存了更改 使用工具，您可以右键单击 Sources 中的文件名（或 在源区域内）并选择“本地修改”以查看此 历史。

本地修改面板将显示：

变化的差异 进行更改的时间 文件更改所在的域

【讨论】：

感谢您的回答，但这是我之前知道的部分答案。当我修改多个文件时，我希望在一个修改历史列表中查看所有文件修改。

这也不是很全面，因为它只显示更改的内容，而不显示更改的位置（行号除外）。它也是一个时间线，而不是最终更改 - 因此，如果您多次更改参数，它也会出现多次。

真的没有办法看到组合的差异，而不是一系列单独的变化吗？

这可以查看发生了什么变化……但并非所有变化都一定会达到文档的最终状态。因此，如果您进行大量更改，则需要一段时间才能找到每个元素的最终状态。如果所有更改都显示在检查器样式表中会更容易。

所有css都编译成一个app.css看本地修改很慢。它基本上挂了 devtools