執行 JavaScript 程式碼片段

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

如果您發現自己會在控制台中重複執行相同的程式碼，建議您改為將程式碼儲存為程式碼片段。程式碼片段可存取網頁的 JavaScript 內容。這是書籤小程式的替代做法。

您可以在「來源」面板撰寫摘要，然後在任何網頁和無痕模式中執行這些片段。

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

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

以下是用於記錄某些訊息的程式碼片段原始碼，並將首頁的 HTML 內文替換為含有訊息的 <p> 元素：

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

點選 執行。「Run」按鈕時，主控台會彈出，顯示程式碼片段記錄的 Hello, Snippets! 訊息，以及頁面內容變更。

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

開啟「程式碼片段」窗格

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

  1. 依序前往「來源」> 更多分頁。 >「程式碼片段」。

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

  2. 在「Command 選單」中：

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

    從指令選單中選取「顯示程式碼片段」。

「Sources」>「Snippets」窗格會顯示您儲存的程式碼片段清單，如本範例所示，此處為空白。

空白的「文字片段」窗格。

建立網站簡介

如要建立程式碼片段，您可以在「文字片段」窗格中建立程式碼片段，也可以在開發人員工具的任一處透過指令選單執行對應指令。

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

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

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

  3. 輸入網站簡介名稱，然後按下 Enter 儲存。

    命名程式碼片段。

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

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

  3. 開始輸入 Snippet，選取「建立新程式碼片段」，然後按下 Enter 鍵執行指令。

    選取指令選單中的「建立新片段」。

如要為新程式碼片段指定自訂名稱，請參閱「重新命名程式碼片段」一文。

編輯程式碼片段

  1. 開啟「Snippets」窗格。

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

    在 Code Editor 中開啟的程式碼片段。

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

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

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

執行程式碼片段

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

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

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

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

    「執行」按鈕。

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

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

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

    透過 [開啟] 選單執行程式碼片段。

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

重新命名程式碼片段

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

刪除程式碼片段

  1. 開啟「Snippets」窗格。
  2. 在網站簡介名稱上按一下滑鼠右鍵，然後選取「移除」。