Overview Open Chrome DevTools Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources
Overview Open Chrome DevTools Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources

Run Snippets of JavaScript

Published on

If you find yourself running the same code in the Console repeatedly, consider saving the code as a Snippet instead. Snippets are scripts that you author in the Sources panel. They have access to the page's JavaScript context, and you can run them on any page. Snippets are an alternative to bookmarklets. Firefox DevTools has a feature similar to Snippets called Scratchpad.

For example, Figure 1 shows the DevTools homepage on the left and some Snippet source code on the right.

How the page looks before running the Snippet.

Figure 1. How the page looks before running the Snippet.

Here's the Snippet source code from Figure 1:

console.log('Hello, Snippets!');
document.body.innerHTML = '';
var p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

Figure 2 shows how the page looks after running the Snippet. The Console Drawer pops up to display the Hello, Snippets! message that the Snippet logs, and the page's content changes completely.

How the page looks after running the Snippet.

Figure 2. How the page looks after running the Snippet.

Open the Snippets pane

The Snippets pane lists your Snippets. When you want to edit a Snippet, you need to open it from the Snippets pane.

The Snippets pane.

Figure 3. The Snippets pane.

Open the Snippets pane with a mouse

  1. Click the Sources tab to open the Sources panel. The Page pane usually opens by default.

    The Sources panel with the Page pane open on the left.

    Figure 4. The Sources panel with the Page pane open on the left.

  2. Click the Snippets tab to open the Snippets pane. You might need to click More Tabs More Tabs in order to access the Snippets option.

Open the Snippets pane with the Command Menu

  1. Focus your cursor somewhere inside of DevTools.

  2. Press Control+Shift+P or Command+Shift+P (Mac) to open the Command Menu.

  3. Start typing Snippets, select Show Snippets, and then press Enter to run the command.

    The Show Snippets command.

    Figure 5. The Show Snippets command.

Create Snippets

Create a Snippet through the Sources panel

  1. Open the Snippets pane.

  2. Click New snippet.

  3. Enter a name for your Snippet then press Enter to save.

    Naming a Snippet.

    Figure 6. Naming a Snippet.

Create a Snippet through the Command Menu

  1. Focus your cursor somewhere inside of DevTools.

  2. Press Control+Shift+P or Command+Shift+P (Mac) to open the Command Menu.

  3. Start typing Snippet, select Create new snippet, then press Enter to run the command.

    The command for creating a new Snippet.

    Figure 7. The command for creating a new Snippet.

See Rename Snippets if you'd like to give your new Snippet a custom name.

Edit Snippets

  1. Open the Snippets pane.

  2. In the Snippets pane click the name of the Snippet that you want to edit in order to open it in the Code Editor.

    The Code Editor.

    Figure 8. The Code Editor.

  3. Use the Code Editor to add JavaScript to your Snippet.

  4. When there's an asterisk next to the name of your Snippet it means you have unsaved code. Press Control+S or Command+S (Mac) to save.

    An asterisk next to the Snippet name, which indicates unsaved code.

    Figure 9. An asterisk next to the Snippet name, which indicates unsaved code.

Run Snippets

Run a Snippet from the Sources panel

  1. Open the Snippets pane.
  2. Click the name of the Snippet that you want to run. The Snippet opens in the Code Editor.
  3. Click Run Snippet Run Snippet, or press Control+Enter or Command+Enter (Mac).

Run a Snippet with the Command Menu

  1. Focus your cursor somewhere inside of DevTools.

  2. Press Control+O or Command+O (Mac) to open the Command Menu.

  3. Type the ! character followed by the name of the Snippet that you want to run.

    Running a Snippet from the Command Menu.

    Figure 10. Running a Snippet from the Command Menu.

  4. Press Enter to run the Snippet.

Rename Snippets

  1. Open the Snippets pane.
  2. Right-click the Snippet name and select Rename.

Delete Snippets

  1. Open the Snippets pane.
  2. Right-click the Snippet name and select Remove.

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.