執行 JavaScript 程式碼片段

凱斯巴斯克文
Kayce Basques
Twitter GitHub Glitch
索菲亞艾梅利安諾瓦
Sofia Emelianova
GitHub

如果您發現自己在控制台中反覆執行相同的程式碼，請考慮改為將這段程式碼儲存為程式碼片段。程式碼片段可以存取網頁的 JavaScript 內容。它們是書籤小程式的替代方案。

您可以在「來源」面板中撰寫摘要，並在任何頁面和無痕模式中執行。

舉例來說，下方螢幕截圖的左側顯示開發人員工具說明文件首頁，右側則是「來源」>「程式碼片段」窗格中的部分程式碼片段原始碼。

執行程式碼片段之前的開發人員工具說明文件首頁。醒目顯示「Run」按鈕。

以下程式碼片段原始碼會記錄部分訊息，並將首頁的 HTML 內文替換為包含訊息的 <p> 元素：

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

當您按一下 執行。「Run」按鈕後，「Console」(控制台) 導覽匣會彈出，顯示程式碼片段記錄的 Hello, Snippets! 訊息，以及頁面內容變更。

執行程式碼片段後所在的首頁。

開啟「程式碼片段」窗格

「程式碼片段」窗格會列出您的程式碼片段。如要編輯程式碼片段，請透過下列其中一種方式開啟：

  1. 依序前往 [來源] > 更多分頁， > [程式碼片段]。

    「來源」窗格中的「更多」分頁選單。

  2. 在指令選單中：

    1. 按下 Control + Shift + P 鍵 (Windows/Linux) 或 Command + Shift + P 鍵 (Mac)，開啟 Command 選單。
    2. 輸入 Snippets 並選取「顯示程式碼片段」，然後按下 Enter 鍵。

    選取指令選單中的 [顯示程式碼片段]。

「來源」>「程式碼片段」窗格會顯示已儲存的摘要清單，在本例中為空白。

空白的「程式碼片段」窗格。

建立網站簡介

您可以在「程式碼片段」窗格中建立程式碼片段，或是在開發人員工具中的任何位置透過指令選單執行對應的指令。

「摘要」窗格會按照字母順序排序程式碼片段。

在「來源」面板中建立程式碼片段

  1. 開啟「程式碼片段」窗格。
  2. 按一下「新增程式碼片段」新程式碼片段。。

  3. 輸入程式碼片段名稱，然後按下 Enter 鍵即可儲存。

    為程式碼片段命名。

透過指令選單建立程式碼片段

  1. 將遊標移到開發人員工具內的任何位置。
  2. 按下 Control + Shift + P 鍵 (Windows/Linux) 或 Command + Shift + P 鍵 (Mac)，開啟 Command 選單。

  3. 只要輸入 Snippet 並選取「建立新的程式碼片段」，然後按下 Enter 鍵，即可執行指令。

    在指令選單中選取「新建程式碼片段」。

若要為新的程式碼片段自訂名稱，請參閱「重新命名程式碼片段」。

編輯摘要

  1. 開啟「程式碼片段」窗格。

  2. 在「程式碼片段」窗格中，按一下要修改的程式碼片段名稱。「Sources」(來源) 面板會在「Code Editor」(程式碼編輯器) 中開啟。

    在程式碼編輯器中開啟的程式碼片段。

  3. 使用程式碼編輯器修改程式碼片段中的程式碼。如果程式碼片段名稱旁邊標有星號，表示您尚未儲存變更。

    程式碼片段名稱旁邊以星號，表示尚未儲存的程式碼。

  4. 按下 Control + S 鍵 (Windows/Linux) 或 Command + S 鍵 (Mac) 即可儲存。

執行程式碼片段

與建立程式碼片段類似，您可以在「程式碼片段」窗格和「指令選單」中執行。

在「來源」面板中執行程式碼片段

  1. 開啟「程式碼片段」窗格。
  2. 按一下要執行的程式碼片段名稱。「Sources」(來源) 面板會在「Code Editor」(程式碼編輯器) 中開啟。

  3. 在編輯器底部的動作列中，按一下 執行。「Run」(執行)，或是按下 Control + Enter 鍵 (Windows/Linux) 或 Command + Enter 鍵 (Mac)。

    「Run」按鈕。

透過指令選單執行程式碼片段

  1. 將遊標移到開發人員工具內的任何位置。
  2. 按下 Control + O 鍵 (Windows/Linux) 或 Command + O 鍵 (Mac)，開啟 Command 選單。

  3. 輸入 ! 字元，後面加上您要執行的程式碼片段名稱。

    從「開啟」選單執行程式碼片段。

  4. 按下 Enter 鍵即可執行程式碼片段。

重新命名程式碼片段

  1. 開啟「程式碼片段」窗格。
  2. 在程式碼片段名稱上按一下滑鼠右鍵，然後選取「重新命名」。

刪除文字片段

  1. 開啟「程式碼片段」窗格。
  2. 在程式碼片段名稱上按一下滑鼠右鍵，然後選取「移除」。