内容简介:一个Chrome/Firefox扩展,让你根据页面元素快速获取可读可维护的 CSS 选择器。 为什么不用浏览器自带的 "Copy selector"? 举例来说,这是浏览器自动生成的: #TopstoryContent > div > div > div > div:nth-chi...
一个Chrome/Firefox扩展,让你根据页面元素快速获取可读可维护的 CSS 选择器。
为什么不用浏览器自带的 "Copy selector"?
举例来说,这是浏览器自动生成的:
#TopstoryContent > div > div > div > div:nth-child(41) > div > div > h2 > div > a
这是EasySelect拿到的:
div[itemprop='zhihu:question'] > a
安装
或从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 # 分析包组件大小
更新内容:
-
i18n 支持 (vue-i18n)
-
优化了 id 属性CSS选择器的生成
-
修正了导出的 python css lxml 语句不正确的问题
-
支持了属性中带换行符的元素
-
高亮时带上背景色
-
层级选择面板:缩小了按钮
-
层级选择和元素选择面板:增加滚动条
-
结论面板:css / xpath 切换选项卡
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 基于爬虫开发XSS检测插件
- 基于爬虫开发WebShell爆破插件与备份扫描
- 首次 golang爬虫插件gocolly/colly 使用经历
- 爬虫需谨慎,那些你不知道的爬虫与反爬虫套路!
- 反爬虫之字体反爬虫
- 反爬虫之字体反爬虫
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
图解物联网
[ 日] NTT DATA集团、河村雅人、大塚纮史、小林佑辅、小山武士、宫崎智也、石黑佑树、小岛康平 / 丁 灵 / 人民邮电出版社 / 2017-4 / 59.00元
本书图例丰富,从设备、传感器及传输协议等构成IoT的技术要素讲起,逐步深入讲解如何灵活运用IoT。内容包括用于实现IoT的架构、传感器的种类及能从传感器获取的信息等,并介绍了传感设备原型设计必需的Arduino等平台及这些平台的选择方法,连接传感器的电路,传感器的数据分析,乃至IoT跟智能手机/可穿戴设备的联动等。此外,本书以作者们开发的IoT系统为例,讲述了硬件设置、无线通信及网络安全等运用Io......一起来看看 《图解物联网》 这本书的介绍吧!