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

Question

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

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

2. 打开Web Inspector（开发者工具），点击右下角的设置齿轮图标，启用“片段支持”，重新启动。

   

3. 打开脚本面板，在左侧点击“导航树”图标，找到一个空白的片段选项卡。

   

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

- Jo Liss

---

现在关于代码片段有非常完整的文档：https://developers.google.com/chrome-developer-tools/docs/authoring-development-workflow#snippets。请享用。 - Paul Irish

@PaulIrish 这个链接的页面不再包含片段部分了。 - amigo

Answer 1

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

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

一些 Snippets 可以帮助的用例包括：

• 书签脚本 - 所有你想要编辑的书签脚本都可以存储为 Snippets。
• 实用工具 - 可以存储并调试与当前页面交互的调试辅助程序。有一个社区策划的这样的工具列表可供使用。
• 调试 - Snippets 提供了一个带有语法突出显示和持久性的多行控制台，方便调试超过一行的代码。
• 猴子补丁代码 - 通过 Snippets 可以在运行时对要修补的代码进行处理，但很多时候你可以在源标签页中直接编辑代码。

最后，我个人收集了一些常用的代码片段，你可以将它们加入到你的工具库中：github.com/paulirish/devtools-addons/wiki/Snippets。

---

为了快速运行代码片段，现在你可以这样做。使用 Ctrl-Shift-P 打开 "命令面板"，然后退格键，使用 ! 前缀，并输入想要运行的代码片段名称。

- Paul Irish

---

执行代码片段的最快方式是什么？我可以按 Ctrl+Shift+I（打开开发者工具），Ctrl+P（模糊搜索），开始输入片段名称，回车（打开片段），Ctrl+Enter（执行片段）。但我希望还有一种更快的方法。在浏览器中添加一个“片段工具栏”会很不错。 - Šime Vidas

@ŠimeVidas 这是我知道的最快的方法。你经常使用哪个代码片段，以至于想要将其设置为快捷键呢？ - Paul Irish

我需要这个来观看YouTube：javascript:(function(){location.href=location.href.replace('youtube.com/watch','youtube.com/watch_popup')}())。（我没有Flash，而且YouTube只在“watch_popup”页面加载HTML5视频。请参见此处：https://twitter.com/simevidas/status/368054720327204864）。还有[jsgif](http://slbkbs.org/jsgif/)用于查看动画GIF。我对这两个东西上瘾了，所以我会一直保持我的书签工具栏打开。 - Šime Vidas

我在想保罗·艾利希曾否回答过一个问题，但 没有 被标记为正确答案… - Steve

@PaulIrish 或者 Ctrl-P，这样该字段就会为空，您就不必删除 > 了。感谢您的提示！ - Šime Vidas

Answer 2

我询问了 Paul Irish，他也不确定，但是他说这还没有完全实现，并指向了 bug 跟踪器。我找到了主要的 票据，通过查看其中一些代码，我们可以看到许多 diffs 中有许多 FIXME: To be implemented. 的注释。

- JaredMcAteer

---

快做完了。它可以有效地允许多行控制台，但可保存/命名输入。 - Paul Irish

我早就猜到了，我对这个功能非常兴奋。 - JaredMcAteer

更好的答案在 vidar 在几个回答下面。 - android.nick

UI 目前比较粗糙。在 Windows 上，您只能使用 Ctrl+S 保存代码片段（确保焦点在正确的窗口上）。似乎没有快捷键来运行代码片段。 - Stefan

Chrome将您的代码片段存储在本地存储中，因此我认为您无法轻松地在外部编辑它们。最好的方法是在外部进行编辑，然后将其复制到开发工具中。 - JaredMcAteer

Answer 3

右键点击创建一个新的。

- NVI

Answer 4

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

- vsevik

---

该功能现在可以在最新版本的 Chrome 上使用，但是用户界面还不够友好。代码片段可以通过导航器上下文菜单进行操作。 - vsevik

Answer 5

我无法自己激活该实验（我的chrome:flags中没有开发者工具实验），但是从Safari中，我找到了这个解释：简而言之，它“是一个小工具，允许您输入HTML和CSS块，并在飞行中呈现它”。 从博客文章中看来，在Safari中存在一些问题，所以也许Chrome还没有实现它。

- Vidar S. Ramdal

---

Chrome开发者工具片段支持是完全不同的功能。 - vsevik

Answer 6

您可以在此处找到有用片段的列表http://bgrins.github.io/devtools-snippets/。

其中一个有用的片段是'jquerify.js' - 使用它，您可以在任何页中包含jQuery，如果它还未被包括在内。

- NavaRajan