Skip to main content

代码块的使用

问题

如果我想看看，当前页面内所有 p 标签包含的文字总数，应该怎么做呢？

例子​

在 Chrome 中使用 JavaScript 作为自动化工具，可以效率地处理网站数据，比如开头的问题，你可以这样解决：

$$('.theme-default-content p')
    .map(el => parseInt(el.innerText.length))
    .reduce((sum, value) => sum + value)

在 Console 面板运行这段代码，会得到这样的返回值:

这样的脚本，并不需要花费我太多的精力来写，但只是偶尔用用。所以我并不愿意每次都自己写。

那怎么解决这个问题呢？

这就是 Snippets 的用武之地了：通过它可以存放 JavaScript 代码到 DevTools 中，方便下一次使用：

  • 进入到 Sources 面板
  • 在导航栏里选中 Snippets 这栏
  • 点击 New snippet(新建一个代码块)
  • 输入你的代码之后保存

大功告成！现在通过右击菜单或者快捷键： [ctrl] + [enter] 来运行你刚刚保存的脚本吧：

1. 运行其他来源的代码块​

当我在 DevTools 中预设了一组很棒的代码块以后，甚至都不需要打开 Sources 来运行它。

  • 先给它取个好记的名字：

  • 使用 Command Menu 快捷键 （ [command] + [p] ） ：在它的输入框中输入 ! ，就可以根据名字来筛选预设代码块：