DevTools tips — day 21: snippets

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 have seen some DevTools Workspace magic, today we’ll play with snippets:

59. Snippets

Sometimes I use JavaScript as automation tool to work with 3rd party websites and apps.

Let’s say for example that I’d want to see how many people clapped on all of my Medium posts. Medium doesn’t provide such total number, so I’ve put together this small script:

$$('td:last-child .sortableTable-number')
    .map(el => parseInt(el.innerText))
    .reduce((total, value) => total + value);

When I go into my stats page and type it into the Console, it will return the number:

Now, granted, it didn’t take me that much effort to write that, but if I were to do it once in a while it would certainly be annoying to remember the right selectors etc.

This is where Snippets come in: it’s a way to store pieces of your JavaScript code into DevTools so you can easily reuse them later.

To create such snippet, go into Sources panel and in its Navigator sidebar choose Snippets tab. Press “New snippet”, type your code, save it and you’re all set! You can now run the code from right-click menu or by pressing [ctrl]+[enter] shortcut:

60. Run snippets from wherever

Once you have a set of awesome snippets set up, you don’t even have to visit Sources to run them. The quickest way, as we’ve already discovered several times this week, is to use Command Menu. If you type ! in its input, you can pick one of your snippets by name:

And that’s it for today. As always, if you’ve learned something new, please:

→ smash that👏 button below️ so more people can see this
→ follow me on Twitter (@sulco) so you won’t miss future posts:

Tomek Sułkowski (@sulco) | Twitter

Also, the 22nd day is already published, read it here:

DevTools tips — day 22: network tips