通用篇 - 代码块的使用

# 前言

 

我经常使用 JavaScript 作为我的自动化工具，来处理第三方网站和应用程序：

比方说，我想看看有多少人在我的所有媒体帖子上鼓掌。 Medium 没有提供这样的总数，所以我把这个小脚本组合在一起：

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

当我打开状态页并且输入这段脚本到 Console 面板的时候，它将会返回这个数值:

现在看来，即使这个脚本并没有花费我太多的精力来编写，但也只是偶尔运行一下，所以对于我来说，记住一段这样的脚本会很麻烦：

那怎么解决这个问题呢？

这就是 Snippets 的用武之地：它允许你存放 JavaScript 代码到 DevTools 中，方便你复用这些 JavaScript 代码块：

进入到 Sources 面板，在导航栏里选中 Snippets 这栏，点击 New snippet(新建一个代码块) ，然后输入你的代码之后保存，大功告成！现在你可以通过右击菜单或者快捷键： [ctrl] + [enter] 来运行它了：

 

# 运行其他来源的代码块

当我在 DevTools 中预设了一组很棒的代码块以后，甚至都不必再通过 Sources 来运行它们。使用 Command Menu 才是最快的方式。只需在它的输入框中输入 ! ，就可以根据名字来筛选预设代码块：