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

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

前言


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


爬取页面的img


比如说有这么一个网站:


网络异常,图片无法展示
|


你觉得所有图片都不错,你很想把他的所有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]快捷键来运行它:


image.png


快速运行代码块


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


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


image.png

相关文章
|
30天前
|
Web App开发 监控 前端开发
重磅! Chrome开发者工具入门
重磅! Chrome开发者工具入门
|
2月前
|
Web App开发 前端开发 JavaScript
Chrome插件实现问题之用户在浏览器中输入URL后,浏览器进程会进行什么操作
Chrome插件实现问题之用户在浏览器中输入URL后,浏览器进程会进行什么操作
|
4月前
|
Web App开发 搜索推荐 前端开发
【热门话题】Chrome 插件研发详解:从入门到实践
本文详细介绍了Chrome插件的开发,从基础概念到实战技巧。首先,解释了插件的结构,包括manifest.json、背景脚本、内容脚本和UI界面。接着,阐述了生命周期、通信机制以及开发步骤,包括创建项目结构、编写manifest.json、开发脚本和UI,以及测试与调试。通过一个显示当前页面URL的插件实例,展示了具体实现过程。最后,讲解了如何在Chrome Web Store发布和分发插件。Chrome插件开发为开发者提供了创造个性化体验的平台,本文旨在引导读者入门并深入实践。
109 2
|
4月前
|
Web App开发 Java Serverless
Serverless 应用引擎操作报错合集之阿里函数计算中,使用自定义运行时部署程序时,发现Chrome层已经建立但运行程序仍然缺失如何解决
Serverless 应用引擎(SAE)是阿里云提供的Serverless PaaS平台,支持Spring Cloud、Dubbo、HSF等主流微服务框架,简化应用的部署、运维和弹性伸缩。在使用SAE过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
|
Web App开发 JSON 监控
Chrome浏览器扩展开发之自动化操作页面
Chrome浏览器扩展开发之自动化操作页面
427 0
|
Web App开发
chrome配置selenium操作
chrome配置selenium操作
109 0
|
Web App开发 SQL 存储
Chrome操作指南——入门篇(一)
Chrome操作指南——入门篇(一)
Chrome操作指南——入门篇(一)
|
Web App开发 存储 前端开发
Chrome操作指南——入门篇(二)
Chrome操作指南——入门篇(二)
Chrome操作指南——入门篇(二)
|
Web App开发 开发者
Chrome操作指南——入门篇(三)
Chrome操作指南——入门篇(三)
Chrome操作指南——入门篇(三)
|
Web App开发 前端开发 开发者
Chrome操作指南——入门篇(四) command
Chrome操作指南——入门篇(四) command
Chrome操作指南——入门篇(四) command

热门文章

最新文章