Javascript Chrome开发者工具：代码片段支持什么？

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

打开chrome:flags，启用“开发者工具实验”，重新启动

打开Web检查器（开发人员工具），点击右下角的设置工具图标，启用“代码段支持”，重新启动

打开“脚本”面板，单击左侧的“导航器树”图标，找到一个空的“代码段”选项卡

---

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

我自己无法激活那个实验（在我的

chrome:flags

中没有

开发工具实验

，但在Safari中，我找到了解释：

简而言之，它“是一个小实用程序，允许您输入HTML和CSS块并动态呈现”

---

从博客帖子上看，Safari中似乎有bug，所以可能Chrome还没有实现它。

我问Paul Irish是否知道它，他也不确定，但他说它还没有完全实现，并指向bug追踪器，我找到了头部，查看了一些代码。Diff有很多

修复：待修复已实施。

注释。

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

右键单击创建新代码段

---

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

一些用例片段可以帮助您完成以下任务：

• Bookmarklets-您的所有Bookmarklets都可以存储为片段，尤其是您可能希望编辑的片段
• 实用程序-可以存储和调试用于与当前页面交互的调试帮助程序。可以使用社区管理的此类实用程序列表
• 调试-代码段提供了一个多行控制台，具有语法突出显示和持久性，便于调试多行代码
• 猴子修补代码-您希望在运行时修补的代码可以通过代码片段完成，尽管很多时候您可以在“源”选项卡中实时编辑代码

最后，我个人收集了一些常见的片段，你可以将它们包括在你的武器库中：

---

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

---

您可以在这里找到有用的代码片段列表

---

其中一个有用的代码片段是“jqueryify.js”-使用它，您可以将jQuery包含到任何尚未包含的页面中。

差不多完成了。它有效地支持多行控制台，但具有可保存/可命名的输入。我也这么认为，我真的对这一功能感到兴奋。更好的答案是vidar下面的几个答案UI目前很粗糙。OnWindows您只能使用Ctrl+S保存代码段（只需确保焦点位于正确的窗口）。但是，似乎没有运行代码段的快捷方式。Chrome将您的代码段存储在localstorage中，因此我认为您无法从外部轻松编辑它们。您最好的选择是从外部编辑并复制到devtools中。Chrome Developer Tools代码段支持是一项完全不同的功能。此功能目前正在最新版本中使用但用户界面还不是很好。可以从导航器上下文菜单中操作代码段。现在代码段上有大量完整的文档：Enjoy@PaulIrish链接的页面不再包含代码片段部分。执行代码片段的最快方式是什么？我可以使用Ctrl+Shift+I（打开DevTools）、Ctrl+P（模糊搜索）来执行，开始键入代码段名称，回车（打开代码段），Ctrl+ENTER（执行代码段）。我希望我遗漏了什么，还有一个更快的方法。浏览器中的“代码段工具栏”会更好。@ŠimeVidas这是我知道的最快的方法。你经常使用什么代码段，你想在快速拨号上使用它？我需要这个来观看YouTube:

javascript:

（我没有Flash，youtube只在其“watch\u popup”页面为我加载HTML5视频。请参见此处：）。也用于查看动画GIF。我迷上了这两个选项，所以我一直保持书签工具栏的打开状态。我想知道Paul Irish是否回答过问题，并且没有被标记为正确答案…@paurish或Ctrl-P，因此字段是空的，您不必删除

。谢谢您的提示！