好用的 Chrome/Edge 內建 JavaScript 程式片段收藏箱 - Snippets

前幾天分享瀏覽器 F12 開發者工具轉存物件到 JSON 檔的 JavaScript 小函式，從讀者們的回饋我又學到新東西。(特此感謝)

shelob 分享可以將這些小程式放在 Tampermonkey，這樣子要用時可以省去爬文、複製、貼上的功夫。

Chester Fung 則提醒我，其實 Chrome/Edge 本來就自帶收藏 JavaScript 程式片段的功能 - Snippets。

一語驚醒夢中人。可惡，我居然錯過了這麼久!

Snippets 其實就藏在偵錯一定會用到的「來源」(Source)，有個「程式碼片段」(Snippets)[1]默默躺在最後一個頁籤，新增一個新的程式片段[2]，把程式碼貼到編輯區[3]儲存，取個好懂的名字，下回要用時直接來百寶箱找。Snippet 右側的偵錯工具一應俱全，可以設中斷點、觀察變數、查 Callstack，程式碼自動完成當然也不可或缺(如下圖)，開發體驗比照網頁 JavaScript，堪稱完美!

如需要備份或分享，每個 Snippet 可另存 .js。

但下個問題馬上來了，如果有一百個 Snippet，難道這個動作要做一百次？

備份還原過去有個巧妙解法是先叫出 F12 開發者工具，再以 F12 開發者工具為對象按 Ctrl-Shift-I 叫出偵錯它的 F12 開發者工具 (DevTools of DevTools)，接著透過 InspectorFrontendHost.getPreferences() 讀取 scriptSnippets 屬性取得所有 Snippet。參考

但不幸地 scriptSnippets 屬性在 124 版被移除了。Stackoverflow 有人分享了替代做法，輸入 chrome://version 或 edge://version 查詢設定檔路徑：

設定檔路徑下有perferences檔案，本身是個沒排版的 JSON，在其中可以找到 devtools.preferences.script-snipptes，儲存著所有 Snippet 打包成的 JSON 字串。

知道位置，要備份要還原，還是寫個華麗管理工具，大家可自由發揮。

This article explores ways to efficiently manage JavaScript snippets in Chrome/Edge, highlighting the use of built-in Snippets and Tampermonkey. It also provides techniques for accessing and backing up Snippets via browser settings files.