Merge pull request #524 from Tencent/dev

v3.14.4

Author: Maizify

CHANGELOG.md

@@ -1,5 +1,16 @@
 English | [简体中文](./CHANGELOG_CN.md)
 
+## 3.14.4 (2022-03-31)
+
+- `Fix(Network)` Fix CPU high load bug when response is a large string. (issue #515)
+- `Fix(Network)` Fix missing Request Headers issue in XHR. (issue #522)
+
+
+## 3.14.3 (2022-03-28)
+
+- `Fix(Network)` Fix `response.size` error.
+
+
 ## 3.14.2 (2022-03-25)
 
 - `Fix(Network)` Remove debugging console.log.

CHANGELOG_CN.md

@@ -1,5 +1,16 @@
 [English](./CHANGELOG.md) | 简体中文
 
+## 3.14.4 (2022-03-31)
+
+- `Fix(Network)` 修复回包超大时导致的卡死问题。 (issue #515)
+- `Fix(Network)` 修复 XHR 中缺失显示 Request Headers 的问题。 (issue #522)
+
+
+## 3.14.3 (2022-03-28)
+
+- `Fix(Network)` 修复 `response.size` 错误。
+
+
 ## 3.14.2 (2022-03-25)
 
 - `Fix(Network)` 删除调试日志。

README.md

@@ -38,7 +38,7 @@ See [Tutorial](./doc/tutorial.md) for more usage details.
 
 For installation, there are 2 primary ways of adding vConsole to a project:
 
-#### Method 1: Using npm (Suggested)
+#### Method 1: Using npm (Recommended)
 
 ```bash
 $ npm install vconsole

dev/data/massive.json

@@ -29,6 +29,7 @@
       <a onclick="allDataTypes()" href="javascript:;" class="weui_btn weui_btn_default">All Data Types</a>
       <a onclick="logTypes()" href="javascript:;" class="weui_btn weui_btn_default">Log/Info/Debug/Warn/Error</a>
       <a onclick="differentPanelLog()" href="javascript:;" class="weui_btn weui_btn_default">Output to Different Panels</a>
+      <a onclick="logTime()" href="javascript:;" class="weui_btn weui_btn_default">console.time</a>
     </div>
 
     <div class="section">
@@ -126,6 +127,16 @@
   console.log('[foobar]', 'This log should be shown in Log panel. (No "foobar" plugin.)');
 }
 
+function logTime() {
+  vConsole.show();
+  const label = 'aaa';
+  console.time(label);
+  console.log('Wait...');
+  setTimeout(() => {
+    console.timeEnd(label);
+  }, Math.ceil(Math.random() * 2000));
+}
+
 function formattingLog() {
   console.log('%c red,%c blue, %c bold.', 'color:red', 'color:blue', 'font-weight:bold', '(Use %c format)');
   console.log('%c %c Continuous styling, only blue is applied.', 'color:red', 'color:blue', '(Use %c format)');

dev/log.html

@@ -18,8 +18,10 @@
       <a onclick="getAjax()" href="javascript:;" class="weui_btn weui_btn_default">GET XHR</a>
       <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="postAjax('', 'massive.json')" href="javascript:;" class="weui_btn weui_btn_default">POST XHR (Massive Resp)</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>
+      <a onclick="xhrStream('flv')" href="javascript:;" class="weui_btn weui_btn_default">XHR Chunked: flv</a>
+      <a onclick="xhrStream('json')" href="javascript:;" class="weui_btn weui_btn_default">XHR Chunked: json</a>
     </div>
 
     <div class="section">
@@ -42,6 +44,7 @@
 
       <a onclick="sendBeacon()" href="javascript:;" class="weui_btn weui_btn_default">sendBeacon</a>
       <a onclick="axiosRequest('GET')" href="javascript:;" class="weui_btn weui_btn_default">Axios: GET</a>
+      <a onclick="axiosRequest('POST')" href="javascript:;" class="weui_btn weui_btn_default">Axios: POST</a>
       <a onclick="scrolling()" href="javascript:;" class="weui_btn weui_btn_default">Scrolling</a>
       <a onclick="crossDomain()" href="javascript:;" class="weui_btn weui_btn_default">Cross Domain</a>
     </div>
@@ -70,14 +73,11 @@
 
 <script>
 const vConsole = new window.VConsole({
-  maxLogNumber: 1000,
-  // defaultPlugins: ['system', 'network'],
+  // defaultPlugins: ['system'],
   // disableLogScrolling: true,
   onReady: function() {
     console.log('vConsole is ready.');
-    setTimeout(() => {
-      vConsole.showPlugin('network');
-    }, 100);
+    vConsole.showPlugin('network');
   }
 });
 
@@ -90,7 +90,8 @@
   vConsole.show();
 }
 
-function postAjax(postType) {
+function postAjax(postType, file = 'large.json') {
+  showPanel();
   const xhr = new XMLHttpRequest();
   xhr.onload = () => {
     console.log('post XHR Response:', JSON.parse(xhr.response));
@@ -113,7 +114,7 @@
     postData = JSON.stringify(postData);
   }
   console.log('post data:', postData);
-  xhr.open('POST', './data/large.json?method=fetchPost&c=中文');
+  xhr.open('POST', `./data/${file}?method=fetchPost&c=中文`);
   xhr.send(postData);
   // xhr.send(JSON.stringify({foo: 'bar', id: Math.random(), '<xss0>': '<xss1> XSS Attack!'}));
 }
@@ -133,7 +134,7 @@
 }
 
 function getFetch() {
-  vConsole.show();
+  showPanel();
   window.fetch('./data/success.json?method=fetchGet&id=' + Math.random(), {
     method: 'GET',
     headers: {
@@ -296,9 +297,9 @@
   });
 }
 
-function xhrStream() {
+function xhrStream(format = 'flv') {
   vConsole.show();
-  const url = './data/stream.flv?id=' + Math.random();
+  const url = `./data/success.${format}?chunked=1&id=` + Math.random();
   const xhr = new XMLHttpRequest();
   xhr.timeout = 11000;
   console.log('xhr type:', typeof xhr, xhr instanceof XMLHttpRequest);
@@ -357,26 +358,7 @@
 }
 
 function axiosRequest(method) {
-  console.info('axiosRequest() Start');
-  axios({
-    method,
-    url: './data/success.json?method=axios&r=' + Math.random(),
-    headers: { 'content-type': 'application/x-www-form-urlencoded' },
-    data: {
-      foo: 'bar'
-    }
-  })
-  .then(function(response) {
-    console.log('axiosRequest response:', response);
-  })
-  .catch(function(error) {
-    console.log('axiosRequest error:', error);
-  });
-  console.info('axiosRequest() End');
-}
-
-function axiosRequest(method) {
-  console.info('axiosRequest() Start');
+  vConsole.show();
   axios({
     method,
     url: './data/success.json?method=axios&r=' + Math.random(),
@@ -391,7 +373,6 @@
   .catch(function(error) {
     console.log('axiosRequest error:', error);
   });
-  console.info('axiosRequest() End');
 }
 
 function optionsXHR() {

dev/network.html

@@ -1,4 +1,6 @@
-import VConsole from 'vconsole';
+import * as tool from '../src/lib/tool';
+const massiveData = require('./data/massive.json');
+// console.log('massiveData:', massiveData);
 
-const vconsole = new VConsole();
-console.log(vconsole.version);
+const ret = tool.safeJSONStringify(massiveData, { maxDepth: 10, keyMaxLen: 5000, pretty: true });
+console.log(ret);

dev/node.ts

@@ -1,6 +1,6 @@
 {
   "name": "vconsole",
-  "version": "3.14.3",
+  "version": "3.14.4",
   "description": "A lightweight, extendable front-end developer tool for mobile web page.",
   "homepage": "https://github.com/Tencent/vConsole",
   "files": [

package-lock.json

@@ -202,9 +202,8 @@ const _safeJSONStringifyCircularFinder = () => {
 const _safeJSONStringifyFlatValue = (value: any, maxLen = 0) => {
   let str = '';
   if (isString(value)) {
-    const len = value.length;
-    if (maxLen > 0 && len > maxLen) {
-      value = subString(value, maxLen) + `...(${getBytesText(getStringBytes(value))})`;
+    if (maxLen > 0) {
+      value = getStringWithinLength(value, maxLen);
     }
     str += '"' + getVisibleText(value) + '"';
   } else if (isSymbol(value)) {
@@ -337,6 +336,11 @@ export function JSONStringify(value: any, replacer?: (this: any, key: string, va
   return stringifyResult;
 }
 
+/**
+ * Get the bytes of a string.
+ * @example 'a' = 1
+ * @example '好' = 3
+ */
 export function getStringBytes(str: string) {
   try {
     return encodeURI(str).split(/%(?:u[0-9A-F]{2})?[0-9A-F]{2}|./).length - 1;
@@ -345,6 +349,9 @@ export function getStringBytes(str: string) {
   }
 }
 
+/**
+ * Convert bytes number to 'MB' or 'KB' string.
+ */
 export function getBytesText(bytes: number) {
   if (bytes <= 0) {
     return '';
@@ -358,31 +365,14 @@ export function getBytesText(bytes: number) {
   return bytes + ' B';
 }
 
-const _subStringPattern = /[^\x00-\xff]/g
-export function subString(str: string, len: number) {
-  let m: number;
-
-  if (str.replace(_subStringPattern, '**').length > len) {
-    m = Math.floor(len / 2);
-
-    for (let i = m, l = str.length; i < l; i++) {
-      const sub = str.substring(0, i);
-      if (sub.replace(_subStringPattern, '**').length >= len) {
-        return sub;
-      }
-    }
-  }
-
-  return str;
-}
-
 /**
  * Get a string within a limited max length.
+ * The byte size of the string will be appended to the string when reached the limit.
+ * @return 'some string...(3.1 MB)'
  */
 export function getStringWithinLength(str: string, maxLen: number) {
-  const bytes = getStringBytes(str);
-  if (bytes > maxLen) {
-    str = subString(str, maxLen) + `...(${getBytesText(bytes)})`;
+  if (str.length > maxLen) {
+    str = str.substring(0, maxLen) + `...(${getBytesText(getStringBytes(str))})`;
   }
   return str;
 }