Chrome DevTools: Increase Productivity with Snippets

You've likely been there before — you're in DevTools writing (or maybe copy and pasting) some one off bit of code over and over again to accomplish some kind of task. Wouldn't it be nice if DevTools knew about the code snippet you wanted to use without you needing to write it over and over again?

Today is your lucky day — this article will cover how to make use of Chrome's DevTools Snippets feature so you never have to write or copy paste your code again.

Open the Snippets Panel

To do this, you'll want to click on the Chrome Menu button in the upper right hand corner → More Tools → Developer Tools.

Once the DevTools panel appears, click Sources → Snippets

Create a Snippet

Once you're in the Snippets panel, click New Snippet.

Name your Snippet, then press enter.

Once your snippet is named, click inside of the code editor to the right of it and type your code. Dont forget to save your code once you're done!

Here are a few that I've made:

Say Hi:

console.log("Hi")

Bitcoin Moon?:

fetch ("https://api.coinstats.app/public/v1/coins?skip=0&limit=1&currency=BTC")
.then(r => r.json())
.then(r => console.log(r.coins[0].price.toFixed(2)))

Hide Leetcode Premium Questions:

// code that I found and saved for myself
let table = document.getElementsByClassName("question-list-table")[0];
let tbody = table.getElementsByTagName("tbody")[0];
let rows = tbody.getElementsByTagName("tr");
for (let i = rows.length - 1; i >= 0; --i) {
    if (rows[i].childNodes[2].getElementsByClassName("fa-lock").length > 0) {
        rows[i].parentNode.removeChild(rows[i]);
    }
}

Running the Snippet

Now that you have your snippet, lets use it. You can run your snippet by doing one of the following:

• Right click on the Snippet → Run from within the Sources menu (but thats annoying... lets be honest)
• (With DevTools open) Press CMD + P (or CMD + Shift + P). Should be similar for Windows .. CTRL instead of CMD.

If the menu pops up and the text field is populated with ">" remove it and type "!". This will then list all of your snippets — like so:

Click on the snippet you want to use or select it and press enter. 🎩✨

Snippets In Action

Say Hi

Bitcoin Moon?

Hide LeetCode Premium Questions

These are obviously pretty basic examples how how to use this feature, but as you can imagine, the possibilities are almost endless here.

As always, refer to the docs for more info:
Chrome DevTools: Snippets

Feel free to reach out on any of my socials for questions, feedback, or just to connect / say hello 👋.

Comments

[Yair Even Or]

Here's my favorite snipper which I use sometimes, to pause after specific thing on the screen happened, so i could debug it (like some evasive popup):

setTimeout(() => { debugger }, 3000)

[Yair Even Or]

"click Sources → Snippets" .... where... a screenshot could have helped. can't find "Snippets"

[Yair Even Or]

after looking endlessly, I somehow was lucky enough to find the "Snippets" section. it's very well-hidden.