Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

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?

There is now hugely complete docs on snippets: developers.google.com/chrome-developer-tools/docs/… Enjoy – Paul Irish May 7, 2013 at 3:54

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.

What would be the fastest way to execute a snippet? I could to Ctrl+Shift+I (open DevTools), Ctrl+P (fuzzy search), start typing snippet name, ENTER (open snippet), Ctrl+ENTER (execute snippet). I hope I'm missing something and there's a faster way. A "snippets toolbar" in the browser would be nice. – Šime Vidas Sep 29, 2013 at 3:31 @ŠimeVidas that's the fastest way I know. What snippet do you use so often you want it on speed dial? – Paul Irish Sep 30, 2013 at 4:07 I need this one to watch YouTube: javascript:(function(){location.href=location.href.replace('youtube.com/watch','youtube.com/watch_popup')}()) . (I'm Flash-less and YouTube only loads HTML5 videos in its "watch_popup" page for me. See here: twitter.com/simevidas/status/368054720327204864 ). Also jsgif for viewing animated GIFs. I got hooked on those two, so I keep my bookmarks toolbar open permanently. – Šime Vidas Sep 30, 2013 at 4:53 I wonder if Paul Irish has ever answered a question, and NOT been marked as the right answer.... – Steve Oct 22, 2013 at 19:11 @PaulIrish Or Ctrl-P, so that the field is empty and you don't have to delete the > . Thanks for the tip! – Šime Vidas Aug 4, 2017 at 19:30 It's almost done. It allows effectively a multiline console but with saveable/nameable input. – Paul Irish May 17, 2012 at 16:48 The UI is currently crude. On Windows you can only save snippets using Ctrl+S (just make sure that the focus is on the right window). There doesn't seem to be a shortcut to run the snippet though. – Stefan Oct 9, 2012 at 7:59 Chrome stores your snippets in localstorage so I don't think you can easily edit them externally. Your best bet is to edit externally and copy into devtools. – JaredMcAteer Feb 19, 2015 at 16:19 This feature is now working on the most recent builds of chrome but UI is not very nice yet. Snippets could be manipulated from the navigator context menu. – vsevik Jul 6, 2012 at 20:19

I'm unable to activate that experiment myself (there's no Developer Tools experiments in my chrome:flags , but from Safari, I found this explanation:

In short, it "is a little utility that allows you to enter blocks of HTML and CSS and have it rendered on the fly".

From the blog post, it seems it is buggy in Safari, so maybe Chrome has not implemented it yet.

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question . Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers .