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

Question

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

例:

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

从Chrome 65开始,有一个更改选项卡!

是的,真是太棒了:)

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

Answer 2

因此,本地修改适用于您所做文件的任何更改,但如果您以任何方式添加内联样式或更改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 3

您可能想尝试本地修改功能:

DevTools还维护对本地文件所做的所有更改的修订历史记录.如果您已使用工具编辑了脚本或样式表并保存了更改,则可以右键单击"源"(或源区域)中的文件名,然后选择"本地修改"以查看此历史记录.

将出现本地修改面板,显示:

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