Merge pull request #518 from Tencent/dev

v3.14.0
Tencent · Mar 23, 2022 · 802b35f · 802b35f
2 parents 2977cf0 + b92fe53
commit 802b35f
Show file tree

Hide file tree

Showing 21 changed files with 909 additions and 515 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,15 @@
 English | [简体中文](./CHANGELOG_CN.md)
 
+## 3.14.0 (2022-03-23)
+
+- `Feat(Core)` Add new option `pluginOrder` to adjust the order of built-in and custom plugins, see [Public Properties & Methods](./doc/public_properties_methods.md).
+- `Feat(Core)` Panel will auto scroll to previous position when switching plugin panel.
+- `Feat(Network)` Add response size.
+- `Feat(Network)` Add support for `transfer-encoding: chunked`, now streaming response can be recorded.
+- `Feat(Network)` Improve rendering performance of large Response data by cropping the displayed response content.
+- `Refactor(Network)` Now network records will be more accurate by using Proxy to prevent `XMLHttpRequest | fetch` overwriting by other request libraries (like Axios).
+
+
 ## 3.13.0 (2022-03-15)
 
 - `Feat(Log)` Add new option `log.showTimestames`, see [Public Properties & Methods](./doc/public_properties_methods.md).

diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
@@ -1,5 +1,15 @@
 [English](./CHANGELOG.md) | 简体中文
 
+## 3.14.0 (2022-03-23)
+
+- `Feat(Core)` 新增配置项 `pluginOrder` 来调整插件面板的排序，见 [公共属性及方法](./doc/public_properties_methods_CN.md)。
+- `Feat(Core)` 切换插件面板时，面板会自动滚动到上次的位置。
+- `Feat(Network)` 新增显示 Response 的体积。
+- `Feat(Network)` 新增对 `transfer-encoding: chunked` 的支持，现在可记录流式回包（stream response）。
+- `Feat(Network)` 展示时裁剪过大的 Response 回包以提高渲染性能。
+- `Refactor(Network)` 提高网络记录的准确性，以避免被外部库（如 Axios）覆盖；方法是对 `XMLHttpRequest | fetch` 使用 Proxy。
+
+
 ## 3.13.0 (2022-03-15)
 
 - `Feat(Log)` 新增配置项 `log.showTimestames`，见 [公共属性及方法](./doc/public_properties_methods_CN.md)。

diff --git a/dev/network.html b/dev/network.html
@@ -7,8 +7,8 @@
   <link href="./lib/weui.min.css" rel="stylesheet"/>
   <link href="./lib/demo.css" rel="stylesheet"/>
 
-  <script src="../dist/vconsole.min.js"></script>
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <script src="../dist/vconsole.min.js"></script>
 </head>
 <body ontouchstart>
   <div class="page">
@@ -19,6 +19,7 @@
       <a onclick="postAjax()" href="javascript:;" class="weui_btn weui_btn_default">POST XHR (Data: Object)</a>
       <a onclick="postAjax('json')" href="javascript:;" class="weui_btn weui_btn_default">POST XHR (Data: JSON String)</a>
       <a onclick="optionsXHR()" href="javascript:;" class="weui_btn weui_btn_default">OPTIONS XHR</a>
+      <a onclick="xhrStream()" href="javascript:;" class="weui_btn weui_btn_default">XHR Stream</a>
     </div>
 
     <div class="section">
@@ -33,6 +34,7 @@
       <a onclick="postFetchByRequest()" href="javascript:;" class="weui_btn weui_btn_default">POST Fetch Using XHR</a>
       <a onclick="optionsFetch()" href="javascript:;" class="weui_btn weui_btn_default">OPTIONS Fetch</a>
       <a onclick="fetchIOSLowBug()" href="javascript:;" class="weui_btn weui_btn_default">Fetch iOS LowBug</a>
+      <a onclick="fetchStream()" href="javascript:;" class="weui_btn weui_btn_default">Fetch Steam</a>
     </div>
 
     <div class="section">
@@ -131,16 +133,24 @@
 }
 
 function getFetch() {
+  vConsole.show();
   window.fetch('./data/success.json?method=fetchGet&id=' + Math.random(), {
     method: 'GET',
     headers: {
       'custom-header': 'foobar',
       'content-type': 'application/json'
     },
   }).then((data) => {
-    return data.json();
+    console.log('getFetch() response:', data);
+    setTimeout(() => {
+      data.json().then((res) => {
+        console.log(res);
+      });
+    }, 3000);
+    // return data;
+    // return data.json();
   }).then((data) => {
-    console.log('get Fetch Response:', data);
+    // console.log('getFetch() json:', data);
   });
 }
 
