运行 JavaScript 代码段

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

运行代码段之前的开发者工具文档首页。“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. 依次前往来源 &gt; 更多标签页。 &gt; 代码段。

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

  2. 在命令菜单中：

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

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

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

空的“代码段”窗格。

创建结构化摘要

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

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

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

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

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

    为代码段命名。

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

  1. 将光标放在 DevTools 中的任意位置。
  2. 按 Ctrl+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）保存。

运行代码段

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

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

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

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

    “Run”按钮。

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

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

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

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

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

重命名摘要

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

删除代码段

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