執行 JavaScript 程式碼片段

Sofia Emelianova
Sofia Emelianova

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

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

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

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

以下是記錄部分訊息的程式碼片段原始碼,並以內含該訊息的 <p> 元素取代首頁的 HTML 內文:

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. 依序前往「來源」&gt; 更多分頁。「>」&gt;「程式碼片段」

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

  2. 「Command 選單」中:

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

    從「Command」選單選取「顯示程式碼片段」。

「來源」&gt;「程式碼片段」窗格會顯示已儲存的網站簡介清單,在本例中為空白。

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

建立網站簡介

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

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

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

  1. 開啟「文字片段」窗格
  2. 按一下「新增程式碼片段」圖示 新的程式碼片段。
  3. 輸入網站簡介名稱,然後按下 Enter 儲存。

    為片段命名。

透過「Command」選單建立程式碼片段

  1. 將遊標移到開發人員工具中的任一處,
  2. 按下 Control + Shift + P 鍵 (Windows/Linux) 或 Command + Shift + P 鍵 (Mac) 即可開啟 Command 選單
  3. 開始輸入 Snippet,然後選取「建立新程式碼片段」,再按下 Enter 鍵執行指令。

    從「Command」選單選取「建立新的程式碼片段」。

如要重新命名新摘要,請參閱重新命名簡介

編輯程式碼片段

  1. 開啟「文字片段」窗格
  2. 在「程式碼片段」窗格中,按一下要修改的程式碼片段名稱。「Sources」面板會在「Code Editor」中開啟。

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

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

    程式碼片段名稱旁標有星號,指出未儲存的程式碼。

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

執行程式碼片段

就像建立程式碼片段一樣,您可以在「文字片段」窗格和「指令選單」中執行。

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

  1. 開啟「文字片段」窗格
  2. 按一下要執行的程式碼片段名稱。「Sources」面板會在「Code Editor」中開啟。
  3. 在編輯器底部的動作列中,按一下「執行。。 或按下 Control + Enter 鍵 (Windows/Linux) 或 Command + Enter 鍵 (Mac)。

    「Run」按鈕。

透過「Command」選單執行程式碼片段

  1. 將遊標移到開發人員工具中的任一處,
  2. 按下 Control + O 鍵 (Windows/Linux) 或 Command + O 鍵 (Mac) 開啟 Command 選單
  3. 輸入 ! 字元,後面加上您要執行的程式碼片段名稱。

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

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

重新命名程式碼片段

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

刪除程式碼片段

  1. 開啟「文字片段」窗格
  2. 在網站簡介名稱上按一下滑鼠右鍵,然後選取「移除」