EasySelect 是 Chrome 浏览器 devtools 的增强，作用是帮助你快速弄出一个可以使用的 css 选择器或者是 xpath 语句，并检查选择内容是否准确。
这个工具可以让你在每一个这样的场景，省去几十秒到几分钟的时间。
适用于学习前端、自动化测试环境。
Github 地址： https://github.com/fy0/EasySelect
首先，在浏览器中使用检查元素呼出调试工具，然后用 inspector 选择一个元素。
在右侧的面板选择一下“Easy Select”就能看到工具界面了。
如图所示：
界面分三个部分：
CSS 选择器通常通过上级元素来进行辅助定位，例如：
div.items > article > a.title
层级选择面板用于应对这种情况，这个面板分成两排，第一排是当前元素逐级的上级节点，点选后可以设置上级元素的 class 等，用于辅助定位。
可以看到最高是到 html 元素这一级，如果你不小心点多了，生成出的表达式会很长，可以使用第二排限制最终表达式的长度。
这个就是通过选择 class 还有元素属性构造选择器了。这个面板与层级选择面板是联动关系。
这里可以看到最终生成的表达式，当前页面的表达式匹配元素数量。
还可以进行高亮，以及最下面的表达式 / 语句复制。
这个工具主体部分是去年 10 月写的，周末拿出来简单优化了一下体验。
技术栈是 Vue + ElementUI，项目结构特别简单。
这是我的第一个 Chrome 插件，代码写的甚是凌乱，估计还有不少 BUG，希望大家不要嫌弃。
欢迎提出 BUG 、意见，还有 PR 。
如果觉得还可以，请给个 star 支持我一下。
请勿滥用，造成任何后果与本人无关
这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.