DevTools tips — day 2: copying & saving
An advent calendar for front-end developers
Over the 24 days leading to the holidays I am publishing short articles with tips on how to use DevTools in more performant and fun way. Yesterday we’ve added 4 more ideas, so today we start with the number…
5. 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’re discussed in the previous tips, e.g. copy(_$) or copy($0)
6. Store as global
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 there, for example use 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.
7. 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.
8. 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 Mac) to achieve the same thing!
As usual: if you’ve learned something new, please:
→ clap 👏 button below️ so more people can see this
→ follow me on Twitter (@sulco) so you won’t miss future posts:
Also, the 3rd day is already published, read it here:
