运行 JavaScript 代码片段

原文链接 Run snippets of JavaScript -- 作者 Kayce Basques & Sofia Emelianova

如果你发现自己反复使用 Console 来运行同一份代码，那么你应该考虑将代码保存成片段。Snippets 是你在 Source 面板中创建的脚本。这些脚本可以获取到页面的 JavaScript 上下文，你可以在任意页面运行它们。代码片段就是书签bookmarklets的替代品。

举个例子，如下截图所示，页面左侧展示了 DevTools 站点文档主页，页面的右侧展示了 Sources > Snippets 板块的片段源代码。

下面是上图片段源代码记录信息。该功能是使用包含信息的 <p> 元素来替换主页 HTML 的主体 body。

console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

当你点击 ▶️ 运行按钮，控制台抽屉 会弹出，输出 Hello, Snippets! 代码信息，且页面的内容发生更改。

打开 Snippets 面板

Snippets 面板罗列了你的所有片段。你可以采用下面的两种方法之一打开该面板：

• 根据 Sources > 》 > Snippets 导航指引打开。

• 通过 命令菜单
  • 1. 按下快捷键 Control+Shift+P (Windows/Linux) 或者 Command+Shift+P (Mac) 打开命令菜单。
  • 2. 输入 Snippets，选择 Show Snippets 选项，然后按回车。

Sources > Snippets 面板展示你保存的片段列表，下面截图的例子是空列表。

创建 snippets

你可以通过在 Snippets 面板中创建片段。或者，通过 在 DevTools 任意位置打开**命令菜单（Command Menu）运行相应的命令行。

PS: 译者添加，这里的 DevTools 指的是鼠标右键 “检查” 出现的调试工具集，而不是站点 DevTools。下面出现的 DevTools 同理。

Snippets 面板会按照（文件名）字母顺序排列你的片段。

在 Sources 面板创建一个片段

1. 打开 Snippets 面板。 (若不熟悉，见上操作👆)
2. 点击 ➕ New snippets。
3. 输入片段的名字并按回车保存。

从命令菜单创建一个片段

1. 在 DevTools 内聚焦你的光标。
2. 按下 Control+Shift+P (Windows/Linux) 或者 Command+Shift+P (Mac) 来打开命令菜单。
3. 开始输入 Snippet，选择 Create new snippet 选项，然后按下回车键去执行命令。

如果你不喜欢程序自定义片段的名称，请查看下面重命名 snippets 小节。

编辑 snippets

1. 打开 Snippets 面板
2. 在 Snippets 面板中，点击你想要编辑的片段。Sources 面板会在 Code Editor 中打开它。

3. 使用 Code Editor 去编辑你的片段代码。出现星号*在你片段名称的旁边，说明你还没有保存你更改的片段。

4. 按下 Control+S (Windows/Linux) 或者 Command+S (Mac) 去保存。

运行 snippets

和创建一个片段类似，你可以通过 Snippets 面板，或者从命令面板中运行它。

在 Snippets 面板中运行一个片段

1. 打开 Snippets 面板。
2. 点击你想运行的一个片段。Sources 会在 Code Editor 中打开它。
3. 点击编辑器底部操作栏的 ▶️ 按钮运行，或者按下 Control+Enter (Windows/Linux) 或 Command+Enter (Mac)。

从命令菜单运行一个片段

1. 在 DevTools 内聚焦你的光标。
2. 按下 Control+O (Windows/Linux) 或者 Command+O (Mac) 去打开命令菜单。
3. 输入 ! 字符，后面紧跟着你想运行的片段名称。

4. 按下回车键运行该片段。

重命名 snippets

1. 打开 Snippets 面板。
2. 右击片段名称，然后选择重命名。

删除 snippets

1. 打开 Snippets 面板。
2. 右击片段名称，然后选择移除。