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 条评论
登录 后参与评论

相关文章

来自专栏Java帮帮-微信公众号-技术文章全总结

RabbitMQ详解解答【面试+工作】

如果安装rabbitMQ首先安装基于erlang语言支持的OTP软件,然后在下载rabbitMQ软件进行安装(安装过程都是下一步,在此不在说了)

861
来自专栏dotnet core相关

使用cookie来做身份认证

这里先讲一下Authentication和Authorization两个词的区别。

1989
来自专栏iKcamp

iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 视图Nunjucks

视频地址:https://www.cctalk.com/v/15114923888328 视图 Nunjucks 彩虹是上帝和人类立的约,上帝不会再用洪水灭人...

2838
来自专栏lgp20151222

养成良好的开发习惯

写数据库的crud的时候,能批量就批量了,别写什么一个id查一个数据,批量获取就包含了它了,只要再写一个类处理一下,就省下很多sql语句了。

833
来自专栏pangguoming

AngularJS中的按需加载ocLazyLoad

初学者,有不足的地方希望各位指出 一、前言     ocLoayLoad是AngularJS的模块按需加载器。一般在小型项目里,首次加载页面就下载好所有的资源...

3428
来自专栏鬼谷君

mysql备份与恢复

2172
来自专栏LanceToBigData

细说log4j

可能做过java项目的基本上都是用过log4j,它是用来做java日志的。比如我们做一个项目分为很多的模块,那我们怎么想要知道它什么时候启动了,这时候我们可以使...

2045
来自专栏xingoo, 一个梦想做发明家的程序员

Tomcat 6 --- JNDI详解

JNDI(Java Naming and Directory Interface, Java命名和目录接口),说白了,就是通过配置一些xml文件,方便用户直接...

1977
来自专栏PHP在线

CI一些优秀实践

最近准备接手改进一个别人用Codeigniter写的项目,虽然之前也有用过CI,但是是完全按着自己的意思写的,没按CI的一些套路。用在公众的项目,最好还是按框架...

3255
来自专栏DOTNET

MongoDB模拟多文档事务操作

Mongodb不支持多文档原子性操作,因此依据两阶段提交协议(Two Phase Commits protocol)来模拟事务。 以两个银行账户之间的转账行为为...

4589

扫码关注云+社区