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:

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: https://developers.google.com/chrome-developer-tools/docs/authoring-development-workflow#snippets Enjoy — Paul Irish, May 07 '13 at 03:54
@PaulIrish The link's page doesn't contain snippets part anymore. — amigo, Oct 27 '16 at 18:15

score 85 · Accepted Answer · edited Jun 20 '20 at 09:12

85

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 07 '13 at 18:15

Paul Irish

43,185
21
92
125

3

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 '13 at 03: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 '13 at 04: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: https://twitter.com/simevidas/status/368054720327204864). Also [jsgif](http://slbkbs.org/jsgif/) for viewing animated GIFs. I got hooked on those two, so I keep my bookmarks toolbar open permanently. – Šime Vidas Sep 30 '13 at 04:53
6

I wonder if Paul Irish has ever answered a question, and *NOT* been marked as the right answer.... – Steve Oct 22 '13 at 19:11
@ŠimeVidas the "tampermonkey" extension is a similar tool I've recently discovered that can run js code based on url. – Jay Jun 18 '14 at 14:57
I've noticed that Snippets haven't been included in Canary for quite some time now. Does anyone know why? – 17xande Aug 05 '14 at 08:10
How can a snippet be run from a bookmarklet? (Is it even possible to do so? Perhaps there is or could be a Chrome browser extension that can help expose them to bookmarklet javascript? Snippets have marketed as an [alternative to bookmarklets](https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=en), but they aren't quite an alternative for me if they can't be as easily executed from a web page as a bookmarklet.) – Jon Freed Jul 26 '16 at 12:48
Unless or until snippets can be accessed from things like a bookmarklet, folks can use local js files instead of snippets as is described at http://stackoverflow.com/questions/10611796/is-there-any-way-to-load-a-local-js-file-dynamically/10612311#10612311 – Jon Freed Jul 27 '16 at 07:52
@ŠimeVidas: Unfortunately, I could not find any faster way. I would have hoped for finding them in the IntelliSense-like popup while coding in the console. – O. R. Mapper Apr 10 '17 at 14:42
@ŠimeVidas 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. – Paul Irish Aug 04 '17 at 17:13
2

@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 04 '17 at 19:30

score 12 · Answer 2 · answered May 08 '12 at 13:53

12

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.

answered May 08 '12 at 13:53

JaredMcAteer

17,451
4
45
60

7

It's almost done. It allows effectively a multiline console but with saveable/nameable input. – Paul Irish May 17 '12 at 16:48
I figured as much, I'm really excited about this feature. – JaredMcAteer May 17 '12 at 20:53
Better answer by vidar a few answers below – android.nick Jun 08 '12 at 04:33
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 09 '12 at 07: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 '15 at 16:19

score 9 · Answer 3 · answered Nov 12 '12 at 12:34

9

Right click to create a new one.

Chrome DevTools Snippets — New

answered Nov 12 '12 at 12:34

NVI

13,771
16
60
102

score 5 · Answer 4 · answered Jul 06 '12 at 20:17

5

Chrome Developer Tools snippets support allows to create/edit/save and execute javascript code snippets.

answered Jul 06 '12 at 20:17

vsevik

9,129
3
16
11

3

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 06 '12 at 20:19

score 3 · Answer 5 · edited Dec 28 '12 at 10:22

3

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.

edited Dec 28 '12 at 10:22

Sudarshan

16,642
7
46
59

answered May 08 '12 at 13:21

Vidar S. Ramdal

1,001
1
12
35

Chrome Developer Tools snippets support is a completely different feature. – vsevik Jul 06 '12 at 20:14

score 3 · Answer 6 · answered Aug 19 '13 at 09:49

3

You can find the list of useful snippets here http://bgrins.github.io/devtools-snippets/

one of the useful snippet is 'jquerify.js' - Using this you can include jQuery in to any page if it is not yet included.

answered Aug 19 '13 at 09:49

NavaRajan

1,820
1
16
22

Chrome Developer Tools: What is Snippets Support?

6 Answers6

Linked