如果你發(fā)現(xiàn)自己反復(fù)使用 Console 來(lái)運(yùn)行同一份代碼，那么你應(yīng)該考慮將代碼保存成片段。Snippets 是你在 Source 面板中創(chuàng)建的腳本。這些腳本可以獲取到頁(yè)面的 Javascript 上下文，你可以在任意頁(yè)面運(yùn)行它們。代碼片段就是書(shū)簽bookmarklets的替代品。
舉個(gè)例子，如下截圖所示，頁(yè)面左側(cè)展示了 DevTools 站點(diǎn)文檔主頁(yè)，頁(yè)面的右側(cè)展示了 Sources > Snippets 板塊的片段源代碼。
下面是上圖片段源代碼記錄信息。該功能是使用包含信息的 <p> 元素來(lái)替換主頁(yè) HTML 的主體 body。
console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);
當(dāng)你點(diǎn)擊 ▶️ 運(yùn)行按鈕，控制臺(tái)抽屜 會(huì)彈出，輸出 Hello, Snippets! 代碼信息，且頁(yè)面的內(nèi)容發(fā)生更改。
打開(kāi) Snippets 面板
Snippets 面板羅列了你的所有片段。你可以采用下面的兩種方法之一打開(kāi)該面板：
Sources > Snippets 面板展示你保存的片段列表，下面截圖的例子是空列表。
創(chuàng)建 snippets
你可以通過(guò)在 Snippets 面板中創(chuàng)建片段。或者，通過(guò) 在 DevTools 任意位置打開(kāi)**命令菜單（Command Menu）運(yùn)行相應(yīng)的命令行。
PS: 譯者添加，這里的 DevTools 指的是鼠標(biāo)右鍵 “檢查” 出現(xiàn)的調(diào)試工具集，而不是站點(diǎn) DevTools。下面出現(xiàn)的 DevTools 同理。
Snippets 面板會(huì)按照（文件名）字母順序排列你的片段。
在 Sources 面板創(chuàng)建一個(gè)片段
打開(kāi) Snippets 面板。 (若不熟悉，見(jiàn)上操作👆)
點(diǎn)擊 ➕ New snippets。
輸入片段的名字并按回車保存。
從命令菜單創(chuàng)建一個(gè)片段
在 DevTools 內(nèi)聚焦你的光標(biāo)。
按下 Control+Shift+P (Windows/Linux) 或者 Command+Shift+P (Mac) 來(lái)打開(kāi)命令菜單。
開(kāi)始輸入 Snippet，選擇 create new snippet 選項(xiàng)，然后按下回車鍵去執(zhí)行命令。
如果你不喜歡程序自定義片段的名稱，請(qǐng)查看下面重命名 snippets 小節(jié)。
編輯 snippets
打開(kāi) Snippets 面板
在 Snippets 面板中，點(diǎn)擊你想要編輯的片段。Sources 面板會(huì)在 Code Editor 中打開(kāi)它。
使用 Code Editor 去編輯你的片段代碼。出現(xiàn)星號(hào)*在你片段名稱的旁邊，說(shuō)明你還沒(méi)有保存你更改的片段。
按下 Control+S (Windows/Linux) 或者 Command+S (Mac) 去保存。
運(yùn)行 snippets
和創(chuàng)建一個(gè)片段類似，你可以通過(guò) Snippets 面板，或者從命令面板中運(yùn)行它。
在 Snippets 面板中運(yùn)行一個(gè)片段
打開(kāi) Snippets 面板。
點(diǎn)擊你想運(yùn)行的一個(gè)片段。Sources 會(huì)在 Code Editor 中打開(kāi)它。
點(diǎn)擊編輯器底部操作欄的 ▶️ 按鈕運(yùn)行，或者按下 Control+Enter (Windows/Linux) 或 Command+Enter (Mac)。
從命令菜單運(yùn)行一個(gè)片段
在 DevTools 內(nèi)聚焦你的光標(biāo)。
按下 Control+O (Windows/Linux) 或者 Command+O (Mac) 去打開(kāi)命令菜單。
輸入 ! 字符，后面緊跟著你想運(yùn)行的片段名稱。
按下回車鍵運(yùn)行該片段。
重命名 snippets
打開(kāi) Snippets 面板。
右擊片段名稱，然后選擇重命名。
刪除 snippets
打開(kāi) Snippets 面板。
右擊片段名稱，然后選擇移除。
原文鏈接
該文章在 2023/7/29 9:52:24 編輯過(guò)
400 186 1886