@@ -161,7 +171,6 @@
   });
 }
 
-
 function getFetchSimple() {
   window.fetch('./data/large.json?type=fetchGet&id=' + Math.random()).then((data) => {
     return data.json();
@@ -256,6 +265,74 @@
   });
 }
 
+function fetchStream() {
+  vConsole.show();
+  window.fetch('./data/stream.flv?id=' + Math.random()).then((response) => {
+    console.log('then response', 'bodyUsed:', response.bodyUsed, 'locked:', response.body.locked);
+    // console.log(response.text())
+    // return;
+    const reader = response.body.getReader();
+    console.log('then response', 'bodyUsed:', response.bodyUsed, 'locked:', response.body.locked);
+    let bytesReceived = 0;
+
+    return reader.read().then(function process(result) {
+        console.log('reader.read', 'bodyUsed:', response.bodyUsed, 'locked:', response.body.locked);
+        if (result.done) {
+          console.log('Failed to find match');
+          return;
+        }
+
+        bytesReceived += result.value.length;
+        console.log(`Received ${bytesReceived} bytes.`);
+
+        if (bytesReceived > 3000000) {
+          reader.cancel();
+          console.log('Cancel.', response.status);
+          return;
+        }
+
+        return reader.read().then(process);
+      });
+  });
+}
+
+function xhrStream() {
+  vConsole.show();
+  const url = './data/stream.flv?id=' + Math.random();
+  const xhr = new XMLHttpRequest();
+  xhr.timeout = 11000;
+  console.log('xhr type:', typeof xhr, xhr instanceof XMLHttpRequest);
+  xhr.open('GET', url);
+  xhr.send();
+  xhr.onreadystatechange = () => {
+    console.log('XHR onreadystatechange:', 'readyState:', xhr.readyState, 'responseType:', xhr.responseType);
+  };
+  xhr.onprogress = (e) => {
+    // console.log('XHR onprogress:', 'readyState:', xhr.readyState, 'status:', xhr.status, 'loaded:', e.loaded, 'timeStamp:', e.timeStamp);
+    if (e.loaded > 3000000) {
+      xhr.abort();
+    }
+  };
+  xhr.onloadstart = (e) => {
+    // console.log('XHR onloadstart:', e);
+  };
+  xhr.onloadend = (e) => {
+    // console.log('XHR onloadend:', 'readyState:', xhr.readyState, xhr.status, e);
+  };
+  xhr.onload = (e) => {
+    console.log('XHR onload:', 'readyState:', xhr.readyState, xhr.status, xhr.responseType);
+  };
+  xhr.onerror = (e) => {
+    console.log('XHR onerror:', e);
+  };
+  xhr.onabort = (e) => {
+    console.log('XHR onabort:', xhr.readyState, xhr.status, e);
+  };
+  xhr.ontimeout = (e) => {
+    console.log('XHR ontimeout:', e);
+  }
+}
+
 function postImage() {
   console.info('postImage() Start, response should be logged after End');
   const xhr = new XMLHttpRequest();
@@ -269,6 +346,7 @@
 }
 
 function sendBeacon() {
+  vConsole.show();
   console.info('sendBeacon() Start, response should be logged after End');
   window.navigator.sendBeacon('./data/success.json?method=beacon', JSON.stringify({
     foo: 'bar',
@@ -297,16 +375,6 @@
   console.info('axiosRequest() End');
 }
 
-function sendBeacon() {
-  console.info('sendBeacon() Start, response should be logged after End');
-  window.navigator.sendBeacon('./data/success.json?method=beacon', JSON.stringify({
-    foo: 'bar',
-    id: Math.random(),
-    type: 'sendBeacon'
-  }));
-  console.info('sendBeacon() End');
-}
-
 function axiosRequest(method) {
   console.info('axiosRequest() Start');
   axios({

diff --git a/dev/plugin.html b/dev/plugin.html
@@ -25,18 +25,13 @@
 
 <script>
 window.vConsole = new window.VConsole({
-  maxLogNumber: 1000,
-  // disableLogScrolling: true,
+  pluginOrder: ['tab1', 'storage', 'element', 'network'],
   onReady: function() {
     console.log('vConsole is ready.');
   },
-  onClearLog: function() {
-    console.log('on clearLog');
-  }
 });
 
 function newTab() {
-  console.info('newTab() Start');
   var tab = new window.VConsole.VConsolePlugin('tab1', 'Tab1');
   tab
   .on('init', function() { console.log(this.id, 'init'); })
@@ -50,7 +45,8 @@
   .on('showConsole', function() { console.log(this.id, 'showConsole'); })
   .on('hideConsole', function() { console.log(this.id, 'hideConsole'); });
   vConsole.addPlugin(tab);
-  console.info('newTab() End');
+  vConsole.show();
+  vConsole.showPlugin('tab1');
 }
 
 function newTabWithTool() {

diff --git a/doc/public_properties_methods.md b/doc/public_properties_methods.md
@@ -48,7 +48,8 @@ A configuration object.
 
 Key                   | Type     | Optional | Default value                               | Description
 --------------------- | -------- | -------- | ------------------------------------------- | -------------------
-defaultPlugins        | Array    | true     | ['system', 'network', 'element', 'storage'] | Listed built-in plugins will be inited and loaded into vConsole. 
+defaultPlugins        | Array(String) | true     | ['system', 'network', 'element', 'storage'] | Listed built-in plugins will be inited and loaded into vConsole. 
+pluginOrder           | Array(String) | true | [] | Plugin panels will be sorted as this list. Plugin not listed will be put last.
 onReady               | Function | true     |                                             | Trigger after vConsole is inited and default plugins is loaded.
 disableLogScrolling   | Boolean  | true     |                                             | If `false`, panel will not scroll to bottom while printing new logs.
 theme                 | String   | true     | 'light'                                     | Theme mode, 'light' | 'dark'.

diff --git a/doc/public_properties_methods_CN.md b/doc/public_properties_methods_CN.md
@@ -47,7 +47,8 @@ vConsole.version // => "3.11.0"
 
 键名                  | 类型      | 可选     | 默认值                                       | 描述
 --------------------- | -------- | -------- | ------------------------------------------- | -------------------
-defaultPlugins        | Array    | true     | ['system', 'network', 'element', 'storage'] | 需要自动初始化并加载的内置插件。 
+defaultPlugins        | Array(String) | true     | ['system', 'network', 'element', 'storage'] | 需要自动初始化并加载的内置插件。 
+pluginOrder           | Array(String) | true | [] | 插件面板会按此列表进行排序，未列出的插件将排在最后。
 onReady               | Function | true     |                                             | 回调方法，当 vConsole 完成初始化并加载完内置插件后触发。
 disableLogScrolling   | Boolean  | true     |                                             | 若为 `false`，有新日志时面板将不会自动滚动到底部。
 theme                 | String   | true     | 'light'                                     | 主题颜色，可选值为 'light' | 'dark'。
@@ -68,6 +69,7 @@ vConsole.setOption('log.maxLogNumber', 5000);
 vConsole.setOption({ log: { maxLogNumber: 5000 } });
 ```
 
+
 ---
 
 ## 方法

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vconsole",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "description": "A lightweight, extendable front-end developer tool for mobile web page.",
   "homepage": "https://github.com/Tencent/vConsole",
   "files": [

diff --git a/src/core/core.svelte b/src/core/core.svelte
@@ -43,6 +43,7 @@
   let isInBottom = true;
   let preivousContentUpdateTime = 0;
   let cssTimer = null;
+  const contentScrollTop: { [pluginId: string]: number } = {};
 
   $: {
     if (show === true) {
@@ -117,6 +118,10 @@
       scrollToBottom();
     }
   };
+  const scrollToPreviousPosition = () => {
+    if (!divContent) { return; }
+    divContent.scrollTop = contentScrollTop[activedPluginId] || 0;
+  };
 
 
   /*************************************
@@ -135,6 +140,9 @@
     }
     activedPluginId = tabId;
     dispatch('changePanel', { pluginId: tabId });
+    setTimeout(() => {
+      scrollToPreviousPosition();
+    }, 0);
   };
   const onTapTopbar = (e, pluginId: string, idx: number) => {
     const topbar = pluginList[pluginId].topbarList[idx];
@@ -200,7 +208,8 @@
     } else {
       isInBottom = false;
     }
-    // (window as any)._vcOrigConsole.log('onContentScroll', isInBottom);
+    contentScrollTop[activedPluginId] = divContent.scrollTop;
+    // (window as any)._vcOrigConsole.log('onContentScroll', activedPluginId, isInBottom, contentScrollTop[activedPluginId]);
   };
 
   /**