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

# 例子

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

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

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

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

那怎么解决这个问题呢?

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

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

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

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

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

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

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

微信扫码或搜索: 前端恶霸

在公众号对话框,发送

关注期间 无限制 浏览本站全部内容

内容包括 「Chrome 调试技巧」(持续更新),以及「React 学习指北」(即将上线)

为什么我需要关注?
加入读者交流群 扫描二维码回复 Chrome
Last Updated: 6/30/2020, 12:36:00 PM