Chrome开发者工具:什么是片段支持?

从版本19开始,Chrome的Web Inspector有一个名为“snippets support”的实验性function。 以下是如何激活它:

  1. 打开chrome:标志,启用“开发者工具实验”,重启。

  2. 打开Web Inspector(开发工具),点击右下angular的设置齿轮图标,启用“Snippets支持”,重新启动。

    启用片段支持

  3. 打开“脚本”面板,单击左侧的“导航树”图标,然后find一个空的片段标签。

    片段选项卡

我的问题是: 我可以使用这个? 我怎样才能用片段填充这个?

简而言之,片段是一个多线控制台,一个迭代的JS开发工作stream程,以及一个常用debugging助手的持久存储区。

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

一些使用案例片段可以帮助的是:

  • Bookmarklets – 所有的书签都可以存储为片段,尤其是那些您可能希望编辑的片段。
  • 实用程序 – 与当前页面交互的debugging助手可以被存储和debugging。 一个社区策划的这样的工具清单是可用的。
  • debugging – 片段提供了一个multithreading控制台,语法高亮和持久性,使代码debugging更加方便。
  • 猴子补丁代码 – 您希望在运行时修补的代码可以通过代码片段来完成,但很多时候您可以直接在源代码标签中编辑代码。

截图

最后,我亲自收集了一些可能包含在你的武库中的常见片段: github.com/paulirish/devtools-addons/wiki/Snippets


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

在这里输入图像说明

我问保罗爱尔兰人是否知道这件事,他也不确定是不是还没有完全实现,并指出我错误跟踪器,我find了机票 ,看看差异有很多代码FIXME: To be implemented. 注释。

右键点击创build一个新的。

Chrome DevTools片段 - 新的

Chrome开发者工具代码片段支持允许创build/编辑/保存并执行JavaScript代码片段。

我无法自己激活该实验(在我的chrome:flags没有“ Developer Tools experiments chrome:flags ,但是从Safari中find了这个解释:

简而言之,它是一个小工具,可以让你inputHTML和CSS块,并且可以随时进行渲染。

从博客文章来看,它似乎是Safari中的bug,所以也许Chrome还没有实现它。

你可以在这里find有用的代码片段http://bgrins.github.io/devtools-snippets/

其中一个有用的片段是“jquerify.js” – 使用这个你可以将jQuery包含到任何页面中,如果它还没有被包含的话。