前言
有时候我们浏览一个壁纸网站的时候,可能我们想把这个页面的图片地址全都扒过来,可能你会下载一个工具,获取通过别的途径来实现。但今天我要告诉你,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窗口,输入 ! 找到想要运行的代码片断回车运行即可。