CSS Selector Capture Chrome扩展辅助页
Chrome 的前端调试神器之一——CSS Selector Capture 扩展，真挺方便的。你只要点一下页面上的元素，它立马就把对应的CSS 选择器扔出来，干净利落，拿来复制就能用，调样式顺手。
支持的选择器不只是.class、#id这些基础货，像那种嵌套的、组合的、层叠得一塌糊涂的复杂结构，它也照样识别得溜。有时候你在调一个深层组件的样式，用这个抓一下路径，省事多了。
它本身是个Chrome 扩展，基本就是点一下装好就能用。界面也比较直白，不用研究半天文档那种。嗯，点完元素右键、选择“Capture Selector”，选择器就自动复制好了。响应也快，不卡顿。
项目结构也挺清晰的，源码目录里像src/、scripts/、test/这些一应俱全。想自己折腾一下、改点功能，加个快捷键啥的，也方便你下手。
技术栈那边，像JavaScript、TypeScript、Sass、Gulp都有用上。比如用Gulp来打包、压缩，TypeScript写逻辑代码，调试体验比纯 JS 那一套清爽不少。
如果你平时要频繁查 DOM 结构、调样式，或者写自动化测试、做Selenium定位，这扩展就挺值得一试的。少敲点选择器，多留点时间喝咖啡，挺香的~
如果你对选择器还不是熟，推荐你先看看这篇《css 选择器-Python-web 前端》文章，入门也快多。
文件大小：1.96MB
评论区