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

2025-06-14

如果您重複在 主控台 工具中輸入相同的程式碼，請考慮改為將程式代碼儲存為代碼段，然後執行代碼段。代碼段是您在來源工具中撰寫的腳本。代碼段可以存取網頁的 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 執行命令：

建立代碼段

您可以從代碼段工具內建立代碼段，或從 DevTools 中任何位置的 [命令功能表] 執行 [建立新的代碼段] 命令來建立代碼段。

[代碼段 ] 窗格會依字母順序排序代碼段。

在來源工具中建立代碼段

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

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

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

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

編輯代碼段

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

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

允許貼到代碼段編輯器

當您第一次嘗試將內容貼到 [ 來源工具 >代碼段 ] 索引卷標 > 代碼段編輯器中，而不是貼上時，會顯示 [ 您信任此程序代碼嗎？ ] 對話框，並顯示訊息：「不要貼上您不瞭解的程式代碼，或未自行檢閱至 DevTools。這可能會讓攻擊者竊取您的身分識別或控制您的電腦。請在下方輸入「允許貼上」，以允許貼上。」

來源工具的 [代碼段] 索引標籤編輯器，其中顯示自我 XSS 警告

此警告有助於防止對用戶進行自我 XSS) (自我網站腳本攻擊。若要貼上程式代碼，請先在對話框的文字框中輸入 允許貼 上，然後按兩下 [ 允許] 按鈕。然後貼上內容。或者，使用下列旗標啟動Edge。

貼入 主控台 工具很類似;請參閱在主控台中，於執行 JavaScript 中允許貼入主控台。

使用命令行旗標啟動Edge來停用自我 XSS 警告

若要避免上述警告，並立即允許貼入 主控台 工具和來源工具的代碼段編輯器，例如用於自動化測試，請使用下列旗標從命令行啟動 Microsoft Edge： --unsafely-disable-devtools-self-xss-warnings。旗標會套用至 Microsoft Edge 的單一會話。

例如，在 Windows 上：

邊緣穩定：

"C:\Users\localAccount\AppData\Local\Microsoft\Edge\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Edge Beta：

"C:\Users\localAccount\AppData\Local\Microsoft\Edge Beta\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Edge Dev：

"C:\Users\localAccount\AppData\Local\Microsoft\Edge Dev\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Edge Canary：

"C:\Users\localAccount\AppData\Local\Microsoft\Edge SxS\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

執行代碼段

從來源工具執行代碼段

開啟 [代碼段] 索引標籤。
按兩下您要執行的代碼段名稱。代碼段會在程式碼編輯器 中開啟：
單擊 [執行 代碼段 (執行 ) ] 按鈕，或按 Ctrl+Enter (Windows、Linux) 或 Command+Enter (macOS) ：

將游標聚焦在 DevTools 的某處。
按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 以開啟 [ 命令] 功能表。
刪除字元並 > 輸入！字元，後面接著您要執行的代碼段名稱：
按 Enter 鍵以執行代碼段。

重新命名代碼段

開啟 [代碼段] 索引標籤。
以滑鼠右鍵按下代碼段名稱，然後選取 [ 重新命名]。

刪除代碼段

開啟 [代碼段] 索引標籤。
以滑鼠右鍵按下代碼段名稱，然後選取 [ 移除]。

將代碼段儲存至磁碟作為檔案

根據預設，代碼段只能在 DevTools 內使用，但您也可以將代碼段儲存至磁碟。

開啟 [代碼段] 索引標籤。
以滑鼠右鍵按鍵單擊代碼段名稱，然後選取 [ 另存新檔]。

[另存新檔] 對話方塊會隨即開啟。
選取資料夾，輸入檔名 (例如 Script snippet #1.js) ，然後按下 [ 儲存] 按鈕。

注意事項

此頁面的部分是根據Google所建立和共用的工作進行修改，並根據 Creative Commons Attribution 4.0 國際授權中所述的條款使用。原始頁面可在這裡找到，並由 Basques 撰寫。

此工作是根據 Creative Commons Attribution 4.0 International License 授權。

共用方式為