CODEWITHSUNDEEP
cssgoogle-chromebrowsergoogle-chrome-devtools
MaciejLisCK
MaciejLisCK

Reputation: 3974

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.

Upvotes: 72

Views: 29961

Answers (3)

CrazyTim
CrazyTim

Reputation: 7314

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

Upvotes: 45

RoccoB
RoccoB

Reputation: 2579

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.

diff view

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

Upvotes: 17

apaul
apaul

Reputation: 16170

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.

enter image description here

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

Upvotes: 11

Related Questions