运行 JavaScript 代码段

凯切·巴斯克斯
Kayce Basques
Twitter GitHub Glitch
索菲亚·埃梅利安诺娃
Sofia Emelianova
GitHub

如果您发现自己在控制台中反复运行相同的代码，不妨考虑将代码保存为代码段。代码段能够访问网页的 JavaScript 上下文。它们是小书签的替代方法。

您可以在来源面板中编写摘要，并在任何网页上以无痕模式运行这些摘要。

例如，下面的屏幕截图在左侧显示了开发者工具文档首页，在右侧 Sources > 代码段窗格中显示了一些代码段源代码。

在运行代码段之前，先查看开发者工具文档首页。突出显示“Run”按钮。

以下代码段源代码可记录一些消息，并将首页的 HTML 正文替换为包含该消息的 <p> 元素：

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

点击 运行。 Run 按钮后，系统会弹出 Console 抽屉，以显示代码段记录的 Hello, Snippets! 消息，并且页面的内容会发生更改。

运行代码段后的首页。

打开“代码段”窗格

代码段窗格会列出您的代码段。要修改某个代码段，请通过以下两种方式之一将其打开：

  1. 依次转到来源 > 更多标签页。 > 代码段。

    “来源”窗格中的“更多”标签页菜单。

  2. 从命令菜单中：

    1. 按 Ctrl+Shift+P (Windows/Linux) 或 Command+Shift+P (Mac) 打开命令菜单。
    2. 开始输入 Snippets，选择显示代码段，然后按 Enter 键。

    从命令菜单中选择“显示代码段”。

Sources>Snippets 窗格会显示您已保存的代码段列表，在此示例中为空。

一个空的“代码段”窗格。

创建结构化摘要

您可以在 Snippets 窗格中创建代码段，或者通过在开发者工具中的任意位置从命令菜单运行相应的命令来创建代码段。

Snippets 窗格会按字母顺序对您的代码段进行排序。

在“来源”面板中创建代码段

  1. 打开代码段窗格。
  2. 点击 新建代码段。 新建代码段。

  3. 输入摘要的名称，然后按 Enter 保存。

    为代码段命名。

从命令菜单创建代码段

  1. 将光标置于开发者工具内的任意位置。
  2. 按 Ctrl+Shift+P (Windows/Linux) 或 Command+Shift+P (Mac) 打开命令菜单。

  3. 开始输入 Snippet，选择创建新的代码段，然后按 Enter 运行该命令。

    从命令菜单中选择“Create new snippet”。

如果您想为新的代码段指定一个自定义名称，请参阅重命名代码段。

修改摘要

  1. 打开代码段窗格。

  2. 在代码段窗格中，点击您要修改的代码段的名称。Sources 面板会在代码编辑器中打开该面板。

    在代码编辑器中打开的代码段。

  3. 使用代码编辑器修改代码段中的代码。摘要名称旁边会显示一个星号，表示您尚未保存您所做的更改。

    摘要名称旁边会显示一个星号，表示代码未保存。

  4. 按 Ctrl+S (Windows/Linux) 或 Command+S (Mac) 进行保存。

运行代码段

与创建代码段类似，您可以在代码段窗格和命令菜单中运行该代码段。

在“Sources”面板中运行代码段

  1. 打开代码段窗格。
  2. 点击要运行的代码段的名称。Sources 面板会在代码编辑器中打开该面板。

  3. 点击编辑器底部操作栏中的 运行。 Run，或按 Ctrl+Enter (Windows/Linux) 或 Command+Enter (Mac)。

    “Run”按钮。

从命令菜单运行代码段

  1. 将光标置于开发者工具内的任意位置。
  2. 按 Ctrl+O (Windows/Linux) 或 Command+O (Mac) 打开命令菜单。

  3. 输入 ! 字符，然后输入要运行的代码段的名称。

    从“打开”菜单运行代码段。

  4. 按 Enter 键以运行代码段。

重命名代码段

  1. 打开代码段窗格。
  2. 右键点击代码段名称，然后选择重命名。

删除摘要

  1. 打开代码段窗格。
  2. 右键点击相应代码段名称，然后选择移除。