运行 JavaScript 代码片段
|
freeflydom
2023年7月29日 9:52
本文热度 717
|
如果你发现自己反复使用 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 面板展示你保存的片段列表，下面截图的例子是空列表。
创建 snippets
你可以通过在 Snippets 面板中创建片段。或者，通过 在 DevTools 任意位置打开**命令菜单（Command Menu）运行相应的命令行。
PS: 译者添加，这里的 DevTools 指的是鼠标右键 “检查” 出现的调试工具集，而不是站点 DevTools。下面出现的 DevTools 同理。
Snippets 面板会按照（文件名）字母顺序排列你的片段。
在 Sources 面板创建一个片段
打开 Snippets 面板。 (若不熟悉，见上操作👆)
点击 ➕ New snippets。
输入片段的名字并按回车保存。
从命令菜单创建一个片段
在 DevTools 内聚焦你的光标。
按下 Control+Shift+P (Windows/Linux) 或者 Command+Shift+P (Mac) 来打开命令菜单。
开始输入 Snippet，选择 create new snippet 选项，然后按下回车键去执行命令。
如果你不喜欢程序自定义片段的名称，请查看下面重命名 snippets 小节。
编辑 snippets
打开 Snippets 面板
在 Snippets 面板中，点击你想要编辑的片段。Sources 面板会在 Code Editor 中打开它。
使用 Code Editor 去编辑你的片段代码。出现星号*在你片段名称的旁边，说明你还没有保存你更改的片段。
按下 Control+S (Windows/Linux) 或者 Command+S (Mac) 去保存。
运行 snippets
和创建一个片段类似，你可以通过 Snippets 面板，或者从命令面板中运行它。
在 Snippets 面板中运行一个片段
打开 Snippets 面板。
点击你想运行的一个片段。Sources 会在 Code Editor 中打开它。
点击编辑器底部操作栏的 ▶️ 按钮运行，或者按下 Control+Enter (Windows/Linux) 或 Command+Enter (Mac)。
从命令菜单运行一个片段
在 DevTools 内聚焦你的光标。
按下 Control+O (Windows/Linux) 或者 Command+O (Mac) 去打开命令菜单。
输入 ! 字符，后面紧跟着你想运行的片段名称。
按下回车键运行该片段。
重命名 snippets
打开 Snippets 面板。
右击片段名称，然后选择重命名。
删除 snippets
打开 Snippets 面板。
右击片段名称，然后选择移除。
原文链接
该文章在 2023/7/29 9:52:24 编辑过
400 186 1886
