【譯】你不知道的 Chrome 調試工具技巧第二十一天：Snippets(代碼塊)

本文是做者 Tomek Sułkowski 發佈在 medium 上的一個系列。據做者透露一共有 24 篇，一直更新到 12 月 24 日
版權歸原做者全部。
vue

做者在 Twitter 上推薦咱們的中文翻譯啦,截圖在最後
java

譯者在翻譯前已經和做者溝通獲得了翻譯整個系列的受權。
爲了避免影響你們閱讀，受權的記錄在這裏
git

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

有時我使用 JavaScript 做爲自動化工具來處理第三方網站和應用程序。異步

比方說，我想看看有多少人在個人全部媒體帖子上鼓掌。 Medium 沒有提供這樣的總數，因此我把這個小腳本組合在一塊兒：編輯器

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

當我打開狀態頁而且輸入這段腳本到 Console 的時候，它將會返回這個數值:工具

即便如今看來，並無花費我太多的精力來寫這個腳本，但我其實只是偶爾運行一次，因此對於我來講，要去記住一段這樣的腳本也會很煩：post

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

建立這樣一個 Snippet 進入到 Sources 面板，在導航欄裏面選中 Snippets 這欄，點擊 「New snippet(新建一個代碼塊)」 ,輸入你的代碼，保存，大功告成！你能夠經過右擊菜單或者 [ctrl] + [enter] 快捷鍵來運行它了：網站

一旦設置了一組很棒的代碼塊，你甚至沒必要訪問 Sources 來運行它們。最快的方式，就像咱們本週已經屢次發現的那樣，就是使用 Command Menu。若是輸入 ! 在它的輸入框中，就能夠根據名字來選擇你的代碼塊

今天的分享就到這裏~

慣例：若是你從這裏學到了一些新東西

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

其餘此係列的文章，立刻就會翻譯出來，到時會貼出對應的連接在此處。

若是你對個人翻譯表示確定，也能夠關注我一波哦~ 順便個人開源項目，求一波 star→ 看這裏, 美麗的博客系統

【譯】你不知道的 Chrome 調試工具技巧 第二十一天：Snippets(代碼塊)