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

谁践踏了优雅 2022-12-23 13:29 138阅读 0赞

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

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

![图1][1]

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

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

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

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

![图2][2]

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

## 打开 Snippets 面板 ##

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

![图3][3]

图3 .“片段”面板。

### 用鼠标打开 Snippets 面板 ###

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

![图4][4]

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

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

### 用命名菜单打开 Snippets 面板 ###

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

![图5][5]

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

## 创建 Snippets ##

### 通过“Sources”面板创建 Snippets ###

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

![图6][6]

图6 .命名片段。

### 通过命令菜单面板创建 Snippets ###

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

![图7][7]

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

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

## 编辑 Snippet ##

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

![图8][8]

图8 .代码编辑器。

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

![图9][9]

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

## 运行 Snippet ##

### 通过“Sources”面板运行 Snippets ###

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

### 通过命令菜单面板运行 Snippets ###

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

![图10][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

[1]: /images/20221120/d2779dca702546789eb4958ac200e6ad.png
[2]: /images/20221120/fbef09831a0e4622acba96b0aacdc4a6.png
[3]: https://img-blog.csdnimg.cn/img_convert/40a8422bc4460230bd1532f56a28b3a0.png
[4]: https://img-blog.csdnimg.cn/img_convert/f1590386a0ed73441995614e7bcba324.png
[5]: https://img-blog.csdnimg.cn/img_convert/8eb8b784856efdbf647e7b88564c9e69.png
[6]: https://img-blog.csdnimg.cn/img_convert/3af7cadb83213d8ed106743f3ba0a56c.png
[7]: https://img-blog.csdnimg.cn/img_convert/5f40064c5e711c04abb74eba64b1592d.png
[8]: https://img-blog.csdnimg.cn/img_convert/025eee8798fc00e076a787b84a36b657.png
[9]: https://img-blog.csdnimg.cn/img_convert/7b518ccc52c1e303d90950a914534a51.png
[10]: https://img-blog.csdnimg.cn/img_convert/280753c5263e442d12837393bf474cbc.png
[Run Snippets Of JavaScript On Any Page With Chrome DevTools]: https://developers.google.com/web/tools/chrome-devtools/javascript/snippets#runsources