JSConsole VS Rosin

[haledeng]

Rosin

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）

• 在页面中引入脚本

  原理

• 引入的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上面