Run snippets of JavaScript on any webpage with Microsoft Edge DevTools

If you are 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 tool. Snippets have access to the JavaScript context of the webpage, and you may run snippets on any webpage. The security settings of most webpages block from loading other scripts in Snippets. For that reason, you must include all your code in one file.

Snippets are an alternative to bookmarklets with the difference that Snippets only run in DevTools and are not limited to the allowed length of a URL.

Using Snippets is an excellent way to change a few things in a third-party webpage. Code changes in Snippets are added to the current webpage and run in the same context. For more information about changing the existing code of a webpage, navigate to Overrides.

For example, in the following figure shows the DevTools homepage on the left and some Snippet source code on the right.

The before running the Snippet

The Snippet source code from the webpage before running the Snippet.

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 webpage 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 webpage changes completely.

The webpage after running the Snippet

Open the Snippets tab

The Snippets tab, in the Navigator pane on the left, lists your Snippets. When you want to edit a Snippet, you need to open it from the Snippets tab.

The Snippets tab

Open the Snippets tab with a mouse

  1. Select the Sources tab. The Sources tool appears.

    The Sources tool with the Page tab open on the left

  2. In the Navigator pane (on the left), select the Snippets tab. To access the Snippets option, you may need to select More tabs (More tabs).

Open the Snippets tab with the Command Menu

  1. Select anything in DevTools, so that DevTools has focus.

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

  3. Type Snippets, select Show Snippets, and then select Enter to run the command.

    The Show Snippets command

Create Snippets

Create a Snippet through the Sources tool

  1. Open the Snippets tab.

  2. Select New snippet.

  3. Enter a name for your Snippet, and then select Enter.

    Name a Snippet

Create a Snippet through the Command Menu

  1. Focus your cursor somewhere in DevTools.

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

  3. Type Snippet, select Create new snippet, then select Enter to run the command.

    The command for creating a new Snippet

To rename your new Snippet with a custom name, navigate to Rename Snippets.

Edit Snippets

  1. Open the Snippets tab.

  2. In the Snippets tab, choose the name of the Snippet that you want to edit. It opens 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 indicates unsaved code

Run Snippets

Run a Snippet from the Sources tool

  1. Open the Snippets tab.
  2. Choose the name of the Snippet that you want to run. The Snippet opens in the Code Editor.
  3. Select Run snippet (Run Snippet).

Run a Snippet with the Command Menu

  1. Focus your cursor somewhere in 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 tab.
  2. Hover on the Snippet name, open the contextual menu (right-click), and select Rename.

Delete Snippets

  1. Open the Snippets tab.
  2. Hover on the Snippet name, open the contextual menu (right-click), and select Remove.

Save Snippets

By default, Snippets are only available within DevTools, but you can also save them to disk.

  1. Open the Snippets tab.
  2. Hover on the Snippet name, open the contextual menu (right-click), and select Save as.
  3. Choose a file name and location when prompted.

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.