javascript - Chrome Developer Tools: What is Snippets Support?

Question

As of version 19, Chrome's Web Inspector has an experimental feature called "snippets support". Here is how to activate it:

1. Open chrome:flags, enable "Developer Tools experiments", restart.

2. Open Web Inspector (Developer Tools), hit the settings gear icon in the lower right corner, enable "Snippets support", restart.

   

3. Open the Scripts panel, click the "navigator tree" icon on the left, and find an empty Snippets tab.

   

My question is: What can I use this for? How can I populate this with snippets?

Answer 1

In short, snippets are a multi-line console, an iterative JS development workflow, and a persistent store for common debugging helpers.

developers.google.com/chrome-developer-tools/docs/authoring-development-workflow#snippets

Some of the use-cases Snippets can help with are:

• Bookmarklets - all of your bookmarklets could be stored as snippets, especially those you may wish to edit.
• Utilities - debugging helpers for interacting with the current page can be stored and debugged. A community-curated list of such utilities is available.
• Debugging - Snippets offer a multi-line console with syntax-highlighting and persistance, making it convenience for debugging code that is more than a one-liner.
• Monkey-patching code - code you wish to patch at runtime can be done through Snippets, although many times you can just live-edit code in the Sources tab.

Lastly, I've personally been collecting a few common snippets that you may include in your arsenal: github.com/paulirish/devtools-addons/wiki/Snippets

---

To run snippets quickly, now you can do this. Ctrl-Shift-P for the "command palette", then backspace, and use a ! prefix, then type whichever snippet name you want to run.