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

Question

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

示例：

1. 开设网站。
2. 打开 Chrome开发者工具。
3. 更改代码的样式属性。
4. 为某些css文件添加新样式。
5. 更改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.

Answer 1

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

我喜欢使用一种方法，在我更改之前和之后捕获DOM。

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

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

将其粘贴到差异工具的左侧栏中，例如vimdiff，http://www.mergely.com/或Meld。

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

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

Answer 2

从Chrome 65开始，有一个更改标签！

是的，这真的很棒：）

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

Answer 3

您可能想尝试Local Modifications功能：

  

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

  

将出现本地修改面板，显示：

     

  
• 变化的差异
  
• 更改时间
  
• 文件更改的域