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

如果要在 控制台 工具中重复输入相同的代码,请考虑将代码保存为代码片段,然后运行代码片段。 代码片段是在源工具中创作 脚本。 代码段有权访问网页的 JavaScript 上下文,并且可以在任何网页上运行代码片段。 代码片段可用于更改网页,例如更改其内容或外观,或提取数据。

以下屏幕截图显示Microsoft Edge,左侧有一个网页,右侧有一个 DevTools。 “源”工具处于打开状态,显示“代码段”选项卡中选择的代码片段的源代码。代码片段已运行,对网页进行更改:

网页,由代码片段更改

代码片段源代码如下所示:

// Change the background color to "dimgrey".
document.body.style.backgroundColor = "dimgrey";

// Add a paragraph at the bottom of the document.
const p = document.createElement("p");
p.textContent = "Hello world";
p.style.color = "white";
p.style.fontSize = "2rem";
document.body.appendChild(p);

// Log a message to the console.
console.log("Hello world");

该代码将网页的背景色更改为暗淡,在网页底部添加新的文本行,并将消息记录到 控制台 工具。

在网页上运行代码段时,代码片段的源代码将添加到当前网页。 有关更改网页的现有代码而不是添加新代码的详细信息,请参阅 使用本地副本替代网页资源 (替代选项卡)

将所有代码包含在一个文件中

大多数网页的安全设置阻止在代码片段中加载其他脚本。 因此,必须将所有代码包含在一个文件中。

打开“代码段”选项卡

代码段”选项卡与“导航”窗格中的“页面”选项卡分组,位于“源”工具左侧。

打开“ 代码段 ”选项卡:

  1. 若要打开 DevTools,请右键单击网页,然后选择“检查”。 或者,按 Ctrl+Shift+I(Windows、Linux)或 Command+Option+I (macOS)。 DevTools 随即打开。

  2. 在 DevTools 的 “活动栏”上,选择“ ”选项卡。如果该选项卡不可见,请单击“ 更多工具 (更多工具”图标) 按钮。

    左侧打开“页面”选项卡的“源”工具

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

从命令菜单打开“代码片段”选项卡

还可以使用命令菜单打开“代码片段”选项卡:

  1. 选择 DevTools 中的任何内容,使 DevTools 具有焦点。

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

  3. 开始键入“代码段”,选择“ 显示代码段”,然后按 Enter 运行命令:

    显示代码片段命令

创建代码片段

可以从代码段工具中创建代码,也可以通过 DevTools 中任意位置的命令菜单运行“创建新代码段”命令来创建代码段。

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

在源工具中创建代码片段

若要从“代码段”选项卡创建新 代码段,请 执行以下命令:

  1. 打开“代码段”选项卡

  2. 单击“ 新建代码片段 (+) ”。

  3. 输入代码片段的名称,然后按 Enter

    源工具中新的空代码片段

从命令菜单创建代码片段

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

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

  3. 开始键入“代码段”,选择“ 创建新代码段”,然后按 Enter

    用于创建新代码段的命令

若要重命名新代码段,请参阅下面的 重命名代码段

编辑代码片段

编辑代码片段的源代码:

  1. 打开“代码段”选项卡

  2. 在“ 代码段 ”选项卡中,单击要编辑的代码段的名称。 代码片段将在代码编辑器中打开:

    代码编辑器

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

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

    代码片段名称旁边的星号指示未保存的代码

允许粘贴到代码片段编辑器中

首次尝试将内容粘贴到 “源 ”工具 >“”代码段 “选项卡 > 代码段编辑器中时,将显示” 你是否信任此代码?“ 对话框,并显示消息:”不要将自己不理解或尚未查看的代码粘贴到 DevTools 中。 这可能允许攻击者窃取你的身份或控制你的计算机。 请在下方键入“允许粘贴”以允许粘贴。”

源工具的“代码段”选项卡编辑器显示自 XSS 警告

此警告有助于防止对最终用户进行自我跨站点脚本攻击 (自 XSS) 。 若要粘贴代码,请先在对话框的文本框中键入 允许粘贴 ,然后单击“ 允许 ”按钮。 然后粘贴内容。 或者,使用以下标志启动 Edge。

粘贴到控制台工具中类似:请参阅在控制台中运行 JavaScript 中允许粘贴到控制台中。

通过使用命令行标志启动 Edge 来禁用自 XSS 警告

若要防止出现上述警告并立即允许粘贴到 控制台 工具和 工具的代码片段编辑器(例如自动测试),请使用以下标志从命令行启动 Microsoft Edge: --unsafely-disable-devtools-self-xss-warnings。 标志适用于 Microsoft Edge 的单个会话。

例如,在 Windows 上:

边缘稳定:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Edge Beta 版:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge Beta\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Edge Dev:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge Dev\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Edge Canary:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge SxS\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

运行代码片段

从源工具运行代码片段

  1. 打开“代码段”选项卡

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

  3. 单击“ 运行代码片段 (运行代码段) ”按钮,或按 Ctrl+Enter (Windows、Linux) 或 Command+Enter (macOS) :

    代码编辑器底部的“运行代码片段”按钮

从命令菜单运行代码片段

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

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

  3. 删除字符 > 并键入 字符,后跟要运行的代码片段的名称:

    从命令菜单运行代码片段

  4. Enter 运行代码片段。

重命名代码片段

  1. 打开“代码段”选项卡

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

删除代码片段

  1. 打开“代码段”选项卡

  2. 右键单击代码片段名称,然后选择“ 删除”。

将代码片段作为文件保存到磁盘

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

  1. 打开“代码段”选项卡

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

    “另存为”对话框随即打开。

  3. 选择文件夹,输入文件名 ((例如 Script snippet #1.js) ),然后单击“ 保存 ”按钮。

注意

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在此处 找到,由凯斯·巴斯克创作。

Creative Commons 许可证 本作品根据 Creative Commons Attribution 4.0 International License 获得许可。