show XHR's method, query string parameters and form data

zyn-github · May 18, 2017 · 2bf5c3f · 2bf5c3f
1 parent 2285345
commit 2bf5c3f
Show file tree

Hide file tree

Showing 6 changed files with 3,502 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,7 +1,9 @@
 English | [简体中文](./CHANGELOG_CN.md)
 
-#### V2.5.3-dev (2016-12-27)
+#### V2.5.3-dev (2017-xx-xx)
 
+- [FEATURE] Support `Query String Parameters` and `Form Data` in Network tab.
+- [IMPROVE] Auto format JSON response in Network tab.
 - [IMPROVE] Support CSP rule `unsafe-eval`.
 
 

diff --git a/dist/vconsole.min.js b/dist/vconsole.min.js
diff --git a/example/demo1.html b/example/demo1.html
@@ -29,7 +29,8 @@ <h1 class="page_title">Demo 1</h1>
     <a href="javascript:;" class="weui_btn weui_btn_default js_btn_log_obj">打印Object</a>
     <a href="javascript:;" class="weui_btn weui_btn_default js_btn_trigger_error">触发JS Error</a>
     <a href="javascript:;" class="weui_btn weui_btn_default js_btn_log_sys">打印到系统面板</a>
-    <a href="javascript:;" class="weui_btn weui_btn_default js_btn_ajax">发起AJAX</a>
+    <a href="javascript:;" class="weui_btn weui_btn_default js_btn_ajax_get">发起AJAX(GET)</a>
+    <a href="javascript:;" class="weui_btn weui_btn_default js_btn_ajax_post">发起AJAX(POST)</a>
   </div>
   <div class="weui_toptips weui_notice" id="js_tips">已打印log</div>
 </body>
@@ -62,9 +63,16 @@ <h1 class="page_title">Demo 1</h1>
   console.log('[system]', '当前时间戳:', (+new Date()));
   showTips();
 });
