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

copy(...)

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)

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.

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.

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!

24