Using Snippets to Debug in Chrome

What is Snippets

If you find yourself running the same code in the Console repeatedly, consider saving the code as a snippet instead. Snippets have access to the page's JavaScript context. They are an alternative to bookmarklets.

Sample code with Snippets

Here's the snippet source code that logs some message and replaces the homepage's HTML body with a <p> element that contains the message:

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

When you click the Run. Run button, the Console drawer pops up to display the Hello, Snippets! message that the snippet logs, and the page's content changes.

Create snippets

You can create snippets in the Snippets pane or by running the corresponding command from the Command Menu anywhere in DevTools.

The Snippets pane sorts your snippets in alphabetical order.

You can create a snippet here

After finishing, you can save the snippet and use it in the future.

Run a snippet from the Command Menu

• 1. Focus your cursor anywhere inside of DevTools.
• 2. Press Control+O (Windows/Linux) 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.
• 4. Press Enter to run the snippet.