Chrome操作指南——入门篇(五)Snippets

·  阅读 1388
Chrome操作指南——入门篇(五)Snippets

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第六天,点击查看活动详情

前言

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

爬取页面的img

比如说有这么一个网站:

image.png

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

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

拿到所有src。

image.png

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

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

注:你可以这么理解,$$类似于jQuery中$

Snippets

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

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

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

Snippets.gif

快速运行代码块

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

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

Snippets quick.gif

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改