DevTools tips — day 23: coverage and changes
part of the “Advent calendar for front-end developers” series
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 had a couple of Network tips; today let’s continue the Drawer tips we started the other day and talk about 2 more of the useful tools hidden in there:
65. Check the code coverage
A lot of the code that ends up on your page is not actually needed. Maybe it’s a some big chunk of JavaScript from an external library, maybe some CSS rules on forgotten selector that doesn’t match anything anymore.
To get a nice summary — and details—of that redundant code use the Coverage panel. To open it use the Drawer menu or, quicker, Command Menu:
DevTools’ Coverage tool can track which lines of the currently loaded JS & CSS files are being run and displays the percentage of unused bytes.
It also marks the lines that were run in green and the ones that weren’t — in red. Let’s see it on a simple example:
66. Check what you’ve changed
Designing in browser, adjusting those css values, playing with the code where it’s evaluated — it’s both convenient and fun. But at some point you might want to compare what you’ve changed with the originally loaded stylesheet.
For that purpose use the Changes tool that resides in the DevTools’ Drawer.
It will not only show you the changes in the form of a diff that you may be familiar with from using a source control tool like Git, but also allow to undo them. See that in action:
And that’s it for today. If you’ve learned something useful, please:
→ smash that👏 button below️ so more people can see this
→ follow me on Twitter (@sulco) so you won’t miss future posts:
(I write on stuff like this and all things TypeScript, Angular, and React)
Also, the 24th day is already published, read it here:
