运行 JavaScript 代码段

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

您可以在 Sources 面板中编写代码段，并在任何网页和无痕模式下运行这些代码段。

例如，下图显示了左侧的开发者工具文档首页，以及右侧的 Sources > Snippets 窗格中的部分代码段源代码。

运行代码段之前的 DevTools 文档首页。“Run”按钮突出显示。

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

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

点击 运行。 Run 按钮后，控制台抽屉会弹出，显示该代码段记录的 Hello, Snippets! 消息，并且网页的内容会发生变化。

运行代码段后的首页。

打开“代码段”窗格

代码段窗格会列出您的代码段。如需修改代码段，请通过以下两种方式之一打开该代码段：

  1. 依次选择 Sources > 更多标签页。 > Snippets。

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

  2. 在命令菜单中：

    1. 按 Control+Shift+P（Windows/Linux）或 Command+Shift+P（Mac）打开命令菜单。
    2. 开始输入 Snippets，选择显示摘要，然后按 Enter 键。

    从命令菜单中选择“显示摘要”。

来源>代码段窗格会显示您保存的代码段列表，此示例中为空。

空的“代码段”窗格。

创建结构化摘要

您可以在 Snippets 窗格中创建代码段，也可以在 DevTools 中的任意位置通过运行 Command Menu 中的相应命令来创建代码段。

摘要窗格会按字母顺序对摘要进行排序。

在“来源”面板中创建摘要

  1. 打开代码段窗格。
  2. 点击 新代码段。 New snippet（新建代码段）。

  3. 为该代码段输入名称，然后按 Enter 键进行保存。

    为代码段命名。

通过“命令”菜单创建代码段

  1. 将光标放在 DevTools 中的任意位置。
  2. 按 Control+Shift+P（Windows/Linux）或 Command+Shift+P（Mac）打开命令菜单。

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

    从“命令”菜单中选择“创建新的代码段”。

如果您想为新摘要片段指定自定义名称，请参阅重命名摘要片段。

修改代码段

  1. 打开代码段窗格。

  2. 在代码段窗格中，点击要修改的代码段的名称。Sources 面板会在 Code Editor 中打开该文件。

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

  3. 使用代码编辑器修改代码段中的代码。如果代码段名称旁边显示了星号，则表示您尚未保存所做更改。

    代码段名称旁边显示的星号表示未保存的代码。

  4. 按 Control+S（Windows/Linux）或 Command+S（Mac）保存。

运行代码段

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

在“来源”面板中运行代码段

  1. 打开代码段窗格。
  2. 点击要运行的代码段的名称。Sources 面板会在 Code Editor 中打开该文件。

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

    “Run”按钮。

从“命令”菜单运行代码段

  1. 将光标放在 DevTools 中的任意位置。
  2. 按 Control+O（Windows/Linux）或 Command+O（Mac）打开命令菜单。

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

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

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

重命名代码段

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

删除代码段

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