运行 JavaScript 代码段

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

以下是记录一些消息并将首页的 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. 依次前往 Sources（来源）> 更多标签页。 > Snippets（代码段）。

    “Sources”窗格中的“More tabs”菜单。

  2. 在命令菜单中：

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

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

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

空白的“Snippets”窗格。

创建结构化摘要

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

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

在“Sources”面板中创建代码段

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

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

    为代码段命名。

通过命令菜单创建代码段

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

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

    从命令菜单中选择“Create new snippet”（创建新代码段）。

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

修改摘要

  1. 打开代码段窗格。

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

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

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

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

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

运行代码段

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

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

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

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

    “运行”按钮。

从命令菜单运行代码段

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

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

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

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

重命名摘要

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

删除代码段

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