EasySelect 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
EasySelect 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
EasySelect 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
EasySelect 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
EasySelect 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
所属分类 插件和扩展FireFox插件
开源组织
地区 国产
提 交 者 fy0
适用人群 未知
收录时间 2020-07-01

软件简介

Easy Select 是一个Chrome/Firefox扩展,让你根据页面元素快速获取可读可维护的 CSS 选择器。

为什么不用浏览器自带的 "Copy selector"?

举例来说,这是浏览器自动生成的:

#TopstoryContent > div > div > div > div:nth-child(41) > div > div > h2 > div > a

这是EasySelect拿到的:

div[itemprop='zhihu:question'] > a

安装

Chrome扩展商店

Firefox附加组件

或从release手动安装

使用

首先,在浏览器中使用检查元素呼出调试工具,然后用inspector选择一个元素。

在右侧的面板选择一下“Easy Select”就能看到工具界面了。

界面分三个部分:

1. 层级选择面板

CSS选择器通常通过上级元素来进行辅助定位,例如:

div.items > article > a.title

最高是到html元素这一级,如果你不小心点多了,生成出的表达式会很长,可以使用第二排限制最终表达式的长度。

2. 元素选择面板

这个就是通过选择class还有元素属性构造选择器了。这个面板与层级选择面板是联动关系。

3. 结论面板

这里可以看到最终生成的表达式,当前页面的表达式匹配元素数量。

还可以进行高亮,以及最下面的表达式 / 语句复制。

开发

npm install # 安装环境
npm run serve # 编译并热更新
npm run build # 生产环境打包
npm run analyze # 分析包组件大小

 

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (1)

加载中
不错~~ 收藏下
2020/11/12 13:02
回复
举报
更多评论
发表了资讯
2020/06/30 19:01

EasySelect 1.1.0 发布,能够快速构建爬虫的浏览器插件

一个Chrome/Firefox扩展,让你根据页面元素快速获取可读可维护的 CSS 选择器。 为什么不用浏览器自带的 "Copy selector"? 举例来说,这是浏览器自动生成的: #TopstoryContent > div > div > div > div:nth-child(41) > div > div > h2 > div > a 这是EasySelect拿到的: div[itemprop='zhihu:question'] > a 安装 Chrome扩展商店 Firefox附加组件 或从release手动安装 使用 首先,在浏览器中使用检查元素呼出调试工具,...

0
21
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
暂无内容
1 评论
13 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部