Merge pull request Tencent#11 from raphealguo/master

Nework Tab Support
DMQ · May 9, 2016 · eb9e850 · eb9e850
2 parents 5e91f42 + f88a1b1
commit eb9e850
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 2 deletions.
diff --git a/dist/vconsole.min.js b/dist/vconsole.min.js
diff --git a/example/ajax.php b/example/ajax.php
@@ -0,0 +1,3 @@
+<?php
+
+echo "Hello vConsole Ajax!";
diff --git a/example/demo1.html b/example/demo1.html
@@ -37,6 +37,7 @@ <h1 class="page_title">Demo 1</h1>
 // vConsole完成初始化后将调用ready()的回调函数
 vConsole.ready(function() {
   console.info('欢迎使用 vConsole。vConsole 是一个由微信公众平台前端团队研发的 Web 前端开发者面板，可用于展示 console 日志，方便开发、调试。');
+  ajax();
 });
 
 $('.js_btn_log').on('tap', function(e) {
@@ -71,5 +72,22 @@ <h1 class="page_title">Demo 1</h1>
     $('#js_tips').hide();
   }, 1500);
 }
+
+function ajax(){
+  var xhr   = new XMLHttpRequest();
+  xhr.open("GET", "ajax.php", true);
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState == 4) {
+      xhr.onreadystatechange = null;
+      var status = xhr.status;
+      if (status >= 200 && status < 400) {
+        console.log(xhr.responseText);
+      }
+    }
+  };
+  xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+  xhr.send();
+}
+
 </script>
 </html>
diff --git a/src/tpl.html b/src/tpl.html
@@ -7,6 +7,7 @@
     <div class="vc-tabbar">
       <a class="vc-tab vc-actived" data-tab="default" id="__vc_tab_default" href="javascript:;">日志</a>
       <a class="vc-tab" data-tab="system" id="__vc_tab_system" href="javascript:;">系统</a>
+      <a class="vc-tab" data-tab="network" id="__vc_tab_network" href="javascript:;">Network</a>
     </div>
     <div class="vc-content">
       <div class="vc-logbox vc-actived" id="__vc_log_default">
@@ -15,6 +16,9 @@
       <div class="vc-logbox" id="__vc_log_system">
         <div class="vc-log"></div>
       </div>
+      <div class="vc-logbox" id="__vc_log_network">
+        <div class="vc-log"></div>
+      </div>
     </div>
     <div class="vc-toolbar">
       <a href="javascript:;" class="vc-tool vc-clear">清空</a>

diff --git a/src/vconsole.js b/src/vconsole.js
@@ -15,7 +15,7 @@ function vConsole() {
   this.html = tpl;
   this.$dom = null;
   this.activedTab = 'default';
-  this.tabList = ['default', 'system'];
+  this.tabList = ['default', 'system', 'network'];
   this.console = {}; // store native console methods
   this.isReady = false;
   this.readyCallback = [];
@@ -25,6 +25,7 @@ function vConsole() {
     that._render();
     that._bindEvent();
     that._mokeConsole();
+    that._mokeAjax();
     that._autoRun();
   });
 }
@@ -111,6 +112,49 @@ vConsole.prototype._mokeConsole = function() {
   };
 };
 
+/**
+ * moke ajax requst
+ * @private
+ */
+vConsole.prototype._mokeAjax = function() {
+  var _XMLHttpRequest = window.XMLHttpRequest;
+
+  if (!_XMLHttpRequest) return;
+
+  var _open = window.XMLHttpRequest.prototype.open;
+  var _send = window.XMLHttpRequest.prototype.send;
+
+  window.XMLHttpRequest.prototype.open = function(){
+    var that = this;
+    var _arguments = arguments;
+
+    //lazy assign onreadystatechange
+    setTimeout(function(){
+      var _onreadystatechange = that.onreadystatechange || function(){};
+      that.onreadystatechange = function(){
+        if (that.readyState == 4) {
+          that._endTime = +new Date();
+          var url = _arguments[1] || "unknow URL",
+              costTime = that._endTime - (that._startTime||that._endTime);
+          console.log("[network][" + that.status + "] [" + costTime + "ms] " + url);
+        }
+
+        return _onreadystatechange.apply(that, arguments);
+      };
+    }, 0);
+
+    return _open.apply(that, _arguments);
+  };
+  window.XMLHttpRequest.prototype.send = function(){
+    var that = this;
+    that._startTime = +new Date();
+    setTimeout(function(){
+      _send.apply(that, arguments);
+    }, 1);
+  };
+
+};
+
 /**
  * auto run after initialization
  * @private