使用Chrome開發工具在任何頁面上運作JavaScript片段

如果您發現自己在控制台中重複運作相同的代碼，請考慮将代碼儲存為代碼片段。

Snippets

是您在“源”面闆中創作的腳本。他們可以通路頁面的JavaScript上下文，您可以在任何頁面上運作他們。

Snippets

是書簽的替代。火狐開發工具有一個類似于代碼片段的特性，叫做草稿欄。

例如，圖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 .運作代碼片段後頁面的外觀。

打開 Snippets 面闆

“片段”面闆列出了您的片段。當您想要編輯片段時，您需要從片段面闆中打開它。

圖3 .“片段”面闆。

用滑鼠打開 Snippets 面闆

1. 單擊“源”頁籤打開“源”面闆。預設情況下，“頁面”面闆通常會打開。

圖4 .左側打開頁面面闆的“源”面闆。

1. 單擊“片段”頁籤打開“片段”面闆。您可能需要單擊“更多頁籤”

   》

   才能通路“片段”選項。

用命名菜單打開 Snippets 面闆

1. 将光标放在開發工具内部的某個地方。
2. 按

   Control + Shift + P

   或

   Command + Shift + P (Mac)

   打開指令菜單。
3. 開始鍵入片段，選擇顯示片段，然後按Enter鍵運作指令。

圖5 .“顯示片段”指令。

建立 Snippets

通過“Sources”面闆建立 Snippets

1. 打開

   Snippets

   面闆
2. 點選

   New snippet

3. 輸入代碼片段的名稱，然後按Enter鍵儲存。

圖6 .命名片段。

通過指令菜單面闆建立 Snippets

1. 将光标放在開發工具内部的某個地方。
2. 按

   Control + Shift + P

   或

   Command + Shift + P (Mac)

   打開指令菜單。
3. 開始鍵入代碼段，選擇

   Create new snippet

   ，然後按Enter鍵運作指令。

圖7 .建立新代碼段的指令。

如果您想給新代碼段一個自定義名稱，請參見重命名代碼段。

編輯 Snippet

1. 打開

   Snippet

   面闆。
2. 在

   Snippet

   面闆中，單擊要編輯的代碼段的名稱，以便在

   Code Editor

   （代碼編輯器）中打開它。

圖8 .代碼編輯器。

1. 使用代碼編輯器将JavaScript添加到您的代碼片段中。
2. 當代碼片段的名稱旁邊有星号時，表示您有未儲存的代碼。按

   Control + S

   或者

   Command + S (Mac)

   儲存。

圖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。從指令菜單運作代碼片段。

1. 按Enter鍵運作代碼片段。

重命名 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