【譯】你不知道的 Chrome 除錯工具技巧第二十一天：Snippets(程式碼塊)

本文是作者 Tomek Sułkowski 釋出在 medium 上的一個系列。據作者透露一共有 24 篇，一直更新到 12 月 24 日
版權歸原作者所有。

作者在 Twitter 上推薦我們的中文翻譯啦,截圖在最後

譯者在翻譯前已經和作者溝通得到了翻譯整個系列的授權。
為了不影響大家閱讀，授權的記錄在這裡

在馬上就要迎來假期的這 24 天裡，我將會發布一系列短篇的文章，關於如何更加有意思的使用開發工具，昨天我們看了 DevTools Workspace 的黑魔法，今天來玩玩 Snippets (程式碼塊)：

有時我使用 JavaScript 作為自動化工具來處理第三方網站和應用程式。

比方說，我想看看有多少人在我的所有媒體帖子上鼓掌。 Medium 沒有提供這樣的總數，所以我把這個小指令碼組合在一起：

 $$('td:last-child .sortableTable-number')
    .map(el => parseInt(el.innerText))
    .reduce((total, value) => total + value);
複製程式碼

當我開啟狀態頁並且輸入這段指令碼到 Console 的時候，它將會返回這個數值:

即使現在看來，並沒有花費我太多的精力來寫這個指令碼，但我其實只是偶爾執行一次，所以對於我來說，要去記住一段這樣的指令碼也會很煩：

這就是 Snippets 的用武之地：這是讓你存放 JavaScript 程式碼到 DevTools 的一種方式，以便於你稍後複用他們。

建立這樣一個 Snippet 進入到 Sources 皮膚，在導航欄裡面選中 Snippets 這欄，點選 “New snippet(新建一個程式碼塊)” ,輸入你的程式碼，儲存，大功告成！你可以通過右擊選單或者 [ctrl] + [enter] 快捷鍵來執行它了：

一旦設定了一組很棒的程式碼塊，你甚至不必訪問 Sources 來執行它們。最快的方式，就像我們本週已經多次發現的那樣，就是使用 Command Menu。如果輸入 ! 在它的輸入框中，就可以根據名字來選擇你的程式碼塊

今天的分享就到這裡~

慣例：如果你從這裡學到了一些新東西

→ 你可以點個贊再走嘛~
→ 關注我：Twitter：Tomek Sułkowski

其他此係列的文章，馬上就會翻譯出來，到時會貼出對應的連結在此處。

如果你對我的翻譯表示肯定，也可以關注我一波哦~ 順便我的開源專案，求一波 star→ 看這裡, 美麗的部落格系統

【譯】你不知道的 Chrome 除錯工具技巧 第二十一天：Snippets(程式碼塊)