Run snippets of JavaScript on any page with Microsoft Edge 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 JavaScript context of the page, 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, in the following figure shows the DevTools homepage on the left and some Snippet source code on the right.

How the page looks before running the Snippet

The Snippet source code from the previous figure.

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

In the following figure, the page appears after running the Snippet. The Console Drawer pops up to display the Hello, Snippets! message that the Snippet logs, and the content of the page changes completely.

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

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

  2. Click the Snippets tab to open the Snippets pane. You might need to choose 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. Select Control+Shift+P (Windows, Linux) or Command+Shift+P (macOS) to open the Command Menu.

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

    The Show Snippets command

Create Snippets

Create a Snippet through the Sources panel

  1. Open the Snippets pane.

  2. Choose New snippet.

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

    Name a Snippet

Create a Snippet through the Command Menu

  1. Focus your cursor somewhere inside of DevTools.

  2. Select Control+Shift+P (Windows, Linux) or Command+Shift+P (macOS) to open the Command Menu.

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

    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

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

  4. When an asterisk appears next to the name of your Snippet it means you have unsaved code. Select Control+S (Windows, Linux) or Command+S (macOS) to save.

    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. Choose Run Snippet (Run Snippet), or select Control+Enter (Windows, Linux) or Command+Enter (macOS).

Run a Snippet with the Command Menu

  1. Focus your cursor somewhere inside of DevTools.

  2. Select Control+Shift+P (Windows, Linux) or Command+Shift+P (macOS) 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

  4. Select Enter to run the Snippet.

Rename Snippets

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

Delete Snippets

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

Getting in touch with the Microsoft Edge DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet at @EdgeDevTools.
  • Submit a suggestion to The Web We Want.
  • File bugs on this article using the Feedback section.

The Send Feedback icon in the Microsoft Edge DevTools

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.