DevTools Tips

Categories: Supported by:

Re-use scripts as snippets

The console is great to write JavaScript to read from the document or manipulate it but it's a terrible editor.

The sources panel (in Edge or Chrome), however, is a full editor and you can use it to write more complex scripts to run in the context of the current page and keep them for later re-use.

These are called snippets and you can access them in the Sources tool on the left hand side (you may have to use the >> to reach them). You can create as many named snippets as you like and remove ones you don't need any more.
Snippets have full access to the window object and you can use any of the console API methods in them too.

For example, this script would replace each image in the document with its alternative text:

$$('img').forEach(i=>{
let txt = document.createElement('span');
txt.innerText = i.alt;
i.parentNode.replaceChild(txt,i);
console.log(i.alt);
});

You can run snippets by pressing ctrl + enter (or cmd + enter on mac) or using the button on the bottom of the editor.

The snippets editor in the Sources tool with a snippet open in the editor

Even better, you can use the command menu to run snippets more easily. Simply press ctrl + p (or cmd + p on mac) and type ! followed by the name of your Snippet.

Running a snippet from the Command menu