使用Chrome开发工具在任何页面上运行JavaScript片段

如果您发现自己在控制台中重复运行相同的代码,请考虑将代码保存为代码片段。Snippets是您在“源”面板中创作的脚本。他们可以访问页面的JavaScript上下文,您可以在任何页面上运行他们。Snippets是书签的替代。火狐开发工具有一个类似于代码片段的特性,叫做草稿栏。

例如,图1在左边显示了开发工具主页,在右边显示了一些代码片段源代码。

图1

图1。运行代码片段前页面的外观。

下面是图1中的代码片段源代码:

console.log('Hello, Snippets!');
document.body.innerHTML = '';
var p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);
1
2
3
4
5

图2显示了运行代码片段后页面的外观。控制台抽屉弹出,显示你好,片段!代码段记录的消息,页面内容完全改变。

图2

图2 .运行代码片段后页面的外观。

打开 Snippets 面板

“片段”面板列出了您的片段。当您想要编辑片段时,您需要从片段面板中打开它。

图3

图3 .“片段”面板。

用鼠标打开 Snippets 面板

  1. 单击“源”选项卡打开“源”面板。默认情况下,“页面”面板通常会打开。

图4

图4 .左侧打开页面面板的“源”面板。

  1. 单击“片段”选项卡打开“片段”面板。您可能需要单击“更多选项卡”才能访问“片段”选项。

用命名菜单打开 Snippets 面板

  1. 将光标放在开发工具内部的某个地方。
  2. Control + Shift + PCommand + Shift + P (Mac)打开命令菜单。
  3. 开始键入片段,选择显示片段,然后按回车键运行命令。

图5

图5 .“显示片段”命令。

创建 Snippets

通过“Sources”面板创建 Snippets

  1. 打开Snippets面板
  2. 点击New snippet
  3. 输入代码片段的名称,然后按回车键保存。

图6

图6 .命名片段。

通过命令菜单面板创建 Snippets

  1. 将光标放在开发工具内部的某个地方。
  2. Control + Shift + PCommand + Shift + P (Mac)打开命令菜单。
  3. 开始键入代码段,选择Create new snippet,然后按回车键运行命令。

图7

图7 .创建新代码段的命令。

如果您想给新代码段一个自定义名称,请参见重命名代码段

编辑 Snippet

  1. 打开Snippet面板。
  2. Snippet面板中,单击要编辑的代码段的名称,以便在Code Editor(代码编辑器)中打开它。

图8

图8 .代码编辑器。

  1. 使用代码编辑器将JavaScript添加到您的代码片段中。
  2. 当代码片段的名称旁边有星号时,表示您有未保存的代码。按Control + S 或者 Command + S (Mac)保存。

图9

图9。代码段名称旁边的星号,表示未保存的代码。

运行 Snippet

通过“Sources”面板运行 Snippets

  1. 打开Snippet面板。
  2. 单击要运行的代码片段的名称。代码段在代码编辑器中打开。
  3. 点击Run Snippet▶,或按Control+Enter 或者 Control+Enter (Mac)

通过命令菜单面板运行 Snippets

  1. 将光标放在开发工具内部的某个地方。
  2. Control + Shift + PCommand + Shift + P (Mac)打开命令菜单。
  3. 删除>字符并键入字符,后跟要运行的代码段的名称。

图10

图10。从命令菜单运行代码片段。

  1. 按回车键运行代码片段。

重命名 Snippet

  1. 打开Snippet面板。
  2. 右键单击代码段名称,然后选择重命名。

删除 Snippet

  1. 打开Snippet面板。
  2. 右键单击代码段名称,然后选择删除。

原文来源:Run Snippets Of JavaScript On Any Page With Chrome DevTools By Kayce Basques, Technical Writer, Chrome DevTools & Lighthouse

最后更新时间: 8/1/2019, 12:16:28 PM