运行 JavaScript 代码段

Sofia Emelianova
Sofia Emelianova

如果您发现自己在控制台中反复运行同一代码,不妨考虑将代码保存为代码段。代码段可以访问网页的 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. 依次前往来源 &gt; 更多标签页。 &gt; 代码段

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

  2. 命令菜单中:

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

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

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

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

创建结构化摘要

您可以在 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. 点击编辑器底部的操作栏中的 运行。 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. 右键点击代码段名称,然后选择移除