Show all changes made through Chrome Developer Tools

How do I display all changes which I made using Chrome Developer tools?

Example:

1. open a website.
2. open Chrome Developer Tool.
3. change style attribute of a tag.
4. add new style to some css file.
5. change a JavaScript function.

How to see those changes? Something like:

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

Solution 1:

As of Chrome 65 there is a changes tab!!

Yes really, it is amazing :)

Open Dev Tools > Ctrl+Shift+P > Show Changes

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

Solution 2:

So, local modifications work for any changes to the files that you make, but they don't help you if you add inline styles or change your DOM in any way.

I like to use a method where I capture the DOM before and after my changes.

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

That places the current state of the DOM into the copy buffer.

Paste this in the left hand column of a diff tool like vimdiff, http://www.mergely.com/ or Meld.

Then I finish my modifications and run the copy command again. I paste that into the right hand column of the diff tool, then I can see my changes.

Full article here: https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a