Chrome DevTools: Increase Productivity with Snippets
Tags: javascript, chrome, tips, productivity
Published: 2021-01-20 18:32:27

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?

![https://media.giphy.com/media/3oKIPAeJaQoh7KgyMo/giphy.gif](https://media.giphy.com/media/3oKIPAeJaQoh7KgyMo/giphy.gif)

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:*

```jsx
console.log("Hi")
```

*Bitcoin Moon?:*

```jsx
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:*

```jsx
// 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**

![https://media.giphy.com/media/Ph5ELYJov9n5oHzVHZ/giphy.gif](https://media.giphy.com/media/Ph5ELYJov9n5oHzVHZ/giphy.gif)

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:

![https://i.imgur.com/pk7FbkM.png](https://i.imgur.com/pk7FbkM.png)

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

**Snippets In Action**

*Say Hi*

![https://i.imgur.com/MLQ3Iq7.gif](https://i.imgur.com/MLQ3Iq7.gif)

*Bitcoin Moon?*

![https://i.imgur.com/Z4jMxog.gif](https://i.imgur.com/Z4jMxog.gif)

*Hide LeetCode Premium Questions*

![https://i.imgur.com/Nghe1NO.gif](https://i.imgur.com/Nghe1NO.gif)

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](https://developers.google.com/web/tools/chrome-devtools/javascript/snippets)

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