Run Snippets of JavaScript

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.

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.

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.

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.

   

   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 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.

   

   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.

   

   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.

   

   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.

   

   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.

   

   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 , 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.

   

   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.