javascript – Chrome Developer Tools: What is Snippets Support?-ThrowExceptions

Exception or error:

As of version 19, Chrome’s Web Inspector has an experimental feature called “snippets support”. Here is how to activate it:

  1. Open chrome:flags, enable “Developer Tools experiments”, restart.

  2. Open Web Inspector (Developer Tools), hit the settings gear icon in the lower right corner, enable “Snippets support”, restart.

    enable snippets support

  3. Open the Scripts panel, click the “navigator tree” icon on the left, and find an empty Snippets tab.

    snippets tab

My question is: What can I use this for? How can I populate this with snippets?

How to solve:

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

###

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 DevTools Snippets — New

###

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

###

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.

###

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.

Leave a Reply

Your email address will not be published. Required fields are marked *