FeHelperWeb开发者助手 FeHelper

本插件支持Chrome、Firefox、MS-Edge浏览器,内部工具集持续增加,目前包括 JSON自动/手动格式化、JSON内容比对、代码美化与压缩、信息编解码转换、二维码生成与解码、图片Base64编解码转换、Markdown、 网页油猴、网页取色器、脑图(Xmind)等贴心工具,甚至在目前新版本的FeHelper中,还集成了FH开发者工具, 如果你也想自己搞一个工具集成到FeHelper中,那这一定能满足到你。另外,本站也提供部分工具的在线版本,欢迎使用,欢迎反馈!
点击按钮快速安装 Chrome版 Firefox版 Microsoft Edge版
FeHelper-version FeHelper-rating FeHelper-users
FeHelper 已在Github开源,也欢迎大家提issue,或者直接提交PR加入进来! 现在就去Github看看>> star fork

背景

昨天在完成一项重构升级工作,将FeHelper中的Js覆盖率检测工具进行全新升级,从原来的「Inject scripts file from ucren's website」方式重构成「chrome extension content-scrpits」。这个事儿难度还是略大的,基本需要将@dron提供的Tracker源码进行重新设计和改造,改造完成后旨在达到这几个目的:

  • http和https的页面均可运行(以前只支持http协议的页面)
  • 支持内网域名下正常使用,如:localhost、127.0.0.1
  • 检测速度能大幅度提升(不再需要通过一个server端做代理,来获取js文件内容)

改造难度

CSS中的content属性应该大家都不陌生,conteng属性是和:befor、:after伪类搭配使用的,最常见的使用方法一般如下:

<div class="mod-testcase"></div>
<style type="text/css">
    div.mod-testcase:before {
        content:'测试用例开始!'
    }
    div.mod-testcase:after {
        content:'测试用例结束!'
    }
</style>

其实这个content是可以直接访问到该节点的Attribute的,比如,上面的代码可以改为:

#css #content 浏览(1642) 阅读全文 评论