这个工具的实现，是我长久以来的一个愿望，缘于之前看到的蓝色理想上的一个代码捕捉器。当时我下下来用了一下，没仔细研究，只觉得很难用，于是心底就有了一颗种子，希望有一天自己能开发出这样的工具。感谢伟大的谷歌，给了我一种优雅的实现方式——谷歌插件。

下面说说技术部分：

一开始用的是浏览器原生的 css rules，可是后来发现谷歌的 css rules 是经过解析的，而 ie 的不是。由于对谷歌的偏爱，所以不得不另辟蹊径。凑巧之前又看到了谷歌的另一个插件——Web Developer，可以把页面引用到的 css 文件内容都显示出来。于是，在控制台把代码复制了下来，考到了我的 js 里面。它的实现原理是用 ajax 请求把所有 css 文件内容给抓下来，这涉及到一个跨域问题。不过不用怕，我们是插件嘛，当然有特殊的权利——跨域 ajax 请求。

css 内容抓下来后，怎么分析呢？一开始想用简单的 split 方式进行解析。可在对腾讯微博的页面进行测试后，发现不对。于是，仔细查看 css 内容，原来是 @keyframes 和 expression 搞的鬼。于是，没办法，只能循环字符串，进行字符串匹配了。写起来，发现没想象的复杂，很简单。下面贴出解析函数的代码：

把 cssrules 读出来之后，我们需要把有用的 css 给提取出来。这里，我们先把 dom 节点给复制出来，直接 outerHTML 就行了（嘻嘻，原来很多 ie 独有的东西现在 chrome 都支持了）。然后呢，我们需要用到两个伟大的函数：一个是 querySelector（或 querySelectorAll)，还有 webkitMatchesSelector。这两个函数都是 dom 节点具有的方法，接受一个 selector（即 css 的选择器），前面一个是在 dom 节点的子节点下面寻找满足 selector 的节点，后面那个是判断节点自身是否匹配 selector。这里，要注意 querySelector 是在整个文档的基础下进行判断某个节点是否满足 selector。即这个 dom 节点处在这个文档里，是否满足这个 selector，而不是说单纯在我们抽出来的这段 html 里是否满足这个 selector。有了这两个函数，我们就可以知道我们提取出来的 cssrules 的 selector 是否匹配我们提取出来的这段 html 了，也就知道这个 cssrules 是不是我们需要的了。当然，其实接下来还要做许多工作，比如去掉没用的 selector，去掉 selector 没用的上级限制（因为匹配这些 selector 的上级节点不在我们选取的 html 里）。不过，基本的思路就是这样了。
截图：

插件地址：https://chrome.google.com/webstore/detail/emajkockhmibmpnkbohiipfidkifdjhp?hl=zh-CN