1、我的需求:如果 CSS文件比较多,单个CSS文件中的样式也很多的时候,要找 某个html元素的属性属于哪个文件的哪个样式,简直无奈啊...
于是就想到了下面的 2种方式:
1.1、找现成的工具,例如看看 chrome、firefox等 里面有没有现成的工具可以 方便的查看。但是 发现 浏览器里面的“开发者工具”里面 把有些CSS都弄成了LESS了,想要将less与css文件对应起来 又是一个麻烦的事情...
1.2、自己写这样一个小工具。想到的难点:(1)CSS的各种选择器(各种选择器都要考虑都要实现,量较大) (2)nth-child 类型的选择器 处理起来蛮麻烦的 (3)我记得我考虑的时候还有一些点处理起来蛮麻烦的,但是现在一时 又想不起来了...
2、
3、后来 无意中发现一个间接的关联方式(主要还是 Chrome的开发中工具用的少了,用的多的话,应该早就发现这个方式了):
如下图中样式".weui-btn_primary",它所在的文件是"weui-btn_primary.less",点进去也是 这个less文件,但是 我的源文件都是css文件 没有less文件,要找到 样式".weui-btn_primary"在哪里 就要使用EditPlus等搜索 可能会有多个结果 要一一查看/比较/确定 比较费时费力...
后来 我无意中点击了一下 属性前面的"√",发现在"changes"中 会指向原来的css文件的对应位置,这就比较直观了,如下图:
"changes" 可以这样打开:
4、
5、查的一些资料,装了的一些工具/软件
ZC:之前一直在 度娘查,后来 没办法FQ了,才发现 有些国内的文章 其实就是google的文档,只不过 ∵墙的缘故 度娘搜不到原版的文档 只能搜到国内人士搬来的文章...
5.1、Chrome 调试本地less样式 - 简书.html(https://www.jianshu.com/p/ff4312470ff1) ZC:这文章貌似 google官方文档里有
安装了:
(1)NodeJS(包含npm):NodeJS、NPM安装配置步骤(windows版本)_百度经验.html(https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html)
我装在了这里:“E:\Program Files\nodejs\”
(2)在装好了NodeJS之后,里面带 npm,然后又使用npm安装了less(CMD中执行命令:“npm install -g less” (貌似意思是 安装全局模块less),也就是说 到时候卸载的话 不需要单独卸载less 只要npm卸载了 less也就没有了?)
5.2、
在Chrome控制台注入npm模块 - 踩坑者日常 - SegmentFault 思否.html(https://segmentfault.com/a/1190000017853276)
java中调用npm模块 - 踩坑者日常 - SegmentFault 思否.html(https://segmentfault.com/a/1190000017401661)
5.3、下面要f/q
“设置 CSS 与 JS 预处理器 _ Tools for Web Developers _ Google Developers.html”(https://developers.google.com/web/tools/setup/setup-preprocessors?hl=zh-cn)
“编辑样式 _ Tools for Web Developers _ Google Developers.html”(https://developers.google.com/web/tools/chrome-devtools/inspect-styles/edit-styles?hl=zh-cn#sassless_stylus)
6、
7、
8、
9、