76

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?

2

6 Answers 6

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.

snippets screenshot

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.

enter image description here

11
  • 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. 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. Sep 30, 2013 at 4:53
  • 6
    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
  • 2
    @PaulIrish Or Ctrl-P, so that the field is empty and you don't have to delete the >. Thanks for the tip! Aug 4, 2017 at 19:30
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.

5
  • 7
    It's almost done. It allows effectively a multiline console but with saveable/nameable input.
    – Paul Irish
    May 17, 2012 at 16:48
  • I figured as much, I'm really excited about this feature. May 17, 2012 at 20:53
  • Better answer by vidar a few answers below Jun 8, 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.
    – 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. Feb 19, 2015 at 16:19
9

Right click to create a new one.

Chrome DevTools Snippets — New

0
5

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

1
  • 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 6, 2012 at 20:19
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.

1
  • Chrome Developer Tools snippets support is a completely different feature.
    – vsevik
    Jul 6, 2012 at 20:14
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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.