Skip to content

Commit 802b35f

Browse files
MaizifyMaizify
authored
Merge pull request #518 from Tencent/dev
v3.14.0
2 parents 2977cf0 + b92fe53 commit 802b35f

21 files changed

+909
-515
lines changed

‎CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
English | [简体中文](./CHANGELOG_CN.md)
22

3+
## 3.14.0 (2022-03-23)
4+
5+
- `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).
6+
- `Feat(Core)` Panel will auto scroll to previous position when switching plugin panel.
7+
- `Feat(Network)` Add response size.
8+
- `Feat(Network)` Add support for `transfer-encoding: chunked`, now streaming response can be recorded.
9+
- `Feat(Network)` Improve rendering performance of large Response data by cropping the displayed response content.
10+
- `Refactor(Network)` Now network records will be more accurate by using Proxy to prevent `XMLHttpRequest | fetch` overwriting by other request libraries (like Axios).
11+
12+
313
## 3.13.0 (2022-03-15)
414

515
- `Feat(Log)` Add new option `log.showTimestames`, see [Public Properties & Methods](./doc/public_properties_methods.md).

‎CHANGELOG_CN.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
[English](./CHANGELOG.md) | 简体中文
22

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

515
- `Feat(Log)` 新增配置项 `log.showTimestames`，见 [公共属性及方法](./doc/public_properties_methods_CN.md)。

‎dev/network.html‎

Lines changed: 82 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
<link href="./lib/weui.min.css" rel="stylesheet"/>
88
<link href="./lib/demo.css" rel="stylesheet"/>
99

10-
<script src="../dist/vconsole.min.js"></script>
1110
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
11+
<script src="../dist/vconsole.min.js"></script>
1212
</head>
1313
<body ontouchstart>
1414
<div class="page">
@@ -19,6 +19,7 @@
1919
<a onclick="postAjax()" href="javascript:;" class="weui_btn weui_btn_default">POST XHR (Data: Object)</a>
2020
<a onclick="postAjax('json')" href="javascript:;" class="weui_btn weui_btn_default">POST XHR (Data: JSON String)</a>
2121
<a onclick="optionsXHR()" href="javascript:;" class="weui_btn weui_btn_default">OPTIONS XHR</a>
22+
<a onclick="xhrStream()" href="javascript:;" class="weui_btn weui_btn_default">XHR Stream</a>
2223
</div>
2324

2425
<div class="section">
@@ -33,6 +34,7 @@
3334
<a onclick="postFetchByRequest()" href="javascript:;" class="weui_btn weui_btn_default">POST Fetch Using XHR</a>
3435
<a onclick="optionsFetch()" href="javascript:;" class="weui_btn weui_btn_default">OPTIONS Fetch</a>
3536
<a onclick="fetchIOSLowBug()" href="javascript:;" class="weui_btn weui_btn_default">Fetch iOS LowBug</a>
37+
<a onclick="fetchStream()" href="javascript:;" class="weui_btn weui_btn_default">Fetch Steam</a>
3638
</div>
3739

3840
<div class="section">
@@ -131,16 +133,24 @@
131133
}
132134

133135
function getFetch() {
136+
vConsole.show();
134137
window.fetch('./data/success.json?method=fetchGet&id=' + Math.random(), {
135138
method: 'GET',
136139
headers: {
137140
'custom-header': 'foobar',
138141
'content-type': 'application/json'
139142
},
140143
}).then((data) => {
141-
return data.json();
144+
console.log('getFetch() response:', data);
145+
setTimeout(() => {
146+
data.json().then((res) => {
147+
console.log(res);
148+
});
149+
}, 3000);
150+
// return data;
151+
// return data.json();
142152
}).then((data) => {
143-
console.log('get Fetch Response:', data);
153+
// console.log('getFetch() json:', data);
144154
});
145155
}
146156

@@ -161,7 +171,6 @@
161171
});
162172
}
163173

164-
165174
function getFetchSimple() {
166175
window.fetch('./data/large.json?type=fetchGet&id=' + Math.random()).then((data) => {
167176
return data.json();
@@ -256,6 +265,74 @@
256265
});
257266
}
258267

268+
function fetchStream() {
269+
vConsole.show();
270+
window.fetch('./data/stream.flv?id=' + Math.random()).then((response) => {
271+
console.log('then response', 'bodyUsed:', response.bodyUsed, 'locked:', response.body.locked);
272+
// console.log(response.text())
273+
// return;
274+
const reader = response.body.getReader();
275+
console.log('then response', 'bodyUsed:', response.bodyUsed, 'locked:', response.body.locked);
276+
let bytesReceived = 0;
277+
278+
return reader.read().then(function process(result) {
279+
console.log('reader.read', 'bodyUsed:', response.bodyUsed, 'locked:', response.body.locked);
280+
if (result.done) {
281+
console.log('Failed to find match');
282+
return;
283+
}
284+
285+
bytesReceived += result.value.length;
286+
console.log(`Received ${bytesReceived} bytes.`);
287+
288+
if (bytesReceived > 3000000) {
289+
reader.cancel();
290+
console.log('Cancel.', response.status);
291+
return;
292+
}
293+
294+
return reader.read().then(process);
295+
});
296+
});
297+
}
298+
299+
function xhrStream() {
300+
vConsole.show();
301+
const url = './data/stream.flv?id=' + Math.random();
302+
const xhr = new XMLHttpRequest();
303+
xhr.timeout = 11000;
304+
console.log('xhr type:', typeof xhr, xhr instanceof XMLHttpRequest);
305+
xhr.open('GET', url);
306+
xhr.send();
307+
xhr.onreadystatechange = () => {
308+
console.log('XHR onreadystatechange:', 'readyState:', xhr.readyState, 'responseType:', xhr.responseType);
309+
};
310+
xhr.onprogress = (e) => {
311+
// console.log('XHR onprogress:', 'readyState:', xhr.readyState, 'status:', xhr.status, 'loaded:', e.loaded, 'timeStamp:', e.timeStamp);
312+
if (e.loaded > 3000000) {
313+
xhr.abort();
314+
}
315+
};
316+
xhr.onloadstart = (e) => {
317+
// console.log('XHR onloadstart:', e);
318+
};
319+
xhr.onloadend = (e) => {
320+
// console.log('XHR onloadend:', 'readyState:', xhr.readyState, xhr.status, e);
321+
};
322+
xhr.onload = (e) => {
323+
console.log('XHR onload:', 'readyState:', xhr.readyState, xhr.status, xhr.responseType);
324+
};
325+
xhr.onerror = (e) => {
326+
console.log('XHR onerror:', e);
327+
};
328+
xhr.onabort = (e) => {
329+
console.log('XHR onabort:', xhr.readyState, xhr.status, e);
330+
};
331+
xhr.ontimeout = (e) => {
332+
console.log('XHR ontimeout:', e);
333+
}
334+
}
335+
259336
function postImage() {
260337
console.info('postImage() Start, response should be logged after End');
261338
const xhr = new XMLHttpRequest();
@@ -269,6 +346,7 @@
269346
}
270347

271348
function sendBeacon() {
349+
vConsole.show();
272350
console.info('sendBeacon() Start, response should be logged after End');
273351
window.navigator.sendBeacon('./data/success.json?method=beacon', JSON.stringify({
274352
foo: 'bar',
@@ -297,16 +375,6 @@
297375
console.info('axiosRequest() End');
298376
}
299377

300-
function sendBeacon() {
301-
console.info('sendBeacon() Start, response should be logged after End');
302-
window.navigator.sendBeacon('./data/success.json?method=beacon', JSON.stringify({
303-
foo: 'bar',
304-
id: Math.random(),
305-
type: 'sendBeacon'
306-
}));
307-
console.info('sendBeacon() End');
308-
}
309-
310378
function axiosRequest(method) {
311379
console.info('axiosRequest() Start');
312380
axios({

‎dev/plugin.html‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,13 @@
2525

2626
<script>
2727
window.vConsole = new window.VConsole({
28-
maxLogNumber: 1000,
29-
// disableLogScrolling: true,
28+
pluginOrder: ['tab1', 'storage', 'element', 'network'],
3029
onReady: function() {
3130
console.log('vConsole is ready.');
3231
},
33-
onClearLog: function() {
34-
console.log('on clearLog');
35-
}
3632
});
3733

3834
function newTab() {
39-
console.info('newTab() Start');
4035
var tab = new window.VConsole.VConsolePlugin('tab1', 'Tab1');
4136
tab
4237
.on('init', function() { console.log(this.id, 'init'); })
@@ -50,7 +45,8 @@
5045
.on('showConsole', function() { console.log(this.id, 'showConsole'); })
5146
.on('hideConsole', function() { console.log(this.id, 'hideConsole'); });
5247
vConsole.addPlugin(tab);
53-
console.info('newTab() End');
48+
vConsole.show();
49+
vConsole.showPlugin('tab1');
5450
}
5551

5652
function newTabWithTool() {

‎doc/public_properties_methods.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,8 @@ A configuration object.
4848

4949
Key | Type | Optional | Default value | Description
5050
--------------------- | -------- | -------- | ------------------------------------------- | -------------------
51-
defaultPlugins | Array | true | ['system', 'network', 'element', 'storage'] | Listed built-in plugins will be inited and loaded into vConsole.
51+
defaultPlugins | Array(String) | true | ['system', 'network', 'element', 'storage'] | Listed built-in plugins will be inited and loaded into vConsole.
52+
pluginOrder | Array(String) | true | [] | Plugin panels will be sorted as this list. Plugin not listed will be put last.
5253
onReady | Function | true | | Trigger after vConsole is inited and default plugins is loaded.
5354
disableLogScrolling | Boolean | true | | If `false`, panel will not scroll to bottom while printing new logs.
5455
theme | String | true | 'light' | Theme mode, 'light' | 'dark'.

‎doc/public_properties_methods_CN.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,8 @@ vConsole.version // => "3.11.0"
4747

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

72+
7173
---
7274

7375
## 方法

‎package-lock.json‎

Lines changed: 14 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vconsole",
3-
"version": "3.13.0",
3+
"version": "3.14.0",
44
"description": "A lightweight, extendable front-end developer tool for mobile web page.",
55
"homepage": "https://github.com/Tencent/vConsole",
66
"files": [

‎src/core/core.svelte‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
let isInBottom = true;
4444
let preivousContentUpdateTime = 0;
4545
let cssTimer = null;
46+
const contentScrollTop: { [pluginId: string]: number } = {};
4647
4748
$: {
4849
if (show === true) {
@@ -117,6 +118,10 @@
117118
scrollToBottom();
118119
}
119120
};
121+
const scrollToPreviousPosition = () => {
122+
if (!divContent) { return; }
123+
divContent.scrollTop = contentScrollTop[activedPluginId] || 0;
124+
};
120125
121126
122127
/*************************************
@@ -135,6 +140,9 @@
135140
}
136141
activedPluginId = tabId;
137142
dispatch('changePanel', { pluginId: tabId });
143+
setTimeout(() => {
144+
scrollToPreviousPosition();
145+
}, 0);
138146
};
139147
const onTapTopbar = (e, pluginId: string, idx: number) => {
140148
const topbar = pluginList[pluginId].topbarList[idx];
@@ -200,7 +208,8 @@
200208
} else {
201209
isInBottom = false;
202210
}
203-
// (window as any)._vcOrigConsole.log('onContentScroll', isInBottom);
211+
contentScrollTop[activedPluginId] = divContent.scrollTop;
212+
// (window as any)._vcOrigConsole.log('onContentScroll', activedPluginId, isInBottom, contentScrollTop[activedPluginId]);
204213
};
205214
206215
/**

0 commit comments

Comments
 (0)