运行 JavaScript 代码段

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

运行代码段之前的开发者工具文档首页。“Run”按钮处于突出显示状态。

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

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 键。

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

来源>摘要窗格会显示您已保存的摘要列表，在本例中为空。

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

创建结构化摘要

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

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

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

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

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

    为代码段命名。

从命令菜单创建代码段

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

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

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

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

修改摘要

  1. 打开代码段窗格。

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

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

  3. 使用代码编辑器修改代码段中的代码。摘要名称旁的星号表示您尚未保存更改。

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

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

运行代码段

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

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

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

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

    “Run”按钮。

从命令菜单运行代码段

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

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

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

  4. 按 Enter 键运行代码段。

重命名摘要

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

删除摘要

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