前端扒代码_【前端向】如何把页面上的元素，一键扒下

去年这个时候我开始产生了这么一个需求：想要把一个网页上的某个元素，扒下来，只要HTML/CSS，但对CSS有一个要求：别乱七八糟包含大量冗余。

于是我开始看着浏览器的开发者工具的Elements面板的Style侧面板发呆，却想尽各种办法也不知道怎样才能通过程序的方式得到样式面板里整理好的各个来源和优先级的元素样式——纯前端脚本很难解析出一个元素的所有样式，Chrome浏览器扩展开发也没有提供相应的接口，Webkit源码体量大依赖多而修改开源代码编译出一个新浏览器仅为让他人使用这么个功能极其不现实。业务紧张，我只好把这个想法搁置。直到今年三月，我恍然大明白，我就用前端的方式，使用元素的计算样式，通过哪怕比较dirty的手段，一定可以筛选和整理出元素的关键样式。

之所以有信心从计算样式中得到良好的样式表，主要是有这些考虑：1)网页的CSS未必是良好的代码，未必有良好的结构，未必对我关注的元素有重要意义。2)当我们想扒取一个元素，一定是想把这个元素当作一个模块，一个组件，进行二次开发；而二次开发时，如果CSS不多，我很小概率会再去重构，而更可能在局部做一些样式添加和修改。3)其实我身边的前端工程师自己在写样式的时候也不会写很多很复杂的样式，常用的CSS属性很容易罗列。

在确立了基本方针--在元素计算样式上做文章--后，我利用业余时间，在比较短的时间内完成了程序原型——仅仅一个js，审查元素选中目标元素后，执行这个js会把页面替换成目标元素，而目标元素的HTML/CSS也经过了清洗和优化，最终得到的CSS甚至与人工开发的代码质量相当。后来又听取同事的建议，实现成了Chrome浏览器扩展。最后又增加一个Node脚本，用来起一个服务，解析CSS和保存文件。项目详见FeSpider，欢迎有需要的同学使用和提issue。

今天时间已晚，改天我想补充一下详细做法，包含若干奇技淫巧。入行前端之后，陆续有一些微小的工作，计划分享一下以接受考验和指点。

待续。