Using Code Snippets to Test, Save and Reuse JavaScript Code in Chrome Developer Tools

Google Chrome developer Tools has a code snippets feature that allows you to quickly write, test, save and re-use code snippets.

One way to test JavaScript code is to type it into Chrome Developer Tools console and hit enter. It will cause whatever you typed in to execute immediately. If you hit “Shift + Enter” instead, the cursor would move to a next line to allow you to enter code across multiple lines. The code will execute when you finally hit enter.

This is great for testing small functions, but I personally find it pretty annoying and hard to use for anything longer than 3 lines of code.

Thankfully, Google Chrome has code Snippet feature which solves this problem.

Creating a code snippet

Code snippets is a special view that shows up in your Chrome developer tools. You can:

  1. Open the Developer Tools
  2. Navigate to Sources at the top menu
  3. Select Snippets in the left menu (see the image above).
  4. Right click in the left column
  5. Select “new” from drop down menu to create a new snippet.

Once the new snippet is created, you can use the white space in the right column as a regular code editor.

Running a code snippet

Once the snippet is created and saved, you can run the snippet in two ways.

  1. By hitting the small play button to the right of the snippet
  2. By hitting "Command + Enter" on Mac or "Control + Enter" on Windows.

Debugging code snippets

You can add break points to snippets (see the image above), to help you debug your code, just like you would with any other JavaScript code loaded in Chrome Dev tools.

Quick access to snippets

Once the snippet is saved you can open it by going back to the source tab, or by hitting a "Command + O" shortcut on Mac or "Control + O" on windows to open up fuzzy select, and typing in your snippet name.

After opening the snippet just hit "Command + Enter" shortcut on Mac or "Control + Enter" on Windows to run it.

Summary and Other Tips

  1. Create new snippet by going to Sources -> Snippets in Chrome Dev Tools
  2. Open existing snippet via Fuzzy Select by hitting "Command + O" on Mac or "Control + O" on Windows. (Note, you can open regular JavaScript files loaded in your browser via the Fuzzy select).
  3. Use snippets for ad-hoc JavaScript testing and debugging
  4. Save your common debugging tasks as snippets and open them fast via Fuzzy select and then run them with "Command + Enter" on Mac or "Control + Enter" on windows.
  5. Research snippets collections created by others, such as:

Originally published at on November 28, 2015.

Show your support

Clapping shows how much you appreciated Alex Kras’s story.