Show all changes made through Chrome Developer Tools

Question

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

Solution 3

You may want to try the Local Modifications feature:

The DevTools also maintains a revision history of all changes made to local files. If you've edited a script or stylesheet and saved changes using the Tools, you can right-click on a filename in Sources (or within the source area) and select "Local modifications" to view this history.

Local modifications panel will appear displaying:

• A diff of the changes
• The time the change was made at
• The domain under which a file was changed

Comments

[MaciejLisCK]

Thank's for answer but this is partial answer which I was aware before. As I modify multiple files I would like to see all files modifications in one list of modification history.

[ADTC]

This is also not very comprehensive since it only shows what changed, and not where (except for line numbers). It is also a timeline, not the final change - so if you changed a parameter several times, it appears several times as well.

[William Turrell]

Is there really no way to see a combined diff, rather than a series of individual changes?

[Spencer O'Reilly]

This works to see what changed... but not all changes necessarily make it to the final state of the document. So if you make lots of changes it's going to take a while to find the final state of each element. It would be easier if all changes just to showed up in the inspector style sheet.

[Frazer Kirkman]

oh, I guess if you dont remember to do it before, you can just copy(html) and then reload the page and copy again. Thanks

[Daniel Birowsky Popeski]

@AsGoodAsItGets still doesn't work for dom/css changes

[AZ Chad]

You also click on the changes which will open and modify the file! Then you can save changes, very nice! (Version 72.0.3626.109 (Official Build) (64-bit))

[qwertzguy]

Sadly that tab doesn't seem to exist anymore in Chrome 78.

[CrazyTim]

@qwertzguy it's still there for me in 78 :)

[user10375]

It's slow to see local modifications when all css is compiled into one app.css. It basically hangs the devtools

[Adam Hughes]

Am I an idiot for not being able to find this damn changes tagb!

[CrazyTim]

@AdamHughes, I've added a description how to open it.

[Matt Deacalion]

This is great. It would be nice if there was a way to do this with CSS.

[inspirednz]

Note for MacOS users ... you'll need to use CMD-SHIFT-P to bring up the command prompt. Also, no need to then type in "Show changes". Just "Changes" will bring up the command you're after.

[Frazer Kirkman]

@DanielBirowskyPopeski here is a class showing how to make it work with dom/css changes: egghead.io/lessons/…

[Neithan Max]

If the CSS is minimized, which is very common, it tries to show a full diff and freezes dev tools. I've never been able to use this solution.

[Codemonkey]

Annoyingly, if you close devtools (which I often do on a large-node page for performance reasons), and then re-open it to continue editing... it loses all the changes - even though they're still visible/applied in the browser window.