91&

運行 JavaScript 代碼片段

freeflydom

2023年7月29日 9:52 本文熱度 1213

如果你發現自己反復使用 Console 來運行同一份代碼，那么你應該考慮將代碼保存成片段。Snippets 是你在 Source 面板中創建的腳本。這些腳本可以獲取到頁面的 Javascript 上下文，你可以在任意頁面運行它們。代碼片段就是書簽bookmarklets的替代品。

舉個例子，如下截圖所示，頁面左側展示了 DevTools 站點文檔主頁，頁面的右側展示了 Sources > Snippets 板塊的片段源代碼。

下面是上圖片段源代碼記錄信息。該功能是使用包含信息的 <p> 元素來替換主頁 HTML 的主體 body。

console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

當你點擊 ▶️ 運行按鈕，控制臺抽屜會彈出，輸出 Hello, Snippets! 代碼信息，且頁面的內容發生更改。

打開 Snippets 面板

Snippets 面板羅列了你的所有片段。你可以采用下面的兩種方法之一打開該面板：

根據 Sources > 》 > Snippets 導航指引打開。

通過命令菜單

按下快捷鍵 Control+Shift+P (Windows/Linux) 或者 Command+Shift+P (Mac) 打開命令菜單。

輸入 Snippets，選擇 Show Snippets 選項，然后按回車。

Sources > Snippets 面板展示你保存的片段列表，下面截圖的例子是空列表。

創建 snippets

你可以通過在 Snippets 面板中創建片段。或者，通過在 DevTools 任意位置打開**命令菜單（Command Menu）運行相應的命令行。

PS: 譯者添加，這里的 DevTools 指的是鼠標右鍵 “檢查” 出現的調試工具集，而不是站點 DevTools。下面出現的 DevTools 同理。

Snippets 面板會按照（文件名）字母順序排列你的片段。

在 Sources 面板創建一個片段

打開 Snippets 面板。 (若不熟悉，見上操作👆)
點擊 ➕ New snippets。
輸入片段的名字并按回車保存。

從命令菜單創建一個片段

在 DevTools 內聚焦你的光標。
按下 Control+Shift+P (Windows/Linux) 或者 Command+Shift+P (Mac) 來打開命令菜單。
開始輸入 Snippet，選擇 create new snippet 選項，然后按下回車鍵去執行命令。

如果你不喜歡程序自定義片段的名稱，請查看下面重命名 snippets 小節。

編輯 snippets

打開 Snippets 面板
在 Snippets 面板中，點擊你想要編輯的片段。Sources 面板會在 Code Editor 中打開它。

使用 Code Editor 去編輯你的片段代碼。出現星號*在你片段名稱的旁邊，說明你還沒有保存你更改的片段。

按下 Control+S (Windows/Linux) 或者 Command+S (Mac) 去保存。

運行 snippets

和創建一個片段類似，你可以通過 Snippets 面板，或者從命令面板中運行它。

在 Snippets 面板中運行一個片段

打開 Snippets 面板。
點擊你想運行的一個片段。Sources 會在 Code Editor 中打開它。
點擊編輯器底部操作欄的 ▶️ 按鈕運行，或者按下 Control+Enter (Windows/Linux) 或 Command+Enter (Mac)。