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

76

从版本19开始，Chrome的Web检查器具有一项实验性功能，称为“代码段支持”。这是激活它的方法：

打开chrome：flags，启用“开发人员工具实验”，然后重新启动。
打开Web Inspector（开发人员工具），点击右下角的设置齿轮图标，启用“代码段支持”，然后重新启动。
打开“脚本”面板，单击左侧的“导航器树”图标，然后找到一个空的摘录选项卡。

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

javascript google-chrome-devtools web-inspector

— 乔·利斯
source

4

现在，片段上有非常完整的文档：developers.google.com/chrome-developer-tools/docs/…欣赏

— Paul Irish，

@PaulIrish链接的页面不再包含摘录部分。

— 阿米戈

85

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

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

片段可以帮助解决的一些用例是：

书签-您所有的书签都可以存储为片段，尤其是您可能希望编辑的片段。

实用程序-可以存储和调试用于与当前页面进行交互的调试助手。提供了此类实用程序的社区管理列表。

调试-片段提供了一个多行控制台，具有语法高亮和持久性，使调试代码的便利性超出了单行代码。

猴子修补代码-您希望在运行时修补的代码可以通过片段来完成，尽管很多时候您只能在“源”标签中实时编辑代码。

最后，我个人一直在收集一些可能包含在军火库中的常见片段：github.com/paulirish/devtools-addons/wiki/Snippets

要快速运行摘要，现在您可以执行此操作。按住Ctrl-Shift-P键即可显示“命令选项板”，然后按退格键，并使用！前缀，然后输入要运行的代码段名称。

— 保罗·爱尔兰
source

3

执行摘要的最快方法是什么？我可以按Ctrl + Shift + I（打开DevTools），按Ctrl + P（模糊搜索），开始输入代码段名称，按Enter（打开代码段），按Ctrl + ENTER（执行代码段）。我希望我能缺少一些东西，并且有一种更快的方法。浏览器中的“片段工具栏”会很好。

— 席梅·维达斯

@ŠimeVidas是我知道的最快方式。您经常使用哪种代码片段，以便快速拨号？

— Paul Irish

我需要这个人来观看YouTube ：javascript:(function(){location.href=location.href.replace('youtube.com/watch','youtube.com/watch_popup')}())。（我没有Flash，YouTube仅为我在其“ watch_popup”页面中加载HTML5视频。请参阅此处：twitter.com/simevidas/status/368054720327204864）。也是查看动画GIF的jsgif。我迷上了这两个，所以我的书签工具栏一直保持打开状态。

— 森那维达斯

6

我不知道保罗爱尔兰曾经回答一个问题，不被标记为正确的答案....

— 史蒂夫

2

@PaulIrish或Ctrl-P，因此该字段为空，您不必删除>。谢谢你的提示！

— 席姆·维达斯

12

我问保罗爱尔兰，如果他知道这事，他也不清楚，但表示，它尚未完全实现，并指出我的bug跟踪系统，我发现头车票，并寻找一些代码来制作diff有很多FIXME: To be implemented.评论。

— 杰瑞德·麦克阿特
source

7

差不多了它有效地支持多行控制台，但具有可保存/可命名的输入。

— 保罗·爱尔兰

我想了很多，对此功能感到非常兴奋。

— JaredMcAteer

通过vidar更好的回答以下一些答案

— android.nick

用户界面目前很粗糙。在Windows上，您只能使用Ctrl + S保存片段（只需确保焦点位于右侧窗口）。不过，似乎没有运行该代码段的捷径。

— 斯特凡

Chrome将您的代码段存储在本地存储中，因此我认为您无法在外部轻松地对其进行编辑。最好的选择是在外部编辑并复制到devtools中。

— JaredMcAteer 2015年

9

右键单击以创建一个新的。

Chrome DevTools片段-新增

— NVI
source

5

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

— 维塞维克
source

3

现在，此功能可在最新版本的chrome上使用，但UI尚未很好。片段可以从导航器上下文菜单中进行操作。

— vsevik

3

我自己无法启动该实验（Developer Tools experiments我的实验中没有chrome:flags，但是从Safari浏览器中，我找到了以下解释：

简而言之，它是“一个小工具，可让您输入HTML和CSS块并进行实时渲染”。

从博客文章来看，似乎在Safari中存在错误，因此Chrome可能尚未实现。

— 维达尔·S·拉姆达尔
source

Chrome开发者工具摘要支持是一项完全不同的功能。

— vsevik

3

您可以在以下位置找到有用的代码片段列表：http://bgrins.github.io/devtools-snippets/

有用的代码段之一是“ jquerify.js”-使用此代码，您可以将jQuery包含在任何页面中（如果尚未包含在内）。

— 纳瓦·拉詹（NavaRajan）
source