Run Snippets Of JavaScript On Any Page With Chrome DevTools

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 Control+Enter (Mac).

Run a Snippet 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. Delete the > character and 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.

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.