Chrome Developer Tools: What is Snippets Support?

Asked 6/5, 2012 at 13:1 Answered 19/8, 2013 at 9:49

Solved javascript google-chrome-devtools web-inspector

In the "Sources" tab of Chrome dev tools, there is a Snippets sub-tab:

The image shows a screenshot of a web browser's developer tools interface, specifically the 'Sources' tab. The tab is divided into several sections: Page, Workspace, Overrides, Content scripts, and Snippets. The focus is on the 'Snippets' section, which is highlighted with a red arrow pointing to it. There is a message below the tabs explaining that you can 'Save the JavaScript code you run often to run it again anytime,' and a link to 'Learn more' about this feature.

What can I use this for?

Septavalent answered 6/5, 2012 at 13:1 Comment(2)

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

@PaulIrish The link's page doesn't contain snippets part anymore. – Fia 27/10, 2016 at 18:15

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.

Curve answered 7/5, 2013 at 18:15 Comment(11)

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. – Nowt 29/9, 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? – Curve 30/9, 2013 at 4:7

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. – Nowt 30/9, 2013 at 4:53

I wonder if Paul Irish has ever answered a question, and NOT been marked as the right answer.... – Chetnik 22/10, 2013 at 19:11

@ŠimeVidas the "tampermonkey" extension is a similar tool I've recently discovered that can run js code based on url. – Hudgins 18/6, 2014 at 14:57

I've noticed that Snippets haven't been included in Canary for quite some time now. Does anyone know why? – Lieb 5/8, 2014 at 8: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, but they aren't quite an alternative for me if they can't be as easily executed from a web page as a bookmarklet.) – Toland 26/7, 2016 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 #10612296 – Toland 27/7, 2016 at 7: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. – Cowell 10/4, 2017 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. – Curve 4/8, 2017 at 17:13

@PaulIrish Or Ctrl-P, so that the field is empty and you don't have to delete the >. Thanks for the tip! – Nowt 4/8, 2017 at 19:30

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.

Clipped answered 8/5, 2012 at 13:53 Comment(5)

It's almost done. It allows effectively a multiline console but with saveable/nameable input. – Curve 17/5, 2012 at 16:48

I figured as much, I'm really excited about this feature. – Clipped 17/5, 2012 at 20:53

Better answer by vidar a few answers below – Polypody 8/6, 2012 at 4: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. – Sobel 9/10, 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. – Clipped 19/2, 2015 at 16:19

Right click to create a new one.

Chrome DevTools Snippets — New

Ullyot answered 12/11, 2012 at 12:34 Comment(0)

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

Spam answered 6/7, 2012 at 20:17 Comment(1)

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. – Spam 6/7, 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.

Illustrious answered 8/5, 2012 at 13:21 Comment(1)

Chrome Developer Tools snippets support is a completely different feature. – Spam 6/7, 2012 at 20:14

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.

Chiefly answered 19/8, 2013 at 9:49 Comment(0)

Recommended topics

Hot tags