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

執行 JavaScript 程式碼片段

Kayce Basques

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! 訊息。

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

開啟「程式碼片段」窗格

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

依序前往「來源」> 「>」>「程式碼片段」。
在「Command 選單」中：
1. 按下 Control + Shift + P 鍵 (Windows/Linux) 或 Command + Shift + P 鍵 (Mac) 即可開啟 Command 選單。
2. 輸入 Snippets 並選取「顯示程式碼片段」，然後按下 Enter 鍵。

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

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

建立網站簡介

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

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

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

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

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