Javascript Chrome 开发者工具：什么是片段支持？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10470711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chrome Developer Tools: What is Snippets Support?
提问by Jo Liss
As of version 19, Chrome's Web Inspector has an experimental feature called "snippets support". Here is how to activate it:
从版本 19 开始，Chrome 的 Web Inspector 具有一项名为“代码段支持”的实验性功能。以下是激活它的方法：
Open chrome:flags, enable "Developer Tools experiments", restart.
Open Web Inspector (Developer Tools), hit the settings gear icon in the lower right corner, enable "Snippets support", restart.
Open the Scripts panel, click the "navigator tree" icon on the left, and find an empty Snippets tab.
打开 chrome:flags，启用“开发者工具实验”，重启。
打开Web Inspector（开发者工具），点击右下角的设置齿轮图标，启用“Snippets support”，重启。
打开 Scripts 面板，单击左侧的“导航树”图标，然后找到一个空的 Snippets 选项卡。
My question is: What can I use this for? How can I populate this with snippets?
我的问题是：我可以用它做什么？我怎样才能用片段填充它？
回答by Paul Irish
In short, snippets are a multi-line console, an iterative JS development workflow, and a persistent store for common debugging helpers.
简而言之，snippets 是一个多行控制台，一个迭代的 JS 开发工作流，以及一个用于常见调试助手的持久存储。
developers.google.com/chrome-developer-tools/docs/authoring-development-workflow#snippets
developer.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.
片段可以帮助的一些用例是：
- Bookmarklets- 您的所有书签都可以存储为片段，尤其是那些您可能希望编辑的片段。
- 实用程序- 可以存储和调试用于与当前页面交互的调试助手。可以使用社区策划的此类实用程序列表。
- 调试- Snippets 提供了一个多行控制台，具有语法突出显示和持久性，使得调试不仅仅是一行代码的代码更加方便。
- Monkey-patching code- 您希望在运行时修补的代码可以通过 Snippets 完成，尽管很多时候您可以在 Sources 选项卡中实时编辑代码。
Lastly, I've personally been collecting a few common snippets that you may include in your arsenal: github.com/paulirish/devtools-addons/wiki/Snippets
最后，我个人一直在收集一些您可能包含在您的武器库中的常见片段：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.
要快速运行代码段，现在您可以这样做。Ctrl-Shift-P 用于“命令面板”，然后退格，并使用 ! 前缀，然后键入要运行的任何片段名称。
回答by JaredMcAteer
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 ticketand looking at some of the code the diffs have a lot of FIXME: To be implemented.comments.
我问保罗爱尔兰他是否对此有所了解，他也不确定，但他说它还没有完全实现，并指出错误跟踪器，我找到了头票并查看了一些差异有很多的代码FIXME: To be implemented.注释。
回答by NVI
Right click to create a new one.
右键单击以创建一个新的。
回答by vsevik
Chrome Developer Tools snippets support allows to create/edit/save and execute javascript code snippets.
Chrome 开发者工具片段支持允许创建/编辑/保存和执行 javascript 代码片段。
回答by Vidar S. Ramdal
I'm unable to activate that experiment myself (there's no Developer Tools experimentsin my chrome:flags, but from Safari, I found thisexplanation:
我无法激活实验自己（有没有Developer Tools experiments我chrome:flags，但是从Safari浏览器，我发现这个解释：
In short, it "is a little utility that allows you to enter blocks of HTML and CSS and have it rendered on the fly".
简而言之，它“是一个小实用程序，允许您输入 HTML 和 CSS 块并使其即时呈现”。
From the blog post, it seems it is buggy in Safari, so maybe Chrome has not implemented it yet.
从博客文章来看，它似乎在 Safari 中存在问题，所以可能 Chrome 还没有实现它。
回答by NavaRajan
You can find the list of useful snippets here http://bgrins.github.io/devtools-snippets/
你可以在这里找到有用的片段列表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.
其中一个有用的代码段是“jquerify.js”——使用它你可以将 jQuery 包含到任何页面中（如果它尚未包含）。
