SelectorGadget

发布时间: 编辑:chromegood 0人评论 27071次浏览 Chrome开发者工具插件
直达下载
摘要 : Chrome浏览器的一款插件,安装这个扩展插件后,能够为复杂网站的元素生成CSS选择器,有助于帮助你快速找到html的节点信息.

SelectorGadget 插件背景简介

相信爬虫的爱好者们都经历过这样一个爬虫前期的准备过程,那就是用浏览器的审查元素进行爬取目标的定位。每次我们都要浪费部分时间去寻找定位点和xpath,这样既不很方便,也不高效,那么如何提高爬虫中这部分工作的效率呢?今天小编给大家分享一个爬虫的利器,它就是:SelectorGadget 插件。

SelectorGadget 插件简介

Selector Gadget是一个开源的Chrome扩展程序,可以轻松地在复杂的网站上生成和选择CSS选择器。安装扩展程序后,转到任意页面并启动它。网站右下方会打开一个方框。单击您希望选择器匹配的页面元素(它将变为绿色)。然后SelectorGadget将为该元素生成一个最小的CSS选择器,并突出显示(黄色)选择器匹配的所有内容。现在单击突出显示的元素将其从选择器中删除(红色),或单击未突出显示的元素将其添加到选择器。通过这个选择和拒绝过程,SelectorGadget可以帮助您找到满足您需求的完美CSS选择器。

SelectorGadget 简介

SelectorGadget 插件使用方法

1.SelectorGadget插件离线安装的方法参照一下方法:老版本Chrome浏览器,首先在标签页输入【chrome://extensions/】进入chrome扩展程序,解压你在本站下载的插件,并拖入扩展程序页即可。

SelectorGadget 使用方法

2.最新版本的chrome浏览器直接拖放安装时会出现“程序包无效CRX-HEADER-INVALID”的报错信息,参照:Chrome插件安装时出现"CRX-HEADER-INVALID"解决方法,安装好后即可使用。

3.下载完会在右上角多出一个放大镜的小标志。提示你已经安装好该插件。

SelectorGadget 使用方法

4.接下来就可以使用该插件了,打开某个网站,例如当当网的图书排行榜,比如我们想获得书名的html节点信息,此时我们只需要先点击谷歌浏览器上图标,然后再在书名的点击,如下图所示

SelectorGadget 使用方法

5.在上图中,我们发现很多地方都变成高亮(即黄色部分),但是我们只想获得书名信息,所以我们需要去除多余的信息,此刻只需在不需要的部分再次点击,即可去掉选中部分。例如点击下图上的“2013”年

SelectorGadget 使用方法

6.击后就会发现现在网页中高亮部分(即黄色部分)就只有“书名”信息,如下图所示:

SelectorGadget 使用方法

7.这时候我们再查看谷歌浏览器右下角就可以看到节点标签,即   .name a,点击图片上面的“clear(20)”即可清除自己现在选取的信息,重新进行选择~

SelectorGadget 使用方法

SelectorGadget 插件官网:  

http://selectorgadget.com

查看更多

SelectorGadget下载地址

点击下载SelectorGadget

转载必须注明来自:https://huajiakeji.com/web-development/2019-08/957.html

JetBrains IDE Support

JetBrains IDE Support

0 人评论 76566 次人浏览 3.7分 3.7 分
JetBrains IDE Support是一款webstorm网页开发调试工具,支持HTML/CSS/JavaScript编辑和JavaScript调试。
CSSPeeper

CSSPeeper

0 人评论 23500 次人浏览 3.6分 3.6 分
CSSPeeper是一款专为设计师量身打造的可视觉化网站CSS样式表检查插件。
CSS Used插件v2.4.2

CSS Used插件v2.4.2

0 人评论 5508 次人浏览 3.0分 3.0 分
CSS Used 插件是一款用于提取所选元素及其子元素使用的CSS规则的插件,适用于按钮等小组件提取。
Stylish插件V2.0.9

Stylish插件V2.0.9

0 人评论 10844 次人浏览 3.0分 3.0 分
Stylish插件是一款非常知名的能为网站定制各种各样的主题的浏览器网站主题样式修改工具,Stylish插件为世界各地的网站和Web应用提供主题和皮肤,支持自定义修改、CSS编辑器创建主题。
Amino: Live CSS Editor

Amino: Live CSS Editor

0 人评论 9457 次人浏览 3.0分 3.0 分
Amino: Live CSS Editor是Chrome浏览器扩展程序,用于编写可持久保存的用户CSS。使网络成为您想要的!
Brackets - 一款免费的前端开发工具

Brackets - 一款免费的前端开发工具

0 人评论 9940 次人浏览 3.0分 3.0 分
Brackets是一款现代化的文本编辑器,具有集中的可视化工具和预处理器支持,可轻松在浏览器中进行设计。它是专为网页设计师和前端开发人员设计的。
Firebug Lite for Google Chrome

Firebug Lite for Google Chrome

0 人评论 15878 次人浏览 3.0分 3.0 分
Firebug Lite提供了我们在Firebug中看到的丰富的可视化表示,涉及HTML元素,DOM元素和Box模型着色。 它还提供了一些很酷的功能,比如用鼠标检查HTML元素,以及实时编辑CSS属性。
css荧光搜索框特效代码下载

css荧光搜索框特效代码下载

0 人评论 4601 次人浏览 1.6分 1.6 分
这一款CSS3发光搜索表单,利用CSS3的动画属性,设置0%和100%时的颜色样式,让其渐变,再配合有明显对比的背景,就能模拟出发光的效果了
评论:(0)

已有 0 位网友发表了一针见血的评论,你还等什么?