feat: Add Request Headers to Network tab. Use short URL and display p…

…arameters in Network tab. (issue Tencent#291)
yumw · Dec 25, 2020 · e066489 · e066489
1 parent 9bc10b8
commit e066489
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,8 @@ English | [简体中文](./CHANGELOG_CN.md)
 - [FEATURE] Add safe area to switch button. (issue #353)
 - [FEATURE] Add `Location` info to System tab. (issue #343)
 - [FEATURE] Auto move input cursor to the bracket after autocomplete command. (issue #293)
+- [FEATURE] Add Request Headers to Network tab.
+- [FEATURE] Use short URL and display parameters in Network tab. (issue #291)
 - [FIX] The position of the switch button will be reset by mistake when clicked.
 - [FIX] Fix `document.documentElement.offsetHeight|offsetWidth` is unreliable in newer browsers. (by @littlee)
 - [FIX] Prevent dispatchEvent for disabled or readOnly elements. (by @norux)

diff --git a/dev/network.html b/dev/network.html
@@ -43,7 +43,8 @@
 function getAjax() {
   console.info('getAjax() Start, response should be logged after End');
   const xhr = new XMLHttpRequest();
-  xhr.open('GET', './data/success.json?type=xhr');
+  xhr.open('GET', './data/success.json?type=xhr&id=' + Math.random());
+  xhr.setRequestHeader('custom-header', 'foobar');
   xhr.send();
   xhr.onload = () => {
     console.log('getAjax Response:', JSON.parse(xhr.response));
@@ -56,8 +57,12 @@
 
 function getFetch() {
   console.info('getFetch() Start, response should be logged after End');
-  window.fetch('./data/success.json?type=fetch', {
-    method: 'GET'
+  window.fetch('./data/success.json?type=fetch&id=' + Math.random(), {
+    method: 'GET',
+    headers: {
+      'custom-header': 'foobar',
+      'content-type': 'application/json'
+    },
   }).then((data) => {
     return data.json();
   }).then((data) => {
@@ -73,6 +78,7 @@
     body: { foo: 'bar', id: Math.random() },
     // body: new Blob([new ArrayBuffer(233)], { type: 'image/png' }),
     headers: {
+      'custom-header': 'foobar',
       'content-type': 'application/json'
     },
   }).then((data) => {
@@ -87,14 +93,15 @@
 
 function postFetchByRequest() {
   console.info('postFetchByRequest() Start, response should be logged after End');
-  const req = new Request('./data/success.json?type=fetch', {
+  const headers = new Headers();
+  headers.append('custom-header', 'foobar');
+  headers.append('content-type', 'application/json');
+  // headers.append('content-type', 'application/x-www-form-urlencoded');
+  const req = new Request('./data/success.json?type=fetch&id=' + Math.random(), {
     method: 'POST',
     // body: { foo: 'bar', id: Math.random() },
     body: new Blob([new ArrayBuffer(233)], { type: 'image/png' }),
-    headers: {
-      'content-type': 'application/json'
-      // 'content-type': 'application/x-www-form-urlencoded'
-    },
+    headers: headers,
   });
   window.fetch(req).then((data) => {
     return data.json();

diff --git a/dist/vconsole.min.js b/dist/vconsole.min.js
diff --git a/src/network/item.html b/src/network/item.html
@@ -1,15 +1,28 @@
 <div class="vc-group {{actived ? 'vc-actived' : ''}}">
   <dl class="vc-table-row vc-group-preview" data-reqid="{{id}}">
-    <dd class="vc-table-col vc-table-col-4">{{url}}</dd>
+    <dd class="vc-table-col vc-table-col-4">{{name}}</dd>
     <dd class="vc-table-col">{{method}}</dd>
     <dd class="vc-table-col">{{status}}</dd>
     <dd class="vc-table-col">{{costTime}}</dd>
   </dl>
   <div class="vc-group-detail">
+    <div>
+      <dl class="vc-table-row vc-left-border">
+        <dt class="vc-table-col vc-table-col-title">General</dt>
+      </dl>
+      <div class="vc-table-row vc-left-border vc-small">
+        <div class="vc-table-col vc-table-col-2">URL</div>
+        <div class="vc-table-col vc-table-col-4 vc-max-height-line">{{url}}</div>
+      </div>
+      <div class="vc-table-row vc-left-border vc-small">
+        <div class="vc-table-col vc-table-col-2">Method</div>
+        <div class="vc-table-col vc-table-col-4 vc-max-height-line">{{method}}</div>
+      </div>
+    </div>
     {{if (header !== null)}}
     <div>
       <dl class="vc-table-row vc-left-border">
-        <dt class="vc-table-col vc-table-col-title">Headers</dt>
+        <dt class="vc-table-col vc-table-col-title">Response Headers</dt>
       </dl>
       {{for (var key in header)}}
       <div class="vc-table-row vc-left-border vc-small">
@@ -19,6 +32,19 @@
       {{/for}}
     </div>
     {{/if}}
+    {{if (requestHeader !== null)}}
+    <div>
+      <dl class="vc-table-row vc-left-border">
+        <dt class="vc-table-col vc-table-col-title">Request Headers</dt>
+      </dl>
+      {{for (var key in requestHeader)}}
+      <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">{{requestHeader[key]}}</div>
+      </div>
+      {{/for}}
+    </div>
+    {{/if}}
     {{if (getData !== null)}}
     <div>
       <dl class="vc-table-row vc-left-border">

diff --git a/src/network/network.js b/src/network/network.js
@@ -34,6 +34,7 @@ class VConsoleNetworkTab extends VConsolePlugin {
     this.isInBottom = true; // whether the panel is in the bottom
     this._open = undefined; // the origin function
     this._send = undefined;
+    this._setRequestHeader = undefined;
 
     this.mockAjax();
     this.mockFetch();
@@ -98,8 +99,10 @@ class VConsoleNetworkTab extends VConsolePlugin {
     if (window.XMLHttpRequest) {
       window.XMLHttpRequest.prototype.open = this._open;
       window.XMLHttpRequest.prototype.send = this._send;
+      window.XMLHttpRequest.prototype.setRequestHeader = this._setRequestHeader;
       this._open = undefined;
       this._send = undefined;
+      this._setRequestHeader = undefined
     }
   }
 
@@ -179,11 +182,13 @@ class VConsoleNetworkTab extends VConsolePlugin {
     // update dom
     let domData = {
       id: id,
+      name: item.name,
       url: item.url,
       status: item.status,
       method: item.method || '-',
       costTime: item.costTime>0 ? item.costTime+'ms' : '-',
       header: item.header || null,
+      requestHeader: item.requestHeader || null,
       getData: item.getData || null,
       postData: item.postData || null,
       response: null,
@@ -262,11 +267,13 @@ class VConsoleNetworkTab extends VConsolePlugin {
     let _XMLHttpRequest = window.XMLHttpRequest;
     if (!_XMLHttpRequest) { return; }
 
-    let that = this;
-    let _open = window.XMLHttpRequest.prototype.open,
-        _send = window.XMLHttpRequest.prototype.send;
+    const that = this;
+    const _open = window.XMLHttpRequest.prototype.open,
+          _send = window.XMLHttpRequest.prototype.send,
+          _setRequestHeader = window.XMLHttpRequest.prototype.setRequestHeader;
     that._open = _open;
     that._send = _send;
+    that._setRequestHeader = _setRequestHeader;
 
     // mock open()
     window.XMLHttpRequest.prototype.open = function() {
@@ -352,6 +359,19 @@ class VConsoleNetworkTab extends VConsolePlugin {
       return _open.apply(XMLReq, args);
     };
 
+    // mock setRequestHeader()
+    window.XMLHttpRequest.prototype.setRequestHeader = function() {
+      const XMLReq = this;
+      const args = [].slice.call(arguments);
+
+      const item = that.reqList[XMLReq._requestID];
+      if (item) {
+        if (!item.requestHeader) { item.requestHeader = {}; }
+        item.requestHeader[args[0]] = args[1];
+      }
+      return _setRequestHeader.apply(XMLReq, args);
+    };
+
     // mock send()
     window.XMLHttpRequest.prototype.send = function() {
       let XMLReq = this;
@@ -361,8 +381,11 @@ class VConsoleNetworkTab extends VConsolePlugin {
       let item = that.reqList[XMLReq._requestID] || {};
       item.method = XMLReq._method ? XMLReq._method.toUpperCase() : 'GET';
 
-      let query = XMLReq._url ? XMLReq._url.split('?') : []; // a.php?b=c&d=?e => ['a.php', 'b=c&d=', '?e']
-      item.url = query.shift(); // => ['b=c&d=', '?e']
+      let query = XMLReq._url ? XMLReq._url.split('?') : []; // a.php?b=c&d=?e => ['a.php', 'b=c&d=', 'e']
+      item.url = XMLReq._url || '';
+      item.name = query.shift() || ''; // => ['b=c&d=', 'e']
+      item.name = item.name.replace(new RegExp('[/]*$'), '').split('/').pop() || '';
+      item.name += '?' + query;
 
       if (query.length > 0) {
         item.getData = {};
@@ -416,22 +439,28 @@ class VConsoleNetworkTab extends VConsolePlugin {
       let item = that.reqList[id] || {};
       let query = [],
           url = '',
-          method = 'GET';
+          method = 'GET',
+          requestHeader = null;
 
       // handle `input` content
       if (tool.isString(input)) { // when `input` is a string
         method = init.method || 'GET';
         url = input;
+        requestHeader = init.headers;
       } else { // when `input` is a `Request` object
         method = input.method || 'GET';
         url = input.url;
+        requestHeader = input.headers;
       }
       query = url.split('?');
-      url = query.shift();
 
       item.id = id;
       item.method = method;
+      item.requestHeader = requestHeader;
       item.url = url;
+      item.name = query.shift() || '';
+      item.name = item.name.replace(new RegExp('[/]*$'), '').split('/').pop() || '';
+      item.name += '?' + query;
 
       if (query.length > 0) {
         item.getData = {};