Skip to content

Commit

Permalink
v3.6.0 (#401)
Browse files Browse the repository at this point in the history
* feat: support sendBeacon network

* chore: add sendBeacon dev

* feat: print unhandledrejection log

* refactor: change 'unhandledrejection' to 'Uncaught (in promise)'

* Update issue templates

* chore: rename functions

* chore(log): use `addEventListener("error", ...)` instead of `window.onerror`.

* docs: update usage

* fix(storage): Fix the issue that the cookie of the non-first-level domain cannot be deleted. (issue #398)

* chore: Use TypeScript.

* Feat(Network): Display "Type" (Request Type) in "General", including `xhr|fetch|ping`.

* chore(Network): Optimization mockSendBeacon().

* fix(Network): Display fetch response as formatted JSON.

* chore(Network): Optimization mockFetch(), convert response body into text according to the `content-type`.

* Fix(Network): Recover original `window.fetch()` method when remove Network panel.

* Fix(Element): Fix issue that elements are rendered as nested when `attributes` or `characterData` changed. (issue #399)

* chore: add test file.

* chore: remove console.log

* docs: update docs

* chore: build v3.6.0

Co-authored-by: cola119 <[email protected]>
Co-authored-by: zimv <[email protected]>
  • Loading branch information
3 people committed May 21, 2021
1 parent ec4e845 commit ad3a9cf
Show file tree
Hide file tree
Showing 34 changed files with 1,694 additions and 1,081 deletions.
10 changes: 10 additions & 0 deletions .github/ISSUE_TEMPLATE/bug_report.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
name: Bug report
about: Create a report to help us improve
title: ''
labels: ''
assignees: ''

---

vConsole Version:
53 changes: 32 additions & 21 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,20 @@
English | [简体中文](./CHANGELOG_CN.md)

#### 3.6.0 (2021-05-21)

- `Feat(Log)` Print `unhandledrejection` log. (PR #389 by @zimv)
- `Feat(Network)` Support `navigator.sendBeacon()` in Network panel. (PR #383 by @cola119)
- `Feat(Network)` Display "Type" (Request Type) in "General", including `xhr|fetch|ping`.
- `Chore(Global)` Use TypeScript. Now Network panel is conveted to `.ts` file.
- `Fix(Network)` Recover original `window.fetch()` method when remove Network panel.
- `Fix(Storage)` Fix issue that the cookie of the non-first-level domain cannot be deleted. (issue #398)
- `Fix(Element)` Fix issue that elements are rendered as nested when `attributes` or `characterData` changed. (issue #399)


#### 3.5.2 (2021-05-13)

- `Chore` Update to Webpack5 and update all NPM packages to the latest version.
- `Fix(General)` Fix invalid click caused by wrong `selection`.
- `Chore(Global)` Update to Webpack5 and update all NPM packages to the latest version.
- `Fix(Global)` Fix invalid click caused by wrong `selection`.
- `Fix(Log)` Delete `cachedLogs` when reached `maxLogNumber` limit.
- `Fix(Log)` Fix XSS risk.

Expand All @@ -26,50 +37,50 @@ English | [简体中文](./CHANGELOG_CN.md)

#### V3.4.1 (2021-04-09)

- `Feature(General)` Add `setSwitchPosition(x, y)` method to update the position of switch button, see [Public Properties & Methods](./doc/public_properties_methods.md) for more details.
- `Perf(General)` Add `Symbol` polyfill. (issue #361)
- `Fix(General)` Update theme style after `setOption()`.
- `Fix(General)` Remove `transitionEnd` to prevent compatibility issues. (issue #364)
- `Feature(Global)` Add `setSwitchPosition(x, y)` method to update the position of switch button, see [Public Properties & Methods](./doc/public_properties_methods.md) for more details.
- `Perf(Global)` Add `Symbol` polyfill. (issue #361)
- `Fix(Global)` Update theme style after `setOption()`.
- `Fix(Global)` Remove `transitionEnd` to prevent compatibility issues. (issue #364)
- `Fix(Network)` Fix `fetch` optional parameter `init`. (issue #363, #365)
- `Fix(Network)` Fix XSS risks.


#### V3.4.0 (2021-01-14)

- `Feature(General)` Add darkmode theme, see `vConsole.option.theme` in [Public Properties & Methods](./doc/public_properties_methods.md). (PR #307 by @progrape)
- `Feature(General)` Add safe area to switch button. (issue #353)
- `Feature(Global)` Add darkmode theme, see `vConsole.option.theme` in [Public Properties & Methods](./doc/public_properties_methods.md). (PR #307 by @progrape)
- `Feature(Global)` Add safe area to switch button. (issue #353)
- `Feature(Log)` Auto move input cursor to the bracket after autocomplete command. (issue #293)
- `Feature(System)` Add `Location` info to System tab. (issue #343)
- `Feature(Network)` Add `fetch` log in Network tab. (by @weiqian93)
- `Feature(Network)` Add Request Headers to Network tab.
- `Feature(Network)` Use short URL and display parameters in Network tab. (issue #291)
- `Feature(Plugin)` New third-party plugin [vconsole-stats-plugin](https://github.com/smackgg/vConsole-Stats). (by @smackgg)
- `Fix(General)` The position of the switch button will be reset by mistake when clicked.
- `Fix(General)` Fix `document.documentElement.offsetHeight|offsetWidth` is unreliable in newer browsers. (PR #314 by @littlee)
- `Fix(General)` Prevent dispatchEvent for disabled or readOnly elements. (PR #314 by @norux)
- `Fix(General)` Fix nonce searching problem. (by @sunderls)
- `Fix(General)` Fix security issues. (#345 by @QiAnXinCodeSafe)
- `Fix(General)` Prevent "webkitStorageInfo deprecation" warning.
- `Perf(General)` Remove `Symbol`, `Array.from` polyfill. (issue #325, #275)
- `Perf(General)` Show all enumerable and unenumerable properties. (issue #327)
- `Fix(Global)` The position of the switch button will be reset by mistake when clicked.
- `Fix(Global)` Fix `document.documentElement.offsetHeight|offsetWidth` is unreliable in newer browsers. (PR #314 by @littlee)
- `Fix(Global)` Prevent dispatchEvent for disabled or readOnly elements. (PR #314 by @norux)
- `Fix(Global)` Fix nonce searching problem. (by @sunderls)
- `Fix(Global)` Fix security issues. (#345 by @QiAnXinCodeSafe)
- `Fix(Global)` Prevent "webkitStorageInfo deprecation" warning.
- `Perf(Global)` Remove `Symbol`, `Array.from` polyfill. (issue #325, #275)
- `Perf(Global)` Show all enumerable and unenumerable properties. (issue #327)
- `Chore` Update Webpack DevServer option. (by @QinZhen001)


#### V3.3.4 (2019-08-19)

- `Feature(Log)` Add `%c` log format to support custom log style, see [Tutorial](./doc/tutorial.md) for more details.
- `Feature(Plugin)` Add `VConsole.VConsoleLogPlugin` (`VConsole.VConsole*` plugins etc.) to `VConsole` class.
- `Fix(General)` Fix a few minor issues. (#267 by @Molunerfinn, #272 by @domom)
- `Fix(Global)` Fix a few minor issues. (#267 by @Molunerfinn, #272 by @domom)
- `Fix(Storage)` Fix remove cookie fail when it is set path=/ or top domain. (#264 by @qianxinfeng)
- `Perf(General)` Display vConsole on `window DOMContentLoaded` instead of `window load`.
- `Perf(Global)` Display vConsole on `window DOMContentLoaded` instead of `window load`.


#### V3.3.2 (2019-07-04)

- `Feature(General)` Add TypeScript definition file. (by @jas0ncn)
- `Feature(Global)` Add TypeScript definition file. (by @jas0ncn)
- `Fix(Log)` Avoid scrolling to bottom when away from bottom edge. (by @ele828)
- `Fix(General)` Fix switch button position issue. (by @rexschuang)
- `Fix(General)` Fix a few minor issues. (by @stenders)
- `Fix(Global)` Fix switch button position issue. (by @rexschuang)
- `Fix(Global)` Fix a few minor issues. (by @stenders)


#### V3.3.0 (2019-02-02)
Expand Down
51 changes: 31 additions & 20 deletions CHANGELOG_CN.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,20 @@
[English](./CHANGELOG.md) | 简体中文

#### 3.6.0 (2021-05-21)

- `Feat(Log)` 新增输出 `unhandledrejection` 类型日志。 (PR #389 by @zimv)
- `Feat(Network)` 新增支持展示 `navigator.sendBeacon()` 的网络请求。 (PR #383 by @cola119)
- `Feat(Network)` 新增在 "General" 栏目展示 "Type" (Request Type) 字段,取值包括 `xhr|fetch|ping`
- `Chore(Global)` 开始使用 TypeScript 重构代码。现在 Network 面板首先转成了 `.ts` 文件。
- `Fix(Network)` 修复移除 Network 面板后没有恢复原生 `window.fetch()` 方法的问题。
- `Fix(Storage)` 修复清除所有 cookie 时无法完全删除非顶级域名下的 cookie 的问题。 (issue #398)
- `Fix(Element)` 修复当 element 的 `attributes``characterData` 变化时 element 被嵌套渲染的问题。 (issue #399)


#### 3.5.2 (2021-05-13)

- `Chore` 升级到 Webpack5,并升级所有 NPM packages 到最新版本。
- `Fix(General)` 修复因 `selection` 选区引起的点击事件无效问题。
- `Fix(Global)` 修复因 `selection` 选区引起的点击事件无效问题。
- `Fix(Log)` 当日志数量达到 `maxLogNumber` 上限时清空对应的 `cachedLogs`
- `Fix(Log)` 修复 XSS 漏洞。

Expand All @@ -26,49 +37,49 @@

#### V3.4.1 (2021-04-09)

- `Feature(General)` 新增 `setSwitchPosition(x, y)` 方法以更新开关按钮的位置,见 [Public Properties & Methods](./doc/public_properties_methods_CN.md)
- `Perf(General)` 添加 `Symbol` polyfill。(issue #361)
- `Fix(General)` 修复 `setOption()` 后主题样式未及时更新的问题。
- `Fix(General)` 删除 `transitionEnd` 以避免一些兼容性问题。(issue #364)
- `Feature(Global)` 新增 `setSwitchPosition(x, y)` 方法以更新开关按钮的位置,见 [Public Properties & Methods](./doc/public_properties_methods_CN.md)
- `Perf(Global)` 添加 `Symbol` polyfill。(issue #361)
- `Fix(Global)` 修复 `setOption()` 后主题样式未及时更新的问题。
- `Fix(Global)` 删除 `transitionEnd` 以避免一些兼容性问题。(issue #364)
- `Fix(Network)` 修复 `fetch``init` 未考虑为可选参数的问题。(issue #363, #365)
- `Fix(Network)` 修复 XSS 漏洞。


#### V3.4.0 (2021-01-14)

- `Feature(General)` 支持暗黑模式,配置项 `vConsole.option.theme`[Public Properties & Methods](./doc/public_properties_methods_CN.md)。(by @progrape)
- `Feature(General)` 开关按钮加入拖拽安全区,避免遮挡全面屏手机底部操作区。(issue #353)
- `Feature(Global)` 支持暗黑模式,配置项 `vConsole.option.theme`[Public Properties & Methods](./doc/public_properties_methods_CN.md)。(by @progrape)
- `Feature(Global)` 开关按钮加入拖拽安全区,避免遮挡全面屏手机底部操作区。(issue #353)
- `Feature(Log)` 指令输入框键入括号且自动补全括号后,光标将自动移动到括号内部。(issue #293)
- `Feature(System)` 增加显示 `Location` 信息。(issue #343)
- `Feature(Network)`支持 `fetch` 网络记录。(by @weiqian93)
- `Feature(Network)` 支持显示 Request Headers。
- `Feature(Network)` 仅显示简短网址,URL 参数将显示在详细信息中。(issue #291)
- `Feature(Plugin)` 新第三方插件 [vconsole-stats-plugin](https://github.com/smackgg/vConsole-Stats)。(by @smackgg)
- `Fix(General)` 修复点击开关按钮后位置会被重置的问题。
- `Fix(General)` 修复 `document.documentElement.offsetHeight|offsetWidth` 在新浏览器中不够准确的问题。(by @littlee)
- `Fix(General)` 阻止用户事件派发到 readOnly 或 disabled 的 element 上。(by @norux)
- `Fix(General)` 修复 nonce 查找不准确的问题。(by @sunderls)
- `Fix(General)` 修复一个安全问题。(#345 by @QiAnXinCodeSafe)
- `Fix(General)` 屏蔽 "webkitStorageInfo deprecation" 告警。
- `Perf(General)` 删除 `Symbol``Array.from` polyfill。(issue #325, #275)
- `Perf(General)` 日志中显示对象内所有的 enumerable 和 unenumerable 属性。 (issue #327)
- `Fix(Global)` 修复点击开关按钮后位置会被重置的问题。
- `Fix(Global)` 修复 `document.documentElement.offsetHeight|offsetWidth` 在新浏览器中不够准确的问题。(by @littlee)
- `Fix(Global)` 阻止用户事件派发到 readOnly 或 disabled 的 element 上。(by @norux)
- `Fix(Global)` 修复 nonce 查找不准确的问题。(by @sunderls)
- `Fix(Global)` 修复一个安全问题。(#345 by @QiAnXinCodeSafe)
- `Fix(Global)` 屏蔽 "webkitStorageInfo deprecation" 告警。
- `Perf(Global)` 删除 `Symbol``Array.from` polyfill。(issue #325, #275)
- `Perf(Global)` 日志中显示对象内所有的 enumerable 和 unenumerable 属性。 (issue #327)
- `Chore` 更新 Webpack DevServer 的配置项。(by @QinZhen001)


#### V3.3.4 (2019-08-19)

- `Feature(Log)` 增加 `%c` 以支持自定义日志样式,详情见 [使用教程](./doc/tutorial_CN.md)
- `Feature(Plugin)` 增加 `VConsole.VConsoleLogPlugin``VConsole.VConsole*` 内置插件在 `VConsole` class 上的挂载。
- `Fix(General)` 修复若干小问题。(#267 by @Molunerfinn, #272 by @domom)
- `Fix(Global)` 修复若干小问题。(#267 by @Molunerfinn, #272 by @domom)
- `Fix(Storage)` 修复当 cookie `path=/` 或设置了 `domain` 时删除失败的问题。(#264 by @qianxinfeng)
- `Perf(General)``window DOMContentLoaded` 而不是 `window load` 时显示 vConsole。
- `Perf(Global)``window DOMContentLoaded` 而不是 `window load` 时显示 vConsole。


#### V3.3.2 (2019-07-04)

- `Feature(General)` 增加 TypeScript 声明文件。(by @jas0ncn
- `Fix(General)` 修复开关按钮拖动后位置不对的问题。(by @rexschuang
- `Fix(General)` 修复若干小问题。(by @stenders
- `Feature(Global)` 增加 TypeScript 声明文件。(by @jas0ncn
- `Fix(Global)` 修复开关按钮拖动后位置不对的问题。(by @rexschuang
- `Fix(Global)` 修复若干小问题。(by @stenders
- `Fix(Log)` 不在列表底部时避免自动滚动。(by @ele828


Expand Down
48 changes: 32 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,34 +17,50 @@ A lightweight, extendable front-end developer tool for mobile web page.
- Custom plugin


## Usage
## Installing



Download the [latest release](https://github.com/Tencent/vConsole/releases/latest). (DO NOT copy `dist/vconsole.min.js` in the dev branch)
Using unpkg CDN:

```html
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
```


## Usage

Or, install via npm:
Method 1: Using npm (Recommanded)

```bash
$ npm install vconsole
```
npm install vconsole

```javascript
import VConsole from 'vconsole';

const vConsole = new VConsole();
// or init with options
const vConsole = new VConsole({ maxLogNumber: 1000 });

// call `console` methods as usual
console.log('Hello world');

// remove it when you finish debugging
vConsole.destroy();
```

Import `dist/vconsole.min.js` to your project:
Method 2: Using unpkg CDN in HTML:

```html
<script src="path/to/vconsole.min.js"></script>
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script>
// init vConsole
var vConsole = new VConsole();
console.log('Hello world');
// VConsole will be exported to `window.VConsole` by default.
var vConsole = new window.VConsole();
</script>
```

For TypeScript users:

```javascript
import 'path/to/vconsole.min.d.ts';
```

See [Tutorial](./doc/tutorial.md) for more details.
See [Tutorial](./doc/tutorial.md) for more usage details.


## Preview
Expand Down
37 changes: 22 additions & 15 deletions README_CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,31 +19,38 @@ vConsole

## 上手

下载 vConsole 的[最新版本](https://github.com/Tencent/vConsole/releases/latest)。(不要直接下载 dev 分支下的 `dist/vconsole.min.js`

或者使用 npm 安装:
方法一:使用 npm(推荐)

```bash
$ npm install vconsole
```
npm install vconsole

Import 并初始化后,即可使用 `console.log` 功能,如 Chrome devtools 上一样。

```javascript
import VConsole from 'vconsole';

const vConsole = new VConsole();
// 或者使用 options 选项初始化
const vConsole = new VConsole({ maxLogNumber: 1000 });

// 接下来即可照常使用 `console` 等方法
console.log('Hello world');

// 结束调试后,可移除掉
vConsole.destroy();
```

引入 `dist/vconsole.min.js` 到项目中:
方法二:使用 unpkg 的 CDN 直接插入到 HTML

```html
<script src="path/to/vconsole.min.js"></script>
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script>
// 初始化
var vConsole = new VConsole();
console.log('Hello world');
// VConsole 默认会挂载到 `window.VConsole` 上
var vConsole = new window.VConsole();
</script>
```

对于 TypeScript,可引入 d.ts 文件:

```javascript
import 'path/to/vconsole.min.d.ts';
```

详细使用方法请参阅[使用教程](./doc/tutorial_CN.md)


Expand Down
3 changes: 2 additions & 1 deletion babel.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ module.exports = function(api) {
},
"loose": true
}
]
],
"@babel/preset-typescript",
],
"plugins": [
[
Expand Down
62 changes: 62 additions & 0 deletions dev/element.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<title>Test: Element</title>
<link href="../example/lib/weui.min.css" rel="stylesheet"/>
<link href="../example/lib/demo.css" rel="stylesheet"/>

<script type="module" src="../dist/vconsole.min.js"></script>
</head>
<body ontouchstart>
<div id="page" class="page">
<h1 id="title" class="page_title">Element</h1>
<div id="text" class="weui_text_area">
Hello World!
</div>
<a onclick="changeAttr()" href="javascript:;" class="weui_btn weui_btn_default">changeAttr</a>
<a onclick="changeCharacterData()" href="javascript:;" class="weui_btn weui_btn_default">changeCharacterData</a>
</div>
</body>
</html>

<script type="module">
import '../dist/vconsole.min.js';

window.vConsole = new window.VConsole({
maxLogNumber: 1000,
// disableLogScrolling: true,
onReady: function() {
console.log('vConsole is ready.');
},
onClearLog: function() {
console.log('on clearLog');
}
});
</script>

<script>
let handleMethod;
function changeAttr() {
handleMethod = () => {
console.log('changeAttr');
document.body.style.background = `hsl(${(Math.random() * 255) | 0}, 92%, 67%)`;
document.getElementById('page').style.background = `hsl(${(Math.random() * 255) | 0}, 92%, 67%)`;
};
}
function changeCharacterData() {
handleMethod = () => {
console.log('changeCharacterData');
const node = document.getElementById('title').firstChild;
node.textContent = Math.random();
};
}

document.addEventListener("click", () => {
if (handleMethod) {
handleMethod();
}
});
</script>
Loading

0 comments on commit ad3a9cf

Please sign in to comment.