这个工具的实现,是我长久以来的一个愿望,缘于之前看到的蓝色理想上的一个代码捕捉器。当时我下下来用了一下,没仔细研究,只觉得很难用,于是心底就有了一颗种子,希望有一天自己能开发出这样的工具。感谢伟大的谷歌,给了我一种优雅的实现方式——谷歌插件。
下面说说技术部分:
一开始用的是浏览器原生的 css rules,可是后来发现谷歌的 css rules 是经过解析的,而 ie 的不是。由于对谷歌的偏爱,所以不得不另辟蹊径。凑巧之前又看到了谷歌的另一个插件——Web Developer,可以把页面引用到的 css 文件内容都显示出来。于是,在控制台把代码复制了下来,考到了我的 js 里面。它的实现原理是用 ajax 请求把所有 css 文件内容给抓下来,这涉及到一个跨域问题。不过不用怕,我们是插件嘛,当然有特殊的权利——跨域 ajax 请求。