在任何網頁上執行 JavaScript 代碼段

發行項
01/16/2024

如果您重複在 主控台 工具中輸入相同的程式碼，請考慮改為將程式代碼儲存為代碼段，然後執行代碼段。代碼段是您在來源工具中撰寫的腳本。代碼段可以存取網頁的 JavaScript 內容，而且您可以在任何網頁上執行代碼段。代碼段可用來改變網頁，例如變更其內容或外觀，或擷取數據。

下列螢幕快照顯示Microsoft Edge，其中左側有網頁，而DevTools位於右側。 [來源] 工具已開啟，顯示 [代碼段] 索引標籤中所選取代碼段的原始程式碼。代碼段已執行，對網頁進行變更：

由代碼段改變的網頁

代碼段原始碼如下所示：

// Change the background color to "dimgrey".
document.body.style.backgroundColor = "dimgrey";

// Add a paragraph at the bottom of the document.
const p = document.createElement("p");
p.textContent = "Hello world";
p.style.color = "white";
p.style.fontSize = "2rem";
document.body.appendChild(p);

// Log a message to the console.
console.log("Hello world");

程序代碼會將網頁的背景色彩變更為 dimgrey、在網頁底部新增一行文字，並將訊息記錄到 控制台 工具。

當您在網頁上執行代碼段時，代碼段的原始程式碼會新增至目前的網頁。如需變更網頁現有程序代碼而非新增程式碼的詳細資訊，請參閱使用本機複本覆寫網頁資源 (覆寫索引卷標) 。

將所有程式代碼包含在一個檔案中

大部分網頁的安全性設定會封鎖在代碼段中載入其他腳本。因此，您必須在一個檔案中包含所有程序代碼。

開啟 [代碼段] 索引標籤

[代碼段] 索引標籤會以 [來源] 工具左側 [導覽器] 窗格中的 [頁面] 索引標籤分組。

若要開啟 [ 代碼段] 索引標籤 ：

若要開啟 DevTools，請以滑鼠右鍵按兩下網頁，然後選取 [ 檢查]。或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 隨即開啟。
在 DevTools 的 [ 活動列] 上，選取 [ 來源] 索引標籤 。如果看不到該索引標籤，請按兩下 [ 其他工具 ] ([ ) 按鈕。
在左側 () 的 [ 導覽器 ] 窗格中，選取 [ 代碼段] 索引卷 標。若要存取 [代碼段 ] 選項，您可能需要按兩下 [ 更多 ] 索引標籤 ([其他] 索按鈕。

您也可以使用 [命令選單] 開啟 [ 代碼段 ] 索引標籤：

在 DevTools 中選取任何專案，讓 DevTools 擁有焦點。
按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 以開啟 [命令] 功能表。
開始輸入「代碼段」，選取 [ 顯示代碼段]，然後按 Enter 執行命令：

建立新的代碼段

若要從 [代碼段] 索引標籤建立新的代碼段：

開啟 [代碼段] 索引標籤。
點選 單擊 [新增代碼段 (+) ] 。
輸入代碼段的名稱，然後按 Enter：

將游標聚焦在 DevTools 的某處。
按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 以開啟 [命令] 功能表。
開始輸入 “snippet”，選取 [ 建立新的代碼段]，然後按 Enter：

若要重新命名新的代碼段，請參閱下方的重新命名代碼段。

編輯代碼段

若要編輯代碼段的原始碼：

開啟 [代碼段] 索引標籤。
在 [代碼段 ] 索引標籤中，按下您要編輯的代碼段名稱。代碼段會在程式碼編輯器 中開啟：
使用程式代碼編輯器 將 JavaScript 新增至代碼段。
當代碼段名稱旁邊出現星號時，表示您有未儲存的程序代碼。按 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 以儲存：