运行 JavaScript 代码片段

原文链接 ​​Run snippets of JavaScript​​ -- 作者 ​​Kayce Basques​​ & ​​Sofia Emelianova​​

如果你发现自己反复使用 ​​Console​​ 来运行同一份代码，那么你应该考虑将代码保存成片段。​​Snippets​​​ 是你在 ​​Source 面板​​中创建的脚本。这些脚本可以获取到页面的 ​​JavaScript​​ 上下文，你可以在任意页面运行它们。代码片段就是书签​​bookmarklets​​的替代品。

举个例子，如下截图所示，页面左侧展示了 ​​DevTools​​ 站点文档主页，页面的右侧展示了 Sources > Snippets 板块的片段源代码。

下面是上图片段源代码​​记录信息​​。该功能是使用包含信息的 ​​<p>​​​ 元素来替换主页 ​​HTML​​​ 的主体 ​​body​​。

console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

当你点击 ▶️ 运行按钮，​​控制台抽屉​​ 会弹出，输出 ​​Hello, Snippets!​​ 代码信息，且页面的内容发生更改。

打开 Snippets 面板

Snippets 面板罗列了你的所有片段。你可以采用下面的两种方法之一打开该面板：

• 根据 Sources > 》 > Snippets 导航指引打开。

• 通过 ​​命令菜单​

1. 按下快捷键 ​​Control​​​+​​Shift​​​+​​P​​​ (Windows/Linux) 或者 ​​Command​​​+​​Shift​​​+​​P​​ (Mac) 打开命令菜单。
2. 输入 ​​Snippets​​，选择 Show Snippets 选项，然后按回车。

Sources > Snippets 面板展示你保存的片段列表，下面截图的例子是空列表。

创建 snippets

你可以通过在 ​​Snippets​​​ 面板中创建片段。或者，通过 在 ​​DevTools​​ 任意位置打开**命令菜单（Command Menu）运行相应的命令行。

PS: 译者添加，这里的 ​​DevTools​​​ 指的是鼠标右键 “检查” 出现的调试工具集，而不是​​站点 DevTools​​。下面出现的 ​​DevTools​​ 同理。

Snippets 面板会按照（文件名）字母顺序排列你的片段。

在 Sources 面板创建一个片段

1. 打开 Snippets 面板。​​ (若不熟悉，见上操作
   标签：片段,打开,代码,JavaScript,按下,snippets,面板,Snippets
   From： https://blog.51cto.com/u_11966691/5890700