Chrome Developer Tools: What is Snippets Support?

问题:

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.

   

3. 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?

回答1:

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.

回答2:

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.

回答3:

Right click to create a new one.

回答4:

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

回答5:

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.

回答6:

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.