Chrome Developer Tools: What is Snippets Support?
As of version 19, Chrome's Web Inspector has an experimental feature called "snippets support". Here is how to activate it:
-
Open chrome:flags, enable "Developer Tools experiments", restart.
-
Open Web Inspector (Developer Tools), hit the settings gear icon in the lower right corner, enable "Snippets support", restart.
-
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?
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.
I asked Paul Irish if he knew anything about it, he wasn't sure either but says it's not completely implemented yet and pointed me at the bug tracker, I found the head ticket and looking at some of the code the diffs have a lot of FIXME: To be implemented. comments.
Right click to create a new one.
Chrome Developer Tools snippets support allows to create/edit/save and execute javascript code snippets.