From 669358420542fa825a6446fb57705abaa5265210 Mon Sep 17 00:00:00 2001 From: Maiz Date: Wed, 23 Mar 2022 16:09:55 +0800 Subject: [PATCH 1/3] docs: fix typo. (issue #519) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4019f9be..9f15a764 100644 --- a/README.md +++ b/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 (Recommanded) +#### Method 1: Using npm (Suggested) ```bash $ npm install vconsole From f7b913a92c9f85b65a288b4bcd5e76a7e705582b Mon Sep 17 00:00:00 2001 From: Maiz Date: Thu, 24 Mar 2022 10:28:06 +0800 Subject: [PATCH 2/3] Fix(Network): Fix `responseSize` error when `readyState === 3`. --- CHANGELOG.md | 5 +++++ CHANGELOG_CN.md | 5 +++++ package.json | 2 +- src/network/helper.ts | 8 +++++--- 4 files changed, 16 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 918e17c1..f5e56f7a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ English | [简体中文](./CHANGELOG_CN.md) +## 3.14.1 (2022-03-24) + +- `Fix(Network)` Fix `responseSize` error when `readyState === 3`. + + ## 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). diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md index 7569ed31..e3090a5a 100644 --- a/CHANGELOG_CN.md +++ b/CHANGELOG_CN.md @@ -1,5 +1,10 @@ [English](./CHANGELOG.md) | 简体中文 +## 3.14.1 (2022-03-24) + +- `Fix(Network)` 修复当 `readyState === 3` 时的 `responseSize` 错误。 + + ## 3.14.0 (2022-03-23) - `Feat(Core)` 新增配置项 `pluginOrder` 来调整插件面板的排序，见 [公共属性及方法](./doc/public_properties_methods_CN.md)。 diff --git a/package.json b/package.json index c9678eb9..b4192475 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vconsole", - "version": "3.14.0", + "version": "3.14.1", "description": "A lightweight, extendable front-end developer tool for mobile web page.", "homepage": "https://github.com/Tencent/vConsole", "files": [ diff --git a/src/network/helper.ts b/src/network/helper.ts index 55bcd515..8f76be72 100644 --- a/src/network/helper.ts +++ b/src/network/helper.ts @@ -106,8 +106,10 @@ export const updateItemByReadyState = (item: VConsoleNetworkRequestItem, XMLReq: case 3: // LOADING item.status = XMLReq.status; item.statusText = 'Loading'; - item.responseSize = XMLReq.response.length; - item.responseSizeText = tool.getBytesText(item.responseSize); + if (typeof XMLReq.response === 'object' && XMLReq.response.length) { + item.responseSize = XMLReq.response.length; + item.responseSizeText = tool.getBytesText(item.responseSize); + } break; case 4: // DONE @@ -117,7 +119,7 @@ export const updateItemByReadyState = (item: VConsoleNetworkRequestItem, XMLReq: item.endTime = Date.now(), item.costTime = item.endTime - (item.startTime || item.endTime); item.response = XMLReq.response; - if (XMLReq.response.length) { + if (typeof XMLReq.response === 'object' && XMLReq.response.length) { item.responseSize = XMLReq.response.length; item.responseSizeText = tool.getBytesText(item.responseSize); } From 442b243e9e253ee07e4d8df91456e4eaf0ca6bf1 Mon Sep 17 00:00:00 2001 From: Maiz Date: Thu, 24 Mar 2022 11:02:22 +0800 Subject: [PATCH 3/3] Refactor(Network): Optimize code structure. --- src/network/beacon.proxy.ts | 3 +- src/network/fetch.proxy.ts | 3 +- src/network/helper.ts | 69 +---------------------------------- src/network/xhr.proxy.ts | 73 +++++++++++++++++++++++++++++++++++-- 4 files changed, 74 insertions(+), 74 deletions(-) diff --git a/src/network/beacon.proxy.ts b/src/network/beacon.proxy.ts index feca0bf6..afd3b22b 100644 --- a/src/network/beacon.proxy.ts +++ b/src/network/beacon.proxy.ts @@ -1,8 +1,7 @@ import * as Helper from './helper'; import { VConsoleNetworkRequestItem } from './requestItem'; - -type IOnUpdateCallback = (item: VConsoleNetworkRequestItem) => void; +import type { IOnUpdateCallback } from './helper'; // https://fetch.spec.whatwg.org/#concept-bodyinit-extract const getContentType = (data?: BodyInit) => { diff --git a/src/network/fetch.proxy.ts b/src/network/fetch.proxy.ts index 0004ac5a..4c61d21d 100644 --- a/src/network/fetch.proxy.ts +++ b/src/network/fetch.proxy.ts @@ -2,8 +2,7 @@ import * as tool from '../lib/tool'; import * as Helper from './helper'; import { VConsoleNetworkRequestItem } from './requestItem'; import type { VConsoleRequestMethod } from './requestItem'; - -type IOnUpdateCallback = (item: VConsoleNetworkRequestItem) => void; +import type { IOnUpdateCallback } from './helper'; export class ResponseProxyHandler implements ProxyHandler { public resp: Response; diff --git a/src/network/helper.ts b/src/network/helper.ts index 8f76be72..1d11a586 100644 --- a/src/network/helper.ts +++ b/src/network/helper.ts @@ -1,6 +1,8 @@ import * as tool from '../lib/tool'; import type { VConsoleNetworkRequestItem } from './requestItem'; +export type IOnUpdateCallback = (item: VConsoleNetworkRequestItem) => void; + /** * Generate `getData` by url. */ @@ -65,73 +67,6 @@ export const genResonseByResponseType = (responseType: string, response: any) => return ret; }; -/** - * Update item's properties according to readyState. - */ -export const updateItemByReadyState = (item: VConsoleNetworkRequestItem, XMLReq: XMLHttpRequest) => { - switch (XMLReq.readyState) { - case 0: // UNSENT - item.status = 0; - item.statusText = 'Pending'; - if (!item.startTime) { - item.startTime = (+new Date()); - } - break; - - case 1: // OPENED - item.status = 0; - item.statusText = 'Pending'; - if (!item.startTime) { - item.startTime = (+new Date()); - } - break; - - case 2: // HEADERS_RECEIVED - item.status = XMLReq.status; - item.statusText = 'Loading'; - item.header = {}; - const header = XMLReq.getAllResponseHeaders() || '', - headerArr = header.split('\n'); - // extract plain text to key-value format - for (let i = 0; i < headerArr.length; i++) { - const line = headerArr[i]; - if (!line) { continue; } - const arr = line.split(': '); - const key = arr[0], - value = arr.slice(1).join(': '); - item.header[key] = value; - } - break; - - case 3: // LOADING - item.status = XMLReq.status; - item.statusText = 'Loading'; - if (typeof XMLReq.response === 'object' && XMLReq.response.length) { - item.responseSize = XMLReq.response.length; - item.responseSizeText = tool.getBytesText(item.responseSize); - } - break; - - case 4: // DONE - // `XMLReq.abort()` will change `status` from 200 to 0, so use previous value in this case - item.status = XMLReq.status || item.status || 0; - item.statusText = String(item.status); // show status code when request completed - item.endTime = Date.now(), - item.costTime = item.endTime - (item.startTime || item.endTime); - item.response = XMLReq.response; - if (typeof XMLReq.response === 'object' && XMLReq.response.length) { - item.responseSize = XMLReq.response.length; - item.responseSizeText = tool.getBytesText(item.responseSize); - } - break; - - default: - item.status = XMLReq.status; - item.statusText = 'Unknown'; - break; - } -}; - /** * Generate formatted response body by XMLHttpRequestBodyInit. */ diff --git a/src/network/xhr.proxy.ts b/src/network/xhr.proxy.ts index 1830dab4..59dfb9d6 100644 --- a/src/network/xhr.proxy.ts +++ b/src/network/xhr.proxy.ts @@ -1,7 +1,7 @@ +import { getBytesText } from '../lib/tool'; import * as Helper from './helper'; import { VConsoleNetworkRequestItem } from './requestItem'; - -type IOnUpdateCallback = (item: VConsoleNetworkRequestItem) => void; +import type { IOnUpdateCallback } from './helper'; export class XHRProxyHandler implements ProxyHandler { public XMLReq: XMLHttpRequest; @@ -68,7 +68,7 @@ export class XHRProxyHandler implements ProxyHandler implements ProxyHandler