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

相关文章

来自专栏Hadoop实操

如何使用StreamSets实时采集Kafka中嵌套JSON数据并写入Hive表

2204
来自专栏小白客

Web前端基础【4】--HTTP标准

HTTP协议(超文本传输协议),是用于从www服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效,减少网络传输。 一:HTTP请求过程 HTTP协议...

3417
来自专栏Danny的专栏

ASP.NET 实现发送邮件 + 多个收件人 + 多个附件

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

602
来自专栏DeveWork

5 款前沿的WordPress主题后台选项开发框架推荐

在开发WordPress 主题的时候,借用成熟的WordPress 主题后台选项开发框架可以为我们省下不少功夫。相信你接触过不少国人做的所谓“原创”主题,一看后...

18110
来自专栏技术博文

http状态码一览表

http状态码一览表 1**:请求收到,继续处理 2**:操作成功收到,分析、接受 3**:完成此请求必须进一步处理 4**:请求包含一个错误语法或不能完成 5...

3297
来自专栏欧阳大哥的轮子

HTTP协议授权认证简介

我们平时在打开网页时或者在用浏览器访问你局域网的路由器时,经常会出现弹出登陆页面框要进行登陆授权后才能继续访问。比如如下提示:

754
来自专栏Java技术栈

Spring Boot 2.x 新特性总结及迁移指南

这一篇文章主要讲解 Spring Boot 2.x 与 1.5.x 的区别,2.x 主要更新了什么东西,以便对 Spring Boot 2.x 有一个详细的了解...

862
来自专栏恰同学骚年

Key/Value之王Memcached初探:三、Memcached解决Session的分布式存储场景的应用

  应用层服务器(这里一般指Web服务器)处理网站应用的业务逻辑,应用的一个最显著的特点是:应用的无状态性。

613
来自专栏SpringBoot 核心技术

第四十七章:SpringBoot2.0新特性 - Quartz自动化配置集成本章目标SpringBoot 企业级核心技术学习专题构建项目测试总结

2543
来自专栏前端学习心得

页面性能优化办法有哪些?

964

扫码关注云+社区