RosinVSJSConsole

Rosin是一个Fiddler插件,协助开发者进行移动端页面开发调试。

特性

  • 可配置的页面匹配规则
  • 拦截console
  • 日志内容的存储,展示,过滤
  • 脚本运行错误捕获

原理

  • 首先在fiddler里面配置了匹配规则
  • 访问的页面进过fiddler之后,匹配规则会生效,如命中,则在返回的内容中注入脚本。
  • 脚本重写了console的各种方式(也监听了onerror事件)
  • 将console打出的各种消息push到消息队列
  • 队列达到阈值或者间隔的时间到,就将消息通过xhr发送到 http://__rosin__.qq.com
  • rosin插件在fiddler中捕获上面的请求(并且隐藏了,所以看不到这个请求),将请求的body部分显示到面板上面
  • 将log存储到本地 D:\Program Files (x86)\Fiddler2\Scripts\Rosin\Log
            add: function() {
            Array.prototype.push.apply(this._queueArr, arguments);
            // 定时发送消息
            clock.start();

            //队列达到阈值就触发上传
            if (this._queueArr.length >= THRESHOLD) {
                this._post(this._queueArr.splice(0, this._queueArr.length));
                return;
            }
        }

Log 格式:

JSConsole

JSConsole是一个JS命令行调试工具。

如何使用
  • http://jsconsole.com/中输入:listen创建一个session(主要是生成一个GUID)
  • 在页面中引入脚本
    <script src="http://jsconsole.com/remote.js?FAE031CD-74A0-46D3-AE36-757BAB262BEA"></script>
原理
  • 引入的remote.js脚本创建一个隐藏的iframe,Url指向了http://jsconsole.com/remote.html,并且把上面的GUID带上
  • 重写console中的方法,这里的问题是:如何把消息push到jsconsole.com
  • 页面调用console等方法时,实际通过postMessage是向iframe发送了一条消息。
        log: function () {
         var argsObj = stringify(arguments.length == 1 ? 
                  arguments[0] : [].slice.call(arguments, 0));
        ar response = [];
        [].forEach.call(arguments, function (args) {
            response.push(stringify(args, true));
        });

        var msg = JSON.stringify({ response: response, 
              cmd: 'remote console.log', type: msgType });

        if (remoteWindow) {
        remoteWindow.postMessage(msg, origin);
        } else {
            queue.push(msg);
        }    
        msgType = '';
        }
  • iframe中内嵌的页面收到消息后,通过EventSource向server发送信息内容(类似于socket)
  • 日志显示在jsconsole.com上面

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云计算教程系列

如何从Django应用程序发送Web推送通知

网络不断发展,现在可以实现以前只能在本机移动设备上使用的功能。JavaScript 服务工作者的引入为Web提供了新的功能,可以执行后台同步,脱机缓存和发送推送...

2616
来自专栏云计算教程系列

如何在Ubuntu 14.04中使用NodeJS,SailsJS和DustJS构建SPA(单页应用程序)

Node.js®是一个基于Chrome JavaScript运行时的平台,可轻松构建快速,可扩展的网络应用程序。Node.js使用事件驱动的非阻塞I / O模型...

900
来自专栏编程

Django分离JS代码,处理AJax错误请求

在写Django时候,遇到个错误,这里进行下记录。 都知道Django或者Flask中通过下面这种方式 {%blockjs%}{%endblock%} 能够直接...

3367
来自专栏CSDN技术头条

由浅入深学习JavaScript Debug技巧

我常常看到不少开发者不懂如何Debug JavaScript代码,因此决定写一篇博客为初学者介绍如何Debug。我希望这篇文章可以提供一些有用的信息。我尝试在本...

1729
来自专栏刺客博客

基于宝塔面板安装Aria2+Aria2NG工具

1.2K2
来自专栏魏艾斯博客www.vpsss.net

WordPress 手动优化和插件优化 MySQL 数据库的方法

1052
来自专栏步履前行

xxl-job 源码分析系列(1)- 配置运行

  XXL-JOB是一个轻量级分布式任务调度平台,当然我司也在用,然后正巧自己想学一学源码分析,就挑正好在用的xxl-job了。

752
来自专栏前端儿

趁webpack5还没出,先升级成webpack4吧

webpack4升级完全指南 webpack4 changelog React 16 加载优化性能

3563
来自专栏JavaEE

Intellij IDEA 使用教程

正所谓工欲善其事,必先利其器,身为码农的我们,拥有得心应手的编辑器就好比如鱼得水,在万行代码中取bug首级就如观鱼赏花!IDEA就堪称是当世之神兵,自诩为最智能...

802
来自专栏散尽浮华

zabbix中配置当memory剩余不足20%时触发报警

在zabbix中默认当内存剩余量不足2G的时候触发报警,并没有使用百分比来触发如下: ? 现在需要配置:当memory剩余不足20%时触发报警,具体操作方法如下...

2426

扫码关注云+社区