-$('.js_btn_ajax').on('tap', function(e) {
+$('.js_btn_ajax_get').on('tap', function(e) {
   // 发起一个AJAX
-  $.post('ajax.php',  { id: Math.random() }, function(resp) {
+  $.get('ajax.php',  { id: Math.random(), action: 'Get' }, function(resp) {
+    console.log(resp);
+  });
+  showTips();
+});
+$('.js_btn_ajax_post').on('tap', function(e) {
+  // 发起一个AJAX
+  $.post('ajax.php',  { id: Math.random(), action: 'Post' }, function(resp) {
     console.log(resp);
   });
   showTips();

diff --git a/src/network/header.html b/src/network/header.html
@@ -1,5 +1,6 @@
 <dl class="vc-table-row">
   <dd class="vc-table-col vc-table-col-4">Name {{if (count > 0)}}({{count}}){{/if}}</dd>
+  <dd class="vc-table-col">Method</dd>
   <dd class="vc-table-col">Status</dd>
   <dd class="vc-table-col">Time</dd>
 </dl>
diff --git a/src/network/item.html b/src/network/item.html
@@ -1,6 +1,7 @@
 <div class="vc-group">
   <dl class="vc-table-row vc-group-preview">
     <dd class="vc-table-col vc-table-col-4">{{url}}</dd>
+    <dd class="vc-table-col">{{method}}</dd>
     <dd class="vc-table-col">{{status}}</dd>
     <dd class="vc-table-col">{{costTime}}</dd>
   </dl>
@@ -9,21 +10,52 @@
       <dl class="vc-table-row vc-left-border">
         <dt class="vc-table-col vc-table-col-title">Headers</dt>
       </dl>
-      {{for (var key in header)}}
+      {{if (header !== null)}}
+        {{for (var key in header)}}
+        <div class="vc-table-row vc-left-border vc-small">
+          <div class="vc-table-col vc-table-col-2">{{key}}</div>
+          <div class="vc-table-col vc-table-col-4 vc-max-height-line">{{header[key]}}</div>
+        </div>
+        {{/for}}
+      {{else}}
+      <div class="vc-table-row vc-left-border vc-small">
+        <div class="vc-table-col vc-table-col-2">-</div>
+      </div>
+      {{/if}}
+    </div>
+    {{if (getData !== null)}}
+    <div>
+      <dl class="vc-table-row vc-left-border">
+        <dt class="vc-table-col vc-table-col-title">Query String Parameters</dt>
+      </dl>
+      {{for (var key in getData)}}
+      <div class="vc-table-row vc-left-border vc-small">
+        <div class="vc-table-col vc-table-col-2">{{key}}</div>
+        <div class="vc-table-col vc-table-col-4 vc-max-height-line">{{getData[key]}}</div>
+      </div>
+      {{/for}}
+    </div>
+    {{/if}}
+    {{if (postData !== null)}}
+    <div>
+      <dl class="vc-table-row vc-left-border">
+        <dt class="vc-table-col vc-table-col-title">Form Data</dt>
+      </dl>
+      {{for (var key in postData)}}
       <div class="vc-table-row vc-left-border vc-small">
         <div class="vc-table-col vc-table-col-2">{{key}}</div>
-        <div class="vc-table-col vc-table-col-4 vc-max-height-line">{{header[key]}}</div>
+        <div class="vc-table-col vc-table-col-4 vc-max-height-line">{{postData[key]}}</div>
       </div>
       {{/for}}
     </div>
+    {{/if}}
     <div>
       <dl class="vc-table-row vc-left-border">
         <dt class="vc-table-col vc-table-col-title">Response</dt>
       </dl>
       <div class="vc-table-row vc-left-border vc-small">
-        <pre class="vc-table-col vc-max-height vc-min-height">{{response}}</pre>
+        <pre class="vc-table-col vc-max-height vc-min-height">{{response || ''}}</pre>
       </div>
     </div>
-
   </div>
 </div>
diff --git a/src/network/network.js b/src/network/network.js
@@ -166,16 +166,49 @@ class VConsoleNetworkTab extends VConsolePlugin {
     // update dom
     let domData = {
       url: item.url,
-      status: item.status || '-',
-      type: '-',
+      status: item.status,
+      method: item.method || '-',
       costTime: item.costTime>0 ? item.costTime+'ms' : '-',
-      header: item.header,
-      response: tool.htmlEncode(item.response)
+      header: item.header || null,
+      getData: item.getData || null,
+      postData: item.postData || null,
+      response: null
     };
-    if (item.readyState <= 1) {
+    switch (item.responseType) {
+      case '':
+      case 'text':
+        // try to parse JSON
+        if (tool.isString(item.response)) {
+          try {
+            domData.response = JSON.parse(item.response);
+            domData.response = JSON.stringify(domData.response, null, 1);
+            domData.response = tool.htmlEncode(domData.response);
+          } catch (e) {
+            // not a JSON string
+            domData.response = tool.htmlEncode(item.response);
+          }
+        } else {
+          domData.response = Object.prototype.toString.call(item.response);
+        }
+        break;
+      case 'json':
+        domData.response = JSON.stringify(item.response, null, 1);
+        break;
+      case 'blob':
+      case 'document':
+      case 'arraybuffer':
+      default:
+        domData.response = Object.prototype.toString.call(item.response);
+        break;
+    }
+    if (item.readyState == 0 || item.readyState == 1) {
       domData.status = 'Pending';
-    } else if (item.readyState < 4) {
+    } else if (item.readyState == 2 || item.readyState == 3) {
       domData.status = 'Loading';
+    } else if (item.readyState == 4) {
+      // do nothing
+    } else {
+      domData.status = 'Unknown';
     }
     let $new = $.render(tplItem, domData),
         $old = this.domList[id];
@@ -219,11 +252,14 @@ class VConsoleNetworkTab extends VConsolePlugin {
     window.XMLHttpRequest.prototype.open = function() {
       let XMLReq = this;
       let args = [].slice.call(arguments),
+          method = args[0],
           url = args[1],
           id = that.getUniqueID();
 
-      // may be used by other methods
+      // may be used by other functions
       XMLReq._requestID = id;
+      XMLReq._method = method;
+      XMLReq._url = url;
 
       // mock onreadystatechange
       let _onreadystatechange = XMLReq.onreadystatechange || function() {};
@@ -232,8 +268,9 @@ class VConsoleNetworkTab extends VConsolePlugin {
         let item = that.reqList[id] || {};
 
         // update status
-        item.url = url;
         item.readyState = XMLReq.readyState;
+        item.status = XMLReq.status;
+        item.responseType = XMLReq.responseType;
 
         if (XMLReq.readyState == 0) {
           // UNSENT
@@ -259,7 +296,6 @@ class VConsoleNetworkTab extends VConsolePlugin {
           // LOADING
         } else if (XMLReq.readyState == 4) {
           // DONE
-          item.status = XMLReq.status;
           item.endTime = +new Date(),
           item.costTime = item.endTime - (item.startTime || item.endTime);
           item.response = XMLReq.response;
@@ -274,6 +310,51 @@ class VConsoleNetworkTab extends VConsolePlugin {
       return _open.apply(XMLReq, args);
     };
 
+    // mock send()
+    window.XMLHttpRequest.prototype.send = function() {
+      let XMLReq = this;
+      let args = [].slice.call(arguments),
+          data = args[0];
+
+      let item = that.reqList[XMLReq._requestID] || {};
+      item.method = XMLReq._method.toUpperCase();
+
+      let query = XMLReq._url.split('?'); // a.php?b=c&d=?e => ['a.php', 'b=c&d=', '?e']
+      item.url = query.shift(); // => ['b=c&d=', '?e']
+
+      if (query.length > 0) {
+        item.getData = {};
+        query = query.join('?'); // => 'b=c&d=?e'
+        query = query.split('&'); // => ['b=c', 'd=?e']
+        for (let q of query) {
+          q = q.split('=');
+          item.getData[ q[0] ] = q[1];
+        }
+      }
+
+      if (item.method == 'POST') {
+
+        // save POST data
+        if (tool.isString(data)) {
+          let arr = data.split('&');
+          item.postData = {};
+          for (let q of arr) {
+            q = q.split('=');
+            item.postData[ q[0] ] = q[1];
+          }
+        } else if (tool.isPlainObject(data)) {
+          item.postData = data;
+        }
+
+      }
+
+      if (!XMLReq._noVConsole) {
+        that.updateRequest(XMLReq._requestID, item);
+      }
+
+      return _send.apply(XMLReq, args);
+    };
+
   };
 
   /**