在任何网页上运行 JavaScript 的代码片段

如果在 控制台 中重复运行相同的代码，请考虑改为将代码保存为代码片段。 代码片段是在源工具中创作 的 脚本。 代码片段有权访问网页的 JavaScript 上下文，并且可以在任何网页上运行代码段。 大多数网页的安全设置阻止在代码片段中加载其他脚本。 因此，必须将所有代码包含在一个文件中。

代码片段是 书签的 替代方法，不同之处在于代码段仅在 DevTools 中运行，并且不限于 URL 的允许长度。

使用代码片段是在第三方网页中更改一些内容的绝佳方法。 代码片段中的代码更改将添加到当前网页并在同一上下文中运行。 有关更改网页现有代码的详细信息，请参阅 替代。

下图显示了左侧的 DevTools 主页，右侧显示了一些代码片段源代码。

运行代码片段之前的网页：

运行代码段之前，网页中的代码片段源代码：

在下图中，运行代码片段后会显示网页。 控制台抽屉弹出以显示代码段日志的 Hello， Snippets！ 消息，并且网页内容已完全更改：

左侧“导航器”窗格中的“代码段”选项卡列出了代码段。 如果要编辑代码段，需要从“ 代码段 ”选项卡打开它：

选择“ 源 ”选项卡。此时将显示 “源” 工具：

在左侧) 的“ 导航器 ”窗格中 (，选择“ 代码段 ”选项卡。若要访问“ 代码段 ”选项，可能需要单击“ 更多选项卡 () 按钮。

选择 DevTools 中的任何内容，使 DevTools 具有焦点。

按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 打开命令菜单。

键入 “代码段”，选择“ 显示代码段”，然后按 Enter 运行命令：

打开“代码段”选项卡。

单击“ 新建代码段”。

输入代码段的名称，然后按 Enter：

将光标聚焦在 DevTools 中的某个位置。

按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 打开命令菜单。

开始键入 代码段，选择“ 创建新代码段”，然后按 Enter：

若要使用自定义名称重命名新代码段，请参阅 重命名代码段。

打开“代码段”选项卡。

在“ 代码段 ”选项卡中，选择要编辑的代码段的名称。 代码片段将在 代码编辑器中打开：

使用 代码编辑器 将 JavaScript 添加到代码片段。

当代码片段名称旁边显示星号时，表示你具有未保存的代码。 按 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 保存：

打开“代码段”选项卡。

单击要运行的代码片段的名称。 代码片段将在 代码编辑器中打开：

单击“ 运行代码片段 () ”。

将光标聚焦在 DevTools 中的某个位置。

按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 打开命令菜单。

删除字符 > 并键入 ！ 字符，后跟要运行的代码段的名称：

按 Enter 运行代码片段。

打开“代码段”选项卡。

右键单击代码片段名称，然后选择“ 重命名”。

打开“代码段”选项卡。

右键单击代码段名称，然后选择“ 删除”。

默认情况下，代码片段仅在 DevTools 中可用，但你也可以将它们保存到磁盘。

打开“代码段”选项卡。

右键单击代码片段名称，然后选择“ 另存为”。

出现提示时输入文件名和位置。

注意

此页面的部分内容是基于 Google 创建和 共享 的工作进行的修改，并根据 Creative Commons 署名 4.0 国际许可中所述的条款使用。 原始页面 在此处 找到，由 凯斯·巴斯克 (技术作家、Chrome DevTools & Lighthouse) 创作。

此作品根据 Creative Commons 署名 4.0 国际许可获得许可。