本頁面由 Cloud Translation API 翻譯而成。

執行 JavaScript 程式碼片段

Kayce Basques

Sofia Emelianova

如果您發現自己會在控制台中重複執行相同的程式碼，建議您改為將程式碼儲存為程式碼片段。程式碼片段可存取網頁的 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. 按下 Control + Shift + P 鍵 (Windows/Linux) 或 Command + Shift + P 鍵 (Mac) 即可開啟指令選單。
2. 開始輸入 Snippets，選取「顯示程式碼片段」，然後按下 Enter 鍵。

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

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

建立網站簡介

您可以在「程式片段」窗格中建立程式片段，也可以在「指令選單」中執行 DevTools 中任何位置的指令。

「程式碼片段」窗格會依字母順序排序程式碼片段。

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

開啟「Snippets」窗格。
按一下「新增程式碼片段」。
輸入程式碼片段的名稱，然後按下 Enter 鍵即可儲存。

將游標移至開發人員工具中的任何位置。
按下 Control + Shift + P 鍵 (Windows/Linux) 或 Command + Shift + P 鍵 (Mac) 即可開啟指令選單。
開始輸入 Snippet，選取「建立新程式碼片段」，然後按下 Enter 鍵執行指令。