From d2229572c3b7ec1f61408b6f0256e3d4d2da64f9 Mon Sep 17 00:00:00 2001 From: Maiz Date: Thu, 31 Mar 2022 18:15:34 +0800 Subject: [PATCH 1/8] Fix(Core): Fix unexpected error when init vConsole twice in short time. (issue #525) --- CHANGELOG.md | 5 +++++ CHANGELOG_CN.md | 5 +++++ package.json | 2 +- src/core/core.ts | 13 +++---------- 4 files changed, 14 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5a15a878..8e9d076f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ English | [简体中文](./CHANGELOG_CN.md) +## 3.14.5-rc (2022-04-??) + +- `Fix(Core)` Fix unexpected error when init vConsole twice in short time. (issue #525) + + ## 3.14.4 (2022-03-31) - `Fix(Network)` Fix CPU high load bug when response is a large string. (issue #515) diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md index 1554c811..a37aa83d 100644 --- a/CHANGELOG_CN.md +++ b/CHANGELOG_CN.md @@ -1,5 +1,10 @@ [English](./CHANGELOG.md) | 简体中文 +## 3.14.5-rc (2022-04-??) + +- `Fix(Core)` 修复极短时间内重复初始化 vConsole 导致的报错。 (issue #525) + + ## 3.14.4 (2022-03-31) - `Fix(Network)` 修复回包超大时导致的卡死问题。 (issue #515) diff --git a/package.json b/package.json index 06cd0bd9..c7e88235 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vconsole", - "version": "3.14.4", + "version": "3.14.5-rc", "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.ts b/src/core/core.ts index 2b3962bc..1c7c35f6 100644 --- a/src/core/core.ts +++ b/src/core/core.ts @@ -66,6 +66,7 @@ export class VConsole { console.debug('[vConsole] vConsole is already exists.'); return VConsole.instance; } + VConsole.instance = this; this.isInited = false; this.option = { @@ -131,7 +132,7 @@ export class VConsole { * Get singleton instance. **/ public static get instance() { - return ($.one(VCONSOLE_ID))?.__VCONSOLE_INSTANCE as VConsole; + return (window).__VCONSOLE_INSTANCE; } /** @@ -142,12 +143,7 @@ export class VConsole { console.debug('[vConsole] Cannot set `VConsole.instance` because the value is not the instance of VConsole.'); return; } - const $elm = $.one(VCONSOLE_ID); - if ($elm) { - ($elm).__VCONSOLE_INSTANCE = value; - } else { - console.debug('[vConsole] Cannot set `VConsole.instance` because vConsole has not finished initializing yet.'); - } + (window).__VCONSOLE_INSTANCE = value; } /** @@ -219,9 +215,6 @@ export class VConsole { const pluginId = e.detail.pluginId; this.showPlugin(pluginId); }); - - // bind vConsole instance - VConsole.instance = this; } // set options into component From 38bb96508c447080d21e30e0af85c3334d8ce7d8 Mon Sep 17 00:00:00 2001 From: Maiz Date: Fri, 1 Apr 2022 16:59:43 +0800 Subject: [PATCH 2/8] Fix(Log): Fix bug that `console.time | console.timeEnd` do not output log. (issue #523) --- CHANGELOG.md | 1 + CHANGELOG_CN.md | 1 + src/log/log.model.ts | 10 ++++++++-- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8e9d076f..aa899a62 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ English | [简体中文](./CHANGELOG_CN.md) ## 3.14.5-rc (2022-04-??) - `Fix(Core)` Fix unexpected error when init vConsole twice in short time. (issue #525) +- `Fix(Log)` Fix bug that `console.time | console.timeEnd` do not output log. (issue #523) ## 3.14.4 (2022-03-31) diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md index a37aa83d..0bd46614 100644 --- a/CHANGELOG_CN.md +++ b/CHANGELOG_CN.md @@ -3,6 +3,7 @@ ## 3.14.5-rc (2022-04-??) - `Fix(Core)` 修复极短时间内重复初始化 vConsole 导致的报错。 (issue #525) +- `Fix(Log)` 修复 `console.time | console.timeEnd` 不输出日志的问题。 (issue #523) ## 3.14.4 (2022-03-31) diff --git a/src/log/log.model.ts b/src/log/log.model.ts index c6435165..a97e1c91 100644 --- a/src/log/log.model.ts +++ b/src/log/log.model.ts @@ -149,10 +149,16 @@ export class VConsoleLogModel extends VConsoleModel { window.console.timeEnd = ((label: string = '') => { const pre = timeLog[label]; if (pre) { - console.log(label + ':', (Date.now() - pre) + 'ms'); + this.addLog({ + type: 'log', + origData: [label + ':', (Date.now() - pre) + 'ms'], + }); delete timeLog[label]; } else { - console.log(label + ': 0ms'); + this.addLog({ + type: 'log', + origData: [label + ': 0ms'], + }); } }).bind(window.console); From 832bcb1dae94e284d2e8282e73159152e8f87806 Mon Sep 17 00:00:00 2001 From: Maiz Date: Fri, 1 Apr 2022 20:10:15 +0800 Subject: [PATCH 3/8] refactor(Network): use Reflect to get proxy XHR value. --- dev/common.html | 10 ++++++++++ dev/log.html | 10 +++++----- dev/network.html | 28 +++++++++++++++++++++++++++- src/network/xhr.proxy.ts | 18 ++++++++++-------- 4 files changed, 52 insertions(+), 14 deletions(-) diff --git a/dev/common.html b/dev/common.html index f8bb78fa..c74839d5 100644 --- a/dev/common.html +++ b/dev/common.html @@ -20,6 +20,7 @@ setOption Destroy new VConsole + Existing Id @@ -105,4 +106,13 @@ window.vConsole.destroy(); console.log('vConsole is destroyed'); } + +function existingId() { + window.vConsole.destroy(); + const div = document.createElement('DIV'); + div.id = '__vconsole'; + document.body.append(div); + + window.vConsole = new window.VConsole(); +} \ No newline at end of file diff --git a/dev/log.html b/dev/log.html index e00a9081..1a5b9f99 100644 --- a/dev/log.html +++ b/dev/log.html @@ -129,12 +129,12 @@ function logTime() { vConsole.show(); - const label = 'aaa'; + const label = 'ab'; console.time(label); - console.log('Wait...'); - setTimeout(() => { - console.timeEnd(label); - }, Math.ceil(Math.random() * 2000)); + for (let i = 0; i < 10; i++) { + console.log('Wait...', i); + } + console.timeEnd(label); } function formattingLog() { diff --git a/dev/network.html b/dev/network.html index de2f8279..b462ada5 100644 --- a/dev/network.html +++ b/dev/network.html @@ -8,6 +8,7 @@ + @@ -45,6 +46,7 @@ sendBeacon Axios: GET Axios: POST + Zepto: POST Scrolling Cross Domain @@ -113,8 +115,9 @@ if (postType === 'json') { postData = JSON.stringify(postData); } - console.log('post data:', postData); + console.log(xhr.setRequestHeader); xhr.open('POST', `./data/${file}?method=fetchPost&c=中文`); + xhr.setRequestHeader.apply(xhr, ['custom-auth', 'foobar']); xhr.send(postData); // xhr.send(JSON.stringify({foo: 'bar', id: Math.random(), '': ' XSS Attack!'})); } @@ -375,6 +378,29 @@ }); } +function zeptoRequest(method = 'GET') { + vConsole.show(); + $.ajax({ + type: method, + async: true, + url: './data/success.json?method=zepto&r=' + Math.random(), + headers: { + 'content-type': 'application/x-www-form-urlencoded', + 'custom-auth': 'foobar' + }, + data: { + foo: 'bar', + }, + xhrFields:{ + withCredentials: true + }, + dataType: 'json', + success(data) { + console.log('zeptoRequest response:', data); + }, + }); +} + function optionsXHR() { console.info('optionsXHR() Start'); const url = window.location.origin + '/dev/success.json?method=optionsXHR&s=200&id=' + Math.random() + '&'; diff --git a/src/network/xhr.proxy.ts b/src/network/xhr.proxy.ts index 0166fde3..3683b756 100644 --- a/src/network/xhr.proxy.ts +++ b/src/network/xhr.proxy.ts @@ -21,6 +21,9 @@ export class XHRProxyHandler implements ProxyHandler implements ProxyHandler { - return target[key].apply(target, args); - }; + const value = Reflect.get(target, key); + if (typeof value === 'function') { + return value.bind(target); } else { - return Reflect.get(target, key); + return value; } } } @@ -108,7 +110,7 @@ export class XHRProxyHandler implements ProxyHandler implements ProxyHandler implements ProxyHandler Date: Sat, 2 Apr 2022 11:31:29 +0800 Subject: [PATCH 4/8] Fix(Element): Fix `undefined is not an object` error when updating attributes. (issue #526) --- CHANGELOG.md | 1 + CHANGELOG_CN.md | 1 + src/element/element.ts | 6 ++++++ 3 files changed, 8 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index aa899a62..bb364777 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ English | [简体中文](./CHANGELOG_CN.md) - `Fix(Core)` Fix unexpected error when init vConsole twice in short time. (issue #525) - `Fix(Log)` Fix bug that `console.time | console.timeEnd` do not output log. (issue #523) +- `Fix(Element)` Fix `undefined is not an object` error when updating attributes. (issue #526) ## 3.14.4 (2022-03-31) diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md index 0bd46614..def601ca 100644 --- a/CHANGELOG_CN.md +++ b/CHANGELOG_CN.md @@ -4,6 +4,7 @@ - `Fix(Core)` 修复极短时间内重复初始化 vConsole 导致的报错。 (issue #525) - `Fix(Log)` 修复 `console.time | console.timeEnd` 不输出日志的问题。 (issue #523) +- `Fix(Element)` 修复更新 attributes 时引起的 `undefined is not an object` 错误。 (issue #526) ## 3.14.4 (2022-03-31) diff --git a/src/element/element.ts b/src/element/element.ts index 08990f53..9ed4da57 100644 --- a/src/element/element.ts +++ b/src/element/element.ts @@ -182,6 +182,9 @@ export class VConsoleElementPlugin extends VConsoleSveltePlugin { protected _onCharacterDataChange(mutation: MutationRecord) { const node = this.nodeMap.get(mutation.target); + if (!node) { + return; + } node.textContent = mutation.target.textContent; this._refreshStore(); } @@ -233,6 +236,9 @@ export class VConsoleElementPlugin extends VConsoleSveltePlugin { protected _updateVNodeAttributes(elem: Node) { const node = this.nodeMap.get(elem); + if (!node) { + return; + } if (elem instanceof Element) { node.id = elem.id || ''; node.className = elem.className || ''; From b0787df6cbbc065f8b02ca227e26d30c44972036 Mon Sep 17 00:00:00 2001 From: Maiz Date: Sat, 2 Apr 2022 14:31:01 +0800 Subject: [PATCH 5/8] Fix(Network): Do not proxy response body reader when response is done. --- CHANGELOG.md | 1 + CHANGELOG_CN.md | 1 + dev/network.html | 17 ++++++++++++++++- src/network/fetch.proxy.ts | 26 ++++++++++++++++++-------- webpack.serve.config.js | 6 +++++- 5 files changed, 41 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bb364777..3dbfce08 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ English | [简体中文](./CHANGELOG_CN.md) - `Fix(Core)` Fix unexpected error when init vConsole twice in short time. (issue #525) - `Fix(Log)` Fix bug that `console.time | console.timeEnd` do not output log. (issue #523) - `Fix(Element)` Fix `undefined is not an object` error when updating attributes. (issue #526) +- `Fix(Network)` Do not proxy response body reader when response is done. ## 3.14.4 (2022-03-31) diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md index def601ca..8d4cae07 100644 --- a/CHANGELOG_CN.md +++ b/CHANGELOG_CN.md @@ -5,6 +5,7 @@ - `Fix(Core)` 修复极短时间内重复初始化 vConsole 导致的报错。 (issue #525) - `Fix(Log)` 修复 `console.time | console.timeEnd` 不输出日志的问题。 (issue #523) - `Fix(Element)` 修复更新 attributes 时引起的 `undefined is not an object` 错误。 (issue #526) +- `Fix(Network)` 当请求完成后，不再代理 response body reader。 ## 3.14.4 (2022-03-31) diff --git a/dev/network.html b/dev/network.html index b462ada5..7af28f8f 100644 --- a/dev/network.html +++ b/dev/network.html @@ -9,6 +9,7 @@ + @@ -49,6 +50,7 @@ Zepto: POST Scrolling Cross Domain + Wavesurfer.js
@@ -176,7 +178,7 @@ } function getFetchSimple() { - window.fetch('./data/large.json?type=fetchGet&id=' + Math.random()).then((data) => { + window.fetch('./data/massive.json?type=fetchGet&id=' + Math.random()).then((data) => { return data.json(); }).then((data) => { console.log('getFetchSimple Response:', data); @@ -439,6 +441,19 @@ console.info('optionsFetch() End'); } +function testWavesurfer() { + showPanel(); + const div = document.createElement('DIV'); + div.id = 'waveform'; + document.body.append(div); + var wavesurfer = WaveSurfer.create({ + container: '#waveform', + waveColor: 'violet', + progressColor: 'purple' + }); + wavesurfer.load('./data/a.wav?method=fetch'); +} + function scrolling() { vConsole.setOption('maxNetworkNumber', 60); let n = 0 diff --git a/src/network/fetch.proxy.ts b/src/network/fetch.proxy.ts index 52b8effc..63482c5b 100644 --- a/src/network/fetch.proxy.ts +++ b/src/network/fetch.proxy.ts @@ -23,7 +23,8 @@ export class ResponseProxyHandler implements ProxyHandler } public get(target: T, key: string) { - // if (typeof key === 'string') { console.log('Proxy get:', key) } + // if (typeof key === 'string') { console.log('[Fetch.proxy] get:', key) } + const value = Reflect.get(target, key); switch (key) { case 'arrayBuffer': case 'blob': @@ -32,19 +33,17 @@ export class ResponseProxyHandler implements ProxyHandler case 'text': return () => { this.item.responseType = key.toLowerCase(); - return target[key]().then((resp) => { + return value.apply(target).then((resp) => { this.item.response = Helper.genResonseByResponseType(this.item.responseType, resp); this.onUpdateCallback(this.item); return resp; }); }; } - if (typeof target[key] === 'function') { - return (...args) => { - return target[key].apply(target, args); - }; + if (typeof value === 'function') { + return value.bind(target); } else { - return Reflect.get(target, key); + return value; } } @@ -52,13 +51,23 @@ export class ResponseProxyHandler implements ProxyHandler let readerReceivedValue: Uint8Array; const _getReader = this.resp.body.getReader; this.resp.body.getReader = () => { + // console.log('[Fetch.proxy] getReader'); const reader = >_getReader.apply(this.resp.body); + + // when readyState is already 4, + // it's not a chunked stream, or it had already been read. + // so should not update status. + if (this.item.readyState === 4) { + return reader; + } + const _read = reader.read; const _cancel = reader.cancel; this.item.responseType = 'arraybuffer'; reader.read = () => { return (>_read.apply(reader)).then((result) => { + // console.log('[Fetch.proxy] read', result.done); if (!readerReceivedValue) { readerReceivedValue = new Uint8Array(result.value); } else { @@ -142,7 +151,7 @@ export class FetchProxyHandler implements ProxyHandler implements ProxyHandler -1 ? true : isChunked; } + // console.log('[Fetch.proxy] afterFetch', 'isChunked:', isChunked, resp.status); if (isChunked) { // when `transfer-encoding` is chunked, the response is a stream which is under loading, diff --git a/webpack.serve.config.js b/webpack.serve.config.js index c412027f..e4c7b59e 100644 --- a/webpack.serve.config.js +++ b/webpack.serve.config.js @@ -25,11 +25,15 @@ module.exports = (env, argv) => { ], onBeforeSetupMiddleware(devServer) { devServer.app.all('*', (req, res) => { + const contentType = { + 'flv': 'video/x-flv', + 'wav': 'audio/x-wav', + }; const fileType = req.path.split('.').pop(); // console.log('Req:::', fileType, req.path, req.query); if (fileType === 'flv') { res.set({ - 'Content-Type': 'video/x-flv', + 'Content-Type': contentType[fileType], // 'Content-Type', 'application/octet-stream', 'Transfer-Encoding': 'chunked', 'Connection': 'keep-alive', From 37d1181fc80cd93a85ba3fd05633db996e30f2fe Mon Sep 17 00:00:00 2001 From: toyobayashi Date: Sat, 2 Apr 2022 15:50:41 +0800 Subject: [PATCH 6/8] chore: fix Svelte not transpiled by babel on win --- webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index 0471721d..38b74ed9 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -80,7 +80,7 @@ module.exports = (env, argv) => { }, { // required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4 - test: /node_modules\/svelte\/.*\.m?js$/, + test: /node_modules[\\/]svelte[\\/].*\.m?js$/, resolve: { fullySpecified: false, }, From 9c5293925c94cc3e2b84378b836f39c25c7c8cea Mon Sep 17 00:00:00 2001 From: Maiz Date: Sat, 2 Apr 2022 16:11:47 +0800 Subject: [PATCH 7/8] docs: update docs. --- CHANGELOG.md | 1 + CHANGELOG_CN.md | 1 + 2 files changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3dbfce08..2f0968b8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ English | [简体中文](./CHANGELOG_CN.md) - `Fix(Log)` Fix bug that `console.time | console.timeEnd` do not output log. (issue #523) - `Fix(Element)` Fix `undefined is not an object` error when updating attributes. (issue #526) - `Fix(Network)` Do not proxy response body reader when response is done. +- `Chore` Fix typo that Svelte is not transpiled by Babel on Windows. (PR #528) ## 3.14.4 (2022-03-31) diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md index 8d4cae07..48c58899 100644 --- a/CHANGELOG_CN.md +++ b/CHANGELOG_CN.md @@ -6,6 +6,7 @@ - `Fix(Log)` 修复 `console.time | console.timeEnd` 不输出日志的问题。 (issue #523) - `Fix(Element)` 修复更新 attributes 时引起的 `undefined is not an object` 错误。 (issue #526) - `Fix(Network)` 当请求完成后，不再代理 response body reader。 +- `Chore` 修复 Svelte 在 Windows 环境中未被 Babel 转义的问题。 (PR #528) ## 3.14.4 (2022-03-31) From 94e9fdc450db053f50740a7fa1e9cae8ec4feab3 Mon Sep 17 00:00:00 2001 From: Maiz Date: Wed, 6 Apr 2022 11:39:33 +0800 Subject: [PATCH 8/8] chore: v3.14.5 --- CHANGELOG.md | 2 +- CHANGELOG_CN.md | 2 +- package-lock.json | 4 ++-- package.json | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2f0968b8..1c79ef89 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ English | [简体中文](./CHANGELOG_CN.md) -## 3.14.5-rc (2022-04-??) +## 3.14.5 (2022-04-06) - `Fix(Core)` Fix unexpected error when init vConsole twice in short time. (issue #525) - `Fix(Log)` Fix bug that `console.time | console.timeEnd` do not output log. (issue #523) diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md index 48c58899..5c8639ae 100644 --- a/CHANGELOG_CN.md +++ b/CHANGELOG_CN.md @@ -1,6 +1,6 @@ [English](./CHANGELOG.md) | 简体中文 -## 3.14.5-rc (2022-04-??) +## 3.14.5 (2022-04-06) - `Fix(Core)` 修复极短时间内重复初始化 vConsole 导致的报错。 (issue #525) - `Fix(Log)` 修复 `console.time | console.timeEnd` 不输出日志的问题。 (issue #523) diff --git a/package-lock.json b/package-lock.json index 1c0a2204..07f87b2a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "vconsole", - "version": "3.14.4", + "version": "3.14.5", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "vconsole", - "version": "3.14.4", + "version": "3.14.5", "license": "MIT", "dependencies": { "@babel/runtime": "^7.17.2", diff --git a/package.json b/package.json index c7e88235..ba041696 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vconsole", - "version": "3.14.5-rc", + "version": "3.14.5", "description": "A lightweight, extendable front-end developer tool for mobile web page.", "homepage": "https://github.com/Tencent/vConsole", "files": [