Chrome开发者工具：什么是Snippets支持？

Question

从版本19开始，Chrome的Web Inspector具有称为“片段支持”的实验性功能。以下是如何激活它：

1. 打开chrome：flags，启用“开发者工具实验”，重新启动。

2. 打开Web Inspector（开发人员工具），点击右下角的设置齿轮图标，启用“Snippets support”，重启。

   

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

   

我的问题是：我可以用它做什么？如何使用片段填充此内容？

Answer 1

简而言之，片段是一个多行控制台，一个迭代的JS开发工作流程，以及一个用于常见调试助手的持久存储。

<强> developers.google.com/chrome-developer-tools/docs/authoring-development-workflow#snippets

  

一些用例Snippets可以提供帮助：

     

  
• Bookmarklets - 您的所有书签都可以存储为片段，尤其是您可能希望编辑的那些。
  
• 实用程序 - 可以存储和调试用于与当前页面交互的调试助手。可以获得社区策划的此类实用程序列表。
  
• 调试 - 片段提供了一个具有语法高亮和持久性的多行控制台，方便调试不仅仅是单行的代码。
  
• 猴子修补代码 - 您希望在运行时修补的代码可以通过代码段完成，但很多时候您可以在“源代码”选项卡中实时编辑代码。
  

最后，我个人一直在收集一些您可能包含在您的武器库中的常见摘要：github.com/paulirish/devtools-addons/wiki/Snippets

---

要快速运行代码段，现在就可以执行此操作。 Ctrl-Shift-P为“命令调色板”，然后退格，并使用！前缀，然后键入要运行的片段名称。

Answer 2

我问保罗爱尔兰他是否对此有所了解，他也不确定但是说它还没有完全实现，并指出我在错误跟踪器上，我找到了头ticket并且看了一些代码差异有很多FIXME: To be implemented.条评论。

Answer 3

右键单击以创建新的。

Answer 4

Chrome开发者工具代码段支持允许创建/编辑/保存和执行javascript代码段。

Answer 5

我自己无法激活该实验（我的Developer Tools experiments中没有chrome:flags，但是从Safari中我发现this解释：

简而言之，它“是一个小实用程序，允许您输入HTML和CSS的块并让它在运行中呈现”。

从博客文章来看，似乎它在Safari中存在问题，因此Chrome可能还没有实现它。

Answer 6

您可以在http://bgrins.github.io/devtools-snippets/

找到有用的摘录列表

其中一个有用的片段是'jquerify.js' - 使用它可以将jQuery包含在任何页面中（如果它尚未包含在内）。