Show all changes made through Chrome Developer Tools
CssGoogle ChromeBrowserGoogle Chrome-DevtoolsCss Problem Overview
How do I display all changes which I made using Chrome Developer tools?
Example:
- open a website.
- open Chrome Developer Tool.
- change style attribute of a tag.
- add new style to some css file.
- 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.
Css Solutions
Solution 1 - Css
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 - Css
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 - Css
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