Chrome 开发工具: 什么是代码片段支持？

从第19版开始，Chrome 的网页检查器有了一个名为“代码片段支持”的实验性功能:

  1. 打开 chrome: 标志，启用“开发工具实验”，重新启动。

  2. 打开 Web 检查器(开发工具) ，点击右下角的设置齿轮图标，启用“片段支持”，重新启动。

    enable snippets support

  3. 打开 Scripts 面板，单击左侧的“导航树”图标，找到一个空的 Snipppet 选项卡。

    snippets tab

我的问题是: 我可以用它做什么? 我如何用代码片段填充它？

24628 次浏览
小开

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.

小开

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.

小开

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

小开

Right click to create a new one.

Chrome DevTools Snippets — New

小开
最佳答案

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

小开

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.


提交答案