Chrome 操作指南——入门篇（五）Snippets

前言

有时候我们浏览一个壁纸网站的时候，可能我们想把这个页面的图片地址全都扒过来，可能你会下载一个工具，获取通过别的途径来实现。但今天我要告诉你，JavaScript 也可以，配合上你的浏览器，几行代码帮你轻松搞定，简直不要太哇塞。

爬取页面的 img

比如说有这么一个网站：

你觉得所有图片都不错，你很想把他的所有 url 都爬取过来。这个你就可以写一段 JavaScript：

$$('img').map(el => ({src:el.currentSrc})).filter(img => img.src)

拿到所有 src。

当然你也可以加上浏览器内置的 copy复制到你的剪切板上。

copy($$('img').map(el => ({src:el.currentSrc})).filter(img => img.src))

注：你可以这么理解，$$类似于 jQuery 中$

Snippets

当然我们可能只是偶尔会有这样的需求，但是下回想要用的时候，又要重新编写，虽然说不是很难，但是稍微有点麻烦了。而 chrome 考虑的很周全，他提供了存储代码片段的功能，这样当我们想要用的时候，运行它就可以。

打开devtool-> 切到sources面板 -> 选择导航栏的 Snippets，点击 new snippet，键入后保存，这样就大功告成了。

我们可以右键相应的代码片段名称或者[ctrl] + [enter]快捷键来运行它：

快速运行代码块

还记得我们之前说的 command 吗？没错，通过 command 我们可以更快运行你的代码块，当你有多个代码块的时候，效率更为明显。

在 devtool 界面通过快捷键 [ctrl] + [enter] + [p]打开 command 窗口，输入 ! 找到想要运行的代码片断回车运行即可。