Edit

Share via

Run snippets of JavaScript on any webpage

  • Article

If you're entering the same code into the Console tool repeatedly, consider saving the code as a snippet instead, and then running the snippet. Snippets are scripts that you author in the Sources tool. Snippets have access to the JavaScript context of the webpage, and you can run snippets on any webpage. Snippets can be used to alter a webpage, such as to change its content or appearance, or to extract data.

The following screenshot shows Microsoft Edge with a webpage on the left and DevTools on the right. The Sources tool is open, displaying the source code of the snippet that's selected in the Snippets tab. The snippet code was run, making changes to the webpage:

The webpage, altered by the snippet

The snippet source code is shown below:

// Change the background color to "dimgrey".
document.body.style.backgroundColor = "dimgrey";

// Add a paragraph at the bottom of the document.
const p = document.createElement("p");
p.textContent = "Hello world";
p.style.color = "white";
p.style.fontSize = "2rem";
document.body.appendChild(p);

// Log a message to the console.
console.log("Hello world");

The code changes the background color of the webpage to dimgrey, adds a new line of text at the bottom of the webpage, and logs a message to the Console tool.

When you run a snippet on a webpage, the snippet's source code is added to the current webpage. For more information about changing the existing code of a webpage instead of adding new code, see Override webpage resources with local copies (Overrides tab).

Include all your code in one file

The security settings of most webpages block from loading other scripts in snippets. For this reason, you must include all your code in one file.

Open the Snippets tab

The Snippets tab is grouped with the Page tab in the Navigator pane, on the left of the Sources tool.

To open the Snippets tab:

  1. To open DevTools, right-click the webpage, and then select Inspect. Or, press Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS). DevTools opens.

  2. In DevTools, on the Activity Bar, select the Sources tab. If that tab isn't visible, click the More tools (More tools icon) button.

    The Sources tool with the Page tab open on the left

  3. In the Navigator pane (on the left), select the Snippets tab. To access the Snippets option, you might need to click the More tabs (More tabs) button.

Open the Snippets tab from the Command Menu

You can also open the Snippets tab by using the Command Menu:

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

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

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

    The Show Snippets command

Create a new snippet

To create a new snippet from the Snippets tab:

  1. Open the Snippets tab.

  2. Click New snippet (+).

  3. Enter a name for your snippet, and then press Enter:

    A new, empty, snippet in the Sources tool

Create a new snippet from the Command Menu

  1. Focus your cursor somewhere in DevTools.

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

  3. Start typing "snippet", select Create new snippet, and then press Enter:

    The command for creating a new snippet

To rename your new snippet, see Rename a snippet, below.

Edit a snippet

To edit the source code of a snippet:

  1. Open the Snippets tab.

  2. In the Snippets tab, click the name of the snippet that you want to edit. The snippet 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. Press Ctrl+S (Windows, Linux) or Command+S (macOS) to save:

    An asterisk next to the snippet name indicates unsaved code

Run a snippet

Run a snippet from the Sources tool

  1. Open the Snippets tab.

  2. Click the name of the snippet that you want to run. The snippet opens in the Code Editor:

  3. Click the Run snippet (Run snippet) button, or press Ctrl+Enter (Windows, Linux) or Command+Enter (macOS):

    The run snippet button at the bottom of the code editor

Run a snippet from the Command Menu

  1. Focus your cursor somewhere in DevTools.

  2. Press Ctrl+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. Press Enter to run the snippet.

Rename a snippet

  1. Open the Snippets tab.

  2. Right-click the snippet name, and then select Rename.

Delete a snippet

  1. Open the Snippets tab.

  2. Right-click the snippet name, and then select Remove.

Save a snippet

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

  1. Open the Snippets tab.

  2. Right-click the snippet name, and then select Save as.

  3. When prompted, enter a file name and location.

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.