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

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.

Answer 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

Answer 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

Answer 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