Day 2: DevTools Tip of the day - Copy and Save


You can copy anything available in the console into your OS clipboard using the global copy function available in the Console. This includes variables that we’ve discussed in the previous tips, e.g. copy(_$) or copy($0)

Picture showing how to use copy function

Store as global variable

If you have some piece of data (e.g. an array that you’ve calculated in your app) logged out to the console and you want to do some additional work with it, for example using copy(...) from the previous hint, you can easily make it available as a global variable right from the console. Just right click it and choose the Store as global variable option. The first use of it will create variable named temp1, the next temp2 etc. so you can work with multiple values without a risk of one overwriting the other.

Picture showing how $ and $$ variable is used

Save a stack trace

Stack traces can be useful to you but also to your coworkers (e.g.: working with other front-end developer or with QA engineer). Instead of making a screenshot, you can save a stack trace to a file.

Picture showing how how to save a stack trace

Copy HTML (the faster way)

You probably know that you can either right click or click on the ellipsis (•••) beside the html element to copy it to your OS clipboard. But you can also use a good old [ctrl] + [c] shortcut instead ([⌘] + [c] on macOS) to achieve the same thing!

Gif showing how to copy HTML