v3.6.0 (Tencent#401)

* 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 Tencent#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 Tencent#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]>

Author: 3 people

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,10 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+vConsole Version:

CHANGELOG.md

@@ -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.
 
@@ -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)

CHANGELOG_CN.md

@@ -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 漏洞。
 
@@ -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）
 
 

README.md

@@ -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

README_CN.md

@@ -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)。
 
 

babel.config.js

@@ -11,7 +11,8 @@ module.exports = function(api) {
           },
           "loose": true
         }
-      ]
+      ],
+      "@babel/preset-typescript",
     ],
     "plugins": [
       [

dev/element.html

@@ -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>