【译】你不知道的 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(代码块)