特別宣告

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

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

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

正文

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

59. 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] 快捷鍵來執行它了：

60.Run snippets from wherever(執行其他來源的程式碼塊)

一旦設定了一組很棒的程式碼塊，您甚至不必訪問Sources來執行它們。最快的方式，就像我們本週已經多次發現的那樣，就是使用 Command Menu

今天的分享就到這裡~

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

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

其他系列

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

• 【譯】你不知道的 Chrome 除錯工具技巧 第一天：console 中的'$'
• 【譯】你不知道的 Chrome 除錯工具技巧 第二天：copying & saving
• 【譯】你不知道的 Chrome 除錯工具技巧 第三天：console methods
• 【譯】你不知道的 Chrome 除錯工具技巧 第四天：the Elements panel（元素面板）
• 【譯】你不知道的 Chrome 除錯工具技巧 第五天：console 的 log 中,讓人疑惑的案例
• 【譯】你不知道的 Chrome 除錯工具技巧 第六天：command 選單
• 【譯】你不知道的 Chrome 除錯工具技巧 第七天：非同步 consle 的趣味小竅門
• 【譯】你不知道的 Chrome 除錯工具技巧 第八天：Color picker（顏色選擇器）
• 【譯】你不知道的 Chrome 除錯工具技巧 第九天：給 console 計時
• 【譯】你不知道的 Chrome 除錯工具技巧 第十天：custom formatters（自定義格式轉換器）
• 【譯】你不知道的 Chrome 除錯工具技巧 第十一天：style editors continued（樣式編輯器後續）
• 【譯】你不知道的 Chrome 除錯工具技巧 第十二天：忍者日誌列印！(the ninja logs)
• 【譯】你不知道的 Chrome 除錯工具技巧 第十三天：物件 & 方法
• 【譯】你不知道的 Chrome 除錯工具技巧 第十四天：其他快捷鍵~
• 【譯】你不知道的 Chrome 除錯工具技巧 第十五天：Twitter day~
• 【譯】你不知道的 Chrome 除錯工具技巧 第十六天：斷點
• 【譯】你不知道的 Chrome 除錯工具技巧 第十七天：再會 console
• 【譯】你不知道的 Chrome 除錯工具技巧 第十八天：Drawer 裡的祕密
• 【譯】你不知道的 Chrome 除錯工具技巧 第十九天：深入 Drawer

寫在最後

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

作者在 Twitter 上推薦我們的中文翻譯啦