Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Run Snippets Of Code From Any Page

Snippets are small scripts that you can author and execute within the Sources panel of Chrome DevTools. You can access and run them from any page. When you run a snippet, it executes from the context of the currently open page.

If you have small utilities or debugging scripts which you find yourself using repeatedly on multiple pages, consider saving the scripts as snippets. You can also use snippets as an alternative to bookmarklets.

TL;DR

  • Snippets are small scripts that you can run from any page (similar to bookmarklets).
  • Run portions of snippets in the Console with the "Evaluate in Console" feature.
  • Remember that popular features from the Sources panel, like breakpoints, also work with snippets.

Create snippet

To create a snippet, open the Sources panel, click on the Snippets tab, right-click within the Navigator, and then select New.

create snippet

Enter your code in the editor. When you have unsaved changes, your script name has an asterisk next to it, like in the screenshot below. Press Command+S (Mac) or Ctrl+S (Windows, Linux) to save your changes.

unsaved snippet

Run snippet

There are three ways to run your snippet:

  • Right-click on the snippet filename (in the pane on the left that lists all your snippets) and select Run.
  • Click the Run button (run snippet
  button).
  • Press Command+Enter (Mac) or Ctrl+Enter (Windows, Linux).

To evaluate a portion of your snippet in the Console, highlight the portion, right-click anywhere in the editor, and select Evaluate in Console, or use the keyboard shortcut Command+Shift+E (Mac) or Ctrl+Shift+E (Windows, Linux).

evaluate in console

Set breakpoints

Just like other scripts, you can set breakpoints on snippets. See Pause Your Code With Breakpoints to learn how to add breakpoints from within the Sources panel.

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.