[开源] EasySelect - 快速提取网页元素的 CSS 选择器。为了上架 Chrome 扩展商店，含泪交给 Google 5 刀保护费

介绍

EasySelect 是 Chrome 浏览器 devtools 的增强，作用是帮助你快速弄出一个可以使用的 css 选择器或者是 xpath 语句，并检查选择内容是否准确。

这个工具可以让你在每一个这样的场景，省去几十秒到几分钟的时间。

适用于学习前端、自动化测试环境。

Github 地址： https://github.com/fy0/EasySelect

Chrome 扩展商店

使用

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

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

如图所示：

界面分三个部分：

1. 层级选择面板

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

div.items > article > a.title 

层级选择面板用于应对这种情况，这个面板分成两排，第一排是当前元素逐级的上级节点，点选后可以设置上级元素的 class 等，用于辅助定位。

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

2. 元素选择面板

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

3. 结论面板

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

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

其他

这个工具主体部分是去年 10 月写的，周末拿出来简单优化了一下体验。

技术栈是 Vue + ElementUI，项目结构特别简单。

这是我的第一个 Chrome 插件，代码写的甚是凌乱，估计还有不少 BUG，希望大家不要嫌弃。

欢迎提出 BUG 、意见，还有 PR 。

如果觉得还可以，请给个 star 支持我一下。

请勿滥用，造成任何后果与本人无关