OMBD#6: Running Code Snippets on Chrome’s Console

A quick guide for web developers on this great time-saver when executing JavaScript on the go.

Jon Portella
Frontend Weekly

--

Welcome to issue #6 of One Minute Better Developer, where you become a more successful software developer by reading short nuggets of knowledge, one minute at a time.

🔛 ⏭️

Illustration by my buddy Loor Nicolas

THE PROBLEM

You want to test a registration form on a website. Instead of filling it up manually every time, you may come up with a snippet like this that does it automatically for you:

Now, instead of copy-pasting it over and over, it would be great if we could store it on the browser so when we want to use it we can retrieve it and run it easily.

A SOLUTION

Fortunately, Chrome’s DevTools provide functionality for this: snippets.

  1. Open Chrome’s DevTools.

2. Press ctrl/cmd + shift + p to show Chrome’s DevTools command menu:

3. Type “show snippets” and select that option

4. This will reveal the Snippets tab under the sources panel.

Tap on + New snippet

5. Name your snippet and input its content on the right-hand panel.

Now that your snippet is saved, you can press ctrl/cmd + enter to run it on the page!

Snippets will persist between browser sessions, so you can retrieve and run them easily.

BONUS: here’s a list of snippets to get you inspired.

--

--

Jon Portella
Frontend Weekly

Software Engineer @ Pinterest - Teacher, maker, and general things do-er. - https://www.linkedin.com/in/jonportella/ - Toronto, Canada