Copy Javascript object or any variable from console into clipboard

While I was doing some debugging, I badly needed to compare two Javascript objects that I could easily print into console but then was having a hard time remembering all of the differences from one object to the other one. This was a major API change and I couldn’t just get everything off my memory. So I just needed a quick way of copying the JS object into clipboard. With chrome dev tools, I printed both the objects to console with console.log and then used Sublime comparison tool to compare them both and easily note the differences when I needed to.

Problem solved!

Here is how I did that.

 

Chrome Dev Tools – Save console log object into global variable

Right click on the variable or object and then click on “Store as Global Variable”. Since I had two variables that I needed to compare. I saved them both in the same manner.

 

Chrome Dev Tools – Objects after being saved as Global Variables

Now for the final step, I used

[[code]]czoxMjpcImNvcHkodGVtcDEpIFwiO3tbJiomXX0=[[/code]]

and
[[code]]czoxMjpcImNvcHkodGVtcDIpIFwiO3tbJiomXX0=[[/code]]

to get the variables stored in the clipboard and then subsequently coped them into different files to compare. You can use any file comparison tool for the visual difference which helps with quickly noticing what changed and modify whatever code changes are need for new object in the application. In my case, I used, “Compare Side-By-Side” package for Sublime Text. As you can see, I can quickly able to see the differences between the properties of object as we changed the API from V1 to V2.

Side-by-side file comparison & difference tool for ST2/3

Leave a Reply

Your email address will not be published. Required fields are marked *