Get Code out of Chrome Devtools and Into Your Editor

I use Google Chrome Devtools daily to quickly test out CSS & HTML changes, but sometimes after I hack my code into the elements panel, I forget what changes I actually made. This becomes an exercise in frustration when I am trying to port code back to my text editor.

This article series describes methods that I use to figure out exactly which changes I’ve made, and how to get them back into my editor.

Method 1: The DOM Diff Method

This method works best when you’ve hacked some code out that modifies the DOM directly or changes inline styles.

For instance, let's say that I add a box shadow and change the innerHTML of this title element:

before

after

If I edit with purely inline styles, the DOM of this area of the page changes:

before

after

This is a simple example, and I would probably remember to copy these changes over to my code editor. But what if I’m making a large number of changes?

The general answer is that I can do a “diff” of the before and after states of the page. Before I would start making style and HTML modifications I’d copy the state of the dom to the clipboard using this command on the console:

copy(document.getElementsByTagName(‘html’)[0].outerHTML)

I’d paste this into the left hand panel of a diff tool (I use RubyMine or Meld for my diffs, but you can also use an online tool like Mergely). Then I’d make my styling & HTML changes and run the same command again to get the “after” state of the DOM.

I paste that into Mergely, and here’s what I get:

You can see, that if you make a large number of mods to the page, this would be a very useful method to recall exactly what you changed!

Drawback

The drawback to this method is that it only works for changes that you’ve made directly to the DOM. It won’t work if you’re editing CSS rules in the stylesheets themselves.

So in the following instance where I change all elements with class “color_11”, the method above would not work:

I’ll be writing a followup article about how you can review changes made to non inline styles.

Check out my 39 lecture Beginner to Expert Chrome DevTools course on Udemy. Normally $125. $10 till 4/23.