A lightweight, extendable front-end developer tool for mobile web page.

Tencent

Last update: Jan 2, 2023

Related tags

Overview

English | 简体中文

vConsole

A lightweight, extendable front-end developer tool for mobile web page.

vConsole is framework-free, you can use it in Vue or React or any other framework application.

Now vConsole is the official debugging tool for WeChat Miniprograms.

Features

Logs: console.log|info|error|...
Network: XMLHttpRequest, Fetch, sendBeacon
Element: HTML elements tree
Storage: Cookies, LocalStorage, SessionStorage
Execute JS command manually
Custom plugins

For details, please see the screenshots below.

Release Notes

Latest version:

Detailed release notes for each version are available on Changelog.

Guide

See Tutorial for more usage details.

For installation, there are 2 primary ways of adding vConsole to a project:

Method 1: Using npm (Recommanded)

$ npm install vconsole

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();

Method 2: Using CDN in HTML:

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole will be exported to `window.VConsole` by default.
  var vConsole = new window.VConsole();
</script>

Available CDN:

Preview

http://wechatfe.github.io/vconsole/demo.html

Screenshots

Overview

Light theme

Dark theme

Log Panel

Log styling

Command line

System Panel

Performance info

Output logs to different panel

console.log('output to Log panel.')
console.log('[system]', 'output to System panel.')

Network Panel

Request details

Element Panel

Realtime HTML elements structure

Storage Panel

Add, edit, delete or copy Cookies / LocalStorage / SessionStorage

Documentation

vConsole:

Custom Plugin:

Third-party Plugins

Feedback

QQ Group: 497430533

License

The MIT License

Comments

为何要重写window.JSON.stringify？有人提了这个问题但是被关了

lib/tool.js 第165行另外 https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js 这个脚本里貌似是把这个重写去掉了，但是从这几天开始随机的会出现包含重写的代码。麻烦检查一下

opened by qkang07 26

vue 项目集成错误

集成之后：

安装的是latest版本；引入方式：

if (process.env.NODE_ENV !== 'production' && viewPlusOptions.debug) {
  import(/* webpackChunkName: 'vconsole' */ 'vconsole').then((VConsole) => {
    /* eslint-disable no-new */
    new VConsole()
  }).catch(err => console.error(err))
}

也尝试过使用require方式，也是同样问题。

opened by Jiiiiiin 25

Android5.1 兼容问题

环境信息： | env | version| | ---| ---| |vConsole Version|3.6.0| | phone brand| vivo X7| |android version| 5.1| |chrome version| 39.0.0.0|

Bug截图：

问题背景： 1. 如果采用npm安装，webpack打包的方式在项目中引用vconsole，在以上环境中无法打开页面，直接白屏 2. 如果通过引入 vconsole.min.js，页面可以打开，但是只能加载默认插件(log)，并且颜色无法显示

问题复现： 1. 如果需要复现上面的问题，使用vivo X7设备（自带浏览器替换了高版本内核，可以安装via浏览器使用自带内核） 2. 或者通过镜像站下载 chrome 39，在高于39版本可以复现 Chrome Apk Download(all version) 或者 click to download Chrome 39

opened by hec9527 14
微信小程序集成出错

提示 VM3616:1 thirdScriptError sdk uncaught third Error Cannot read property 'navigator' of undefined TypeError: Cannot read property 'navigator' of undefined 编辑源码打印window，输入undefind

opened by Richard-Choooou 12
vconsole 重写 json.stringify 方法导致格式异常的问题

引入vconsole之后，JSON.stringify方法被重写，stringfiy之后的字符串格式会变化（多加逗号和回车符号）

举例： let obj = {a:'234'} json.stringify(a) //“{'a':'123',}” 导致无法stringify后无法parser

希望尽快修复

opened by codeSww 9
v3.12.0 错误请求导致CPU暴增页面卡死
vConsole Version:v3.12.0以上使用axios发送请求..只要请求出现任意错误..CPU直接跑满复现步骤:

<button onClick={() => { axios.get('http://baidu.com'); }}> 点击 </button>

Done
opened by xuqianjin 7
在Storage里使用编辑功能修改key值，保存会自动把key和value变为空
vConsole Version:3.15.0

插件引入方式：

<script src="https://unpkg.com/vconsole" onload="new window.VConsole()"></script>

只有修改key值，点击保存会有问题，只是修改value值，点击保存功能正常
opened by zhang-shaoqiang 1

Can't add event listener at plugin's ready event when upgrade vConsole version to 3.15.0


export default function initHelperPlugin(vconsole, VConsolePlugin) {
  let plugin = new VConsolePlugin('helper', 'Helper');
  plugin.on('renderTab', function(callback) {
    let html = `
    <div>env: ${import.meta.env.MODE}</div>
    <div style='margin-top: 2em;text-align:center'>
      <button id='vconsole_bt_close_vconsole' style='font-size: 32px;'>
      关闭VConsole
      </button>
    </div>
    `
    callback(html);
  });
  plugin.on('ready', function() {
    document.querySelector('#vconsole_bt_close_vconsole').addEventListener('click', function() {
      vconsole.destroy();
    });
  });
  return plugin;
}

document.querySelector('#vconsole_bt_close_vconsole') will come out error with "helper.vconsole.plugin.js?t=1671097953842:15 Uncaught (in promise) TypeError: Cannot read properties of null"

opened by johnscliang 4

Throw Uncaught TypeError when vConsole.destroy()

vConsole Version: V3.15.0

Project: RuoYi-Vue

销毁 VConsole 时会报错：

import VConsole from 'vconsole'

var __vconsole

export default {
  open() {
    __vconsole = new VConsole()
  },
  close() {
    __vconsole.destroy()
    __vconsole = null
  },
  toggle() {
    if (__vconsole == null) {
      this.open()
    } else {
      this.close()
    }
  },
}

以上的操作放到了 Vue.prototype.$vconsole 中，直接调用 this.toggle()，能正常打开关闭，但是关闭后，会报如下错误：

opened by heyzqq 2

vconsole无法捕获 DOMContentLoaded 事件之前发生的 js error

vConsole Version: 3.10.0+

在移动端调试时，有时候页面的主 js bundle 里有兼容性问题的 js 执行报错了。这个时候，即使在页面最前面引用 vconsole 脚本并初始化，也捕获不到主 js bundle 里的 js 错误。（这个错误对于移动端调试很关键，能帮助找到哪行代码有兼容问题。）

看代码里，发现 bindErrors 是在 onReady 后才做的，也就是 DOMContentLoaded 事件触发后。所以无法捕获到在此之前发生的 js error。

（在 3.10.0 之前的版本，没有这个问题。）

opened by coolriver 0

Releases(v3.15.0)

v3.15.0(Nov 2, 2022)
EN:

Feat(Log) Add recycle scrolling to imporove performance, and add scroll to top/bottom buttons. (PR #570)

Feat(Log) Add support for console.group(), console.groupCollapsed(), console.groupEnd(). (issue #545)

Feat(Network) Add recycle scrolling to imporove performance.

Feat(Network) Add "Start Time" of a request.

Feat(Network) Use curl instead of url as the copy value of a request. (issue #410)

Fix(Storage) Fix an event bug that overflow content cannot scroll. (issue #542)

Fix(Core) Fix click event on <select> elements. (PR #577)

CN:

Feat(Log) 新增虚拟滚动列表以提升性能，并支持快速滚动到顶部/底部。 (PR #570)

Feat(Log) 新增对 console.group(), console.groupCollapsed(), console.groupEnd() 方法的支持。 (issue #545)

Feat(Network) 新增虚拟滚动列表以提升性能。

Feat(Network) 新增 request 的 "Start Time"（发起时间）。

Feat(Network) 使用 curl 格式作为 request 的复制内容，而非 url。 (issue #410)

Fix(Storage) 修复内容溢出的元素无法滑动的问题。 (issue #542)

Fix(Core) 修复 <select> 的点击事件问题。 (PR #577)

Source code(tar.gz)
Source code(zip)
v3.14.7(Sep 23, 2022)
EN:

Perf(Log) Optimize rendering performance when adding logs. (PR #567)

Fix(Core) Fix plugin panel sorting error when setting pluginOrder option. (issue #559)

Fix(Core) Fix intervention error caused by preventDefault in Touch events. (issue #546)

Fix(Log) Fix window.onerror missing line breaks.

Fix(Log) Fix unclickable vc-cmd-clear-btn on iOS Safari. (PR #564)

Fix(Log) Fix a typo that misjudged circular reference objects. (issue #566)

Fix(Log|Network) Copy objects or arrays as standard JSON format. (issue #547)

Fix(Network) Fix Fetch stays in pending status when window is proxied. (issue #556)

Fix(Storage) Fix storage pannel sorting error when setting storage.defaultStorages option. (issue #560)

Chore Add option env['no-core-js'] to disable core-js polyfill. (PR #562)

CN:

Perf(Log) 优化打印日志时的性能。 (PR #567)

Fix(Core) 修复因设置 pluginOrder 导致插件面板排序错误的问题。 (issue #559)

Fix(Core) 修复因 Touch 事件中的 preventDefault 导致的 intervention 错误。 (issue #546)

Fix(Log) 修复 window.onerror 丢失换行的问题。

Fix(Log) 修复清除命令行按钮在 iOS Safari 中无法点击的问题。 (PR #564)

Fix(Log) 修复一处误判循环引用对象的笔误。 (issue #566)

Fix(Log|Network) 以标准 JSON 格式复制对象或数组。 (issue #547)

Fix(Network) 修复因 window 对象被代理导致 Fetch 一直为 pending 状态的问题。 (issue #556)

Fix(Storage) 修复因设置 storage.defaultStorages 导致 Storage 面板排序错误的问题。 (issue #560)

Chore 添加 env['no-core-js'] 选项来停用构建时使用 core-js polyfill。 (PR #562)

Source code(tar.gz)
Source code(zip)
v3.14.6(Apr 14, 2022)
EN:

Fix(Log) Fix logs lost tracking when adding a new vConsole after destroying the old one.

Fix(Network) Fix resp.body undefined error. (issue #531)

Fix(Network) Fix missing Request Headers when xhr.setRequestHeader is overwritten. (issue #533)

Chore Update NPM dependencies.

CN:

Fix(Log) 修复当销毁后再次初始化 vConsole 时失去追踪 logs 的问题。

Fix(Network) 修复 resp.body undefined 错误。 (issue #531)

Fix(Network) 修复 xhr.setRequestHeader 被覆盖改写时丢失 Request Headers 的问题。 (issue #533)

Chore 更新 NPM 依赖。

Source code(tar.gz)
Source code(zip)
v3.14.5(Apr 6, 2022)
EN:

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.

Chore Fix typo that Svelte is not transpiled by Babel on Windows. (PR #528)

CN:

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。

Chore 修复 Svelte 在 Windows 环境中未被 Babel 转义的问题。 (PR #528)

Source code(tar.gz)
Source code(zip)
v3.14.4(Mar 31, 2022)
EN:

Fix(Network) Fix CPU high load bug when response is a large string. (issue #515)

Fix(Network) Fix missing Request Headers issue in XHR. (issue #522)

CN:

Fix(Network) 修复回包超大时导致的卡死问题。 (issue #515)

Fix(Network) 修复 XHR 中缺失显示 Request Headers 的问题。 (issue #522)

Source code(tar.gz)
Source code(zip)
v3.14.3(Mar 28, 2022)
EN:

Fix(Network) Fix response.size error.

CN:

Fix(Network) 修复 response.size 错误。

Source code(tar.gz)
Source code(zip)
v3.14.2(Mar 25, 2022)
EN:

Fix(Network) Remove debugging console.log.

Chore Drop console.log in Webpack process to ensure that no debugging logs appear in release version.

Chore Add new build command to compile files in different scenarios.

CN:

Fix(Network) 删除调试日志。

Chore 在构建时自动删除 console.log 以确保调试日志不会出现在正式版本中。

Chore 添加新的编译命令以编译出不同场景下的文件。

Source code(tar.gz)
Source code(zip)
v3.14.1(Mar 24, 2022)
EN:

Fix(Network) Fix responseSize error when readyState === 3.

CN:

Fix(Network) 修复当 readyState === 3 时的 responseSize 错误。

Source code(tar.gz)
Source code(zip)
v3.14.0(Mar 23, 2022)
EN:

Feat(Core) Add new option pluginOrder to adjust the order of built-in and custom plugins, see Public Properties & Methods.

Feat(Core) Panel will auto scroll to previous position when switching plugin panel.

Feat(Network) Add response size.

Feat(Network) Add support for transfer-encoding: chunked, now streaming response can be recorded.

Feat(Network) Improve rendering performance of large Response data by cropping the displayed response content.

Refactor(Network) Now network records will be more accurate by using Proxy to prevent XMLHttpRequest | fetch overwriting by other request libraries (like Axios).

CN:

Feat(Core) 新增配置项 pluginOrder 来调整插件面板的排序，见公共属性及方法。

Feat(Core) 切换插件面板时，面板会自动滚动到上次的位置。

Feat(Network) 新增显示 Response 的体积。

Feat(Network) 新增对 transfer-encoding: chunked 的支持，现在可记录流式回包（stream response）。

Feat(Network) 展示时裁剪过大的 Response 回包以提高渲染性能。

Refactor(Network) 提高网络记录的准确性，以避免被外部库（如 Axios）覆盖；方法是对 XMLHttpRequest | fetch 使用 Proxy。

Source code(tar.gz)
Source code(zip)
v3.13.0(Mar 15, 2022)
EN:

Feat(Log) Add new option log.showTimestames, see Public Properties & Methods.

Fix(Core) Use polyfill click event to prevent raw click event not working in some cases.

Fix(style) Fix CSS transition failure in WeChat webview by using bottom instead of transform.

Fix(Core) Fix error when calling vConsole method in onReady callback. (issue #516)

Refactor(Storage) Improve robustness.

CN:

Feat(Log) 新增配置项 log.showTimestames，见公共属性及方法。

Fix(Core) 使用模拟的 click 事件以避免某些场景下原生 click 事件不生效的问题。

Fix(style) 修复微信 Webview 中的 CSS transition 失效的问题，通过使用 bottom 而非 transform。

Fix(Core) 修复在 onReady 回调中调用 vConsole 方法导致报错的问题。 (issue #516)

Refactor(Storage) 提高健壮性。

Source code(tar.gz)
Source code(zip)
v3.12.1(Feb 25, 2022)
EN:

Fix(Core) Fix bug that VConsole.instance is empty when VConsole import as a new module.

Chore(Core) Fix type declaration errors caused by vendors.

CN:

Fix(Core) 修复当 VConsole 作为新模块 import 时 VConsole.instance 为空的问题。

Chore(Core) 修复由外部依赖库引起的 TypeScript 类型声明错误问题。

Source code(tar.gz)
Source code(zip)
v3.12.0(Feb 17, 2022)
EN:

Feat(Core) Add new static property VConsole.instance to get the singleton instance.

Feat(Core) Add new options storage.defaultStorages, see Public Properties & Methods.

Feat(Core) New way of using vConsole.setOption(): setOption('log.maxLogNumber', 20) to set maxLogNumber field only, and setOption({ log: { maxLogNumber: 20 }}) to overwrite log object.

Feat(Core) Deprecated some options, see below.

Fix(Plugin) Fix the bug that event renderTab doesn't render plugin view.

Fix(Storage) Fix cookie parse error in some bad cases. (issue #508, #509)

Deprecated Options:

maxLogNumber: Use option.log.maxLogNumber instead.

maxNetworkNumber: Use option.network.maxNetworkNumber instead.

onClearLog: Removed.

CN:

Feat(Core) 新增静态属性 VConsole.instance 以获取实例化后的单例 vConsole 对象。

Feat(Core) 新增配置项 storage.defaultStorages，见公共属性及方法。

Feat(Core) 更新 vConsole.setOption() 用法：通过 setOption('log.maxLogNumber', 20) 来单独设置 maxLogNumber 字段，或通过 setOption({ log: { maxLogNumber: 20 }}) 来覆盖 log 对象。

Feat(Core) 废弃一些配置项，参见下面。

Fix(Plugin) 修复插件事件 renderTab 没有渲染出视图的 bug。

Fix(Storage) 修复某些情况下的 Cookie 解析错误问题。 (issue #508, #509)

废弃的配置项：

maxLogNumber：用 option.log.maxLogNumber 替代。

maxNetworkNumber：用 option.network.maxNetworkNumber 替代。

onClearLog：移除。

Source code(tar.gz)
Source code(zip)
v3.11.2(Jan 20, 2022)
EN:

Feat(Storage) Added "Clear" button to batch delete all storage items. (issue #499)

Fix(Storage) Fix the issue that deleting cookies fails. (issue #499)

CN:

Feat(Storage) 增加 "Clear" 按钮以批量删除所有 storage。 (issue #499)

Fix(Storage) 修复无法删除 cookies 的问题。 (issue #499)

Source code(tar.gz)
Source code(zip)
v3.11.1(Jan 13, 2022)
EN:

Feat(Log) Support for submitting command input using the enter key. (issue #498)

Fix(Network) Fix init.body parameter problem. (issue #500)

CN:

Feat(Log) 支持使用回车键提交命令行输入。 (issue #498)

Fix(Network) 修复 init.body 参数报错。 (issue #500)

Source code(tar.gz)
Source code(zip)
v3.11.0(Dec 30, 2021)
EN:

Feat(Global) Add new option vConsole.option.target to specify custom mount target, see Public Properties & Methods. (issue #455)

Feat(Log) Add new methods: vConsole.log.log()|info()|..., vConsole.log.clear(), see Builtin Plugin: Properties & Methods.

Feat(Network) Add new methods: vConsole.network.add()|update(), vConsole.network.clear(), see Builtin Plugin: Properties & Methods.

Feat(Network) Add new option vConsole.option.maxNetworkNumber to limit request number, see Public Properties & Methods. (issue #492)

Fix(Network) Display Request Payload for all HTTP methods, not just POST. (issue #493)

Fix(Element) Fix the infinite loop problem caused by the newly added Comment node. (issue #491)

CN:

Feat(Global) 支持自定义挂载点，配置项 vConsole.option.target 见公共属性及方法。 (issue #455)

Feat(Log) 新增插件方法 vConsole.log.log()|info()|...、vConsole.log.clear()，见内置插件：属性及方法。

Feat(Network) 新增插件方法 vConsole.network.add()|update()、vConsole.network.clear()，见内置插件：属性及方法。

Feat(Network) 支持限制请求数量，配置项 vConsole.option.maxNetworkNumber见公共属性及方法。 (issue #492)

Fix(Network) 在所有 HTTP Methods 中都会展示 Request Payload，而非仅限于 POST。 (issue #493)

Fix(Element) 修复由于新增 Comment 节点导致的死循环问题。 (issue #491)

Source code(tar.gz)
Source code(zip)
v3.10.1(Dec 23, 2021)
EN:

Keep reminding: In v3.10.0, there are some Breaking Changes. If you upgrade from v3.9.x or lower, please pay attention to these changes.

Feat(Network) Pretty output format for JSON response. (issue #486)

Fix(Style) Avoid panel scaling with the web page When initial-scale !== 1.

Fix(Core) Fix the issue that clicking the panel button does not work in PC mode. (issue #487)

Fix(Network) Display formatted JSON instead of [object Object] when Query/Payload/Headers is an object or array.

Fix(Network) Avoid overwriting onreadystatechange of XHR objects multiple times when XHR objects are reused in some cases. (issue #214)

CN:

提醒： 在 v3.10.0 中，有一些重大变化（Breaking Changes），无法向下兼容。如果你从 v3.9.x 或更低版本升级而来，请关注这些变化。

Feat(Network) 格式化输出 response 中的 JSON 内容。 (issue #486)

Fix(Style) 当 initial-scale !== 1 时，避免面板随页面缩放大小。

Fix(Core) 修复 PC 模式下点击面板按钮无效的问题。 (issue #487)

Fix(Network) 当 Query/Payload/Headers 是对象或数组时，展示为结构化的 JSON 格式而非 [object Object]。

Fix(Network) 当某些情况下 XHR 对象被复用时，避免多次覆盖XHR对象的 onreadystatechange 以造成错误。 (issue #214)

Source code(tar.gz)
Source code(zip)
v3.10.0(Dec 17, 2021)
EN:

In this version, we refactored a lot of core logic, and used Svelte as the rendering engine for all views.
So there are some breaking changes, a small number of methods and properties are not forward compatible.
If you are a vConsole plugin developer, you should pay attention to these changes.

Breaking Changes:

Refactor(Core|Log|Network|Element) Rebuild all views by using Svelte as template engine.

Refactor(Core) Remove vConsole.(tabList | activedTab | $dom) properties.

Refactor(Plugin) Rename vConsole.showTab(pluginID) to vConsole.showPlugin(pluginID).

Refactor(Plugin) Change callback option { data, onClick } of plugin event addTopBar: onClick method will receive 2 arguments (which was 0 before): (event: Event, data?: any) => boolean, which data is the above option's data field.

Feat(Core) Remove helper functions vConsole.tool and vConsole.$.

Common Updates:

Feat(Log) Support object's Symbol keys.

Feat(Log) Support multi-level keyword hint in Log's command line input.

Feat(Log) Support string formatting %s, %d, %o, and better %c CSS styling formatting.

Feat(Log) Add pagination to objects or arrays to improve rendering performance, with 50 key-values per page.

Feat(Network) Add copy buttons to request attributes.

Feat(Element) Improve UX, selected node will be highlighted and applied to Expand/Collapse action.

Feat(Style) Style tags will be loaded into <head> after vConsole initialization, and removed after destruction.

Refactor(Storage) Improve UX.

Fix(Network) Throw error when Fetch get an error. (issue #458)

CN:

这个版本中，我们重构了大部分核心逻辑，并且使用 Svelte 作为所有面板的视图层模板引擎。
这带来了一些重大变化（Breaking changes），少数属性和方法无法保证向下兼容。
如果你是 vConsole 插件开发者，应该关注这些变化。

Breaking Changes:

Refactor(Core|Log|Network|Element) 使用 Svelte 作为所有视图的模板引擎。

Refactor(Core) 删除 vConsole.(tabList | activedTab | $dom) 属性。

Refactor(Plugin) 重命名 vConsole.showTab(pluginID) 为 vConsole.showPlugin(pluginID)。

Refactor(Plugin) 更新插件事件 addTopBar 的配置参数 { data, onClick }： onClick 会接收 2 个参数（之前是 0 个）： (event: Event, data?: any) => boolean，其中 data 为上述配置参数的 data 字段。

Feat(Core) 删除辅助函数 vConsole.tool 和 vConsole.$。

Common Updates:

Feat(Log) 支持展示对象键值为 Symbol 类型的键值对。

Feat(Log) 命令行支持多级关键字提示。

Feat(Log) 支持使用 %s, %d, %o 来格式化展示字符串，并且优化了 %c 的 CSS 样式逻辑。

Feat(Log) 对存在大量键值的对象或数组，加入翻页逻辑以提升渲染性能，每 50 一页。

Feat(Network) Request 的属性值支持复制。

Feat(Element) 提升交互体验，选中的节点将会被高亮，并且展开/收起（Expand/Coolapse）基于选中的节点来进行。

Feat(Style) 样式标签会在 vConsole 初始化后才注入 <head> 中，并在 vConsole 销毁后会自动移除。

Refactor(Storage) 优化了部分交互体验。

Fix(Network) 当 Fetch 发生 Error 时，会 throw 到外部，以符合标准实现。 (issue #458)

Source code(tar.gz)
Source code(zip)
v3.9.5(Nov 10, 2021)
EN:

Style(Log) Add support for BigInt and update Symbol log style.

Refactor(Style) Lazy load style tag when vConsole init.

Fix(Global) Use this || self as globalObject to prevent self is not defined error. (issue #441)

Fix(Log) Fix Cannot convert a Symbol value to a string error when logged a Symbol value.

Fix(Log) Now commands and output logs can be copied.

Fix(Network) Fix URIError when decode URI fail. (issue #470)

Fix(Network) Fix potential forEach error. (issue #471)

Chore Transform Svelte output code to ES5. (issue #468)

CN:

Style(Log) 支持 BigInt 类型并更新 Symbol 类型的样式。

Refactor(Style) 在 vConsole 初始化时再懒加载 style 标签（而非 import 后就加载）。

Fix(Global) 使用 this || self 作为 globalObject，以避免 self is not defined 错误。 (issue #441)

Fix(Log) 修复打印 Symbol 类型时产生的 Cannot convert a Symbol value to a string 错误。

Fix(Log) 修复 commands 命令及其输出结果无法复制的问题。

Fix(Network) 修复解码 URL 参数时产生的 URIError 错误。 (issue #470)

Fix(Network) 修复潜在的由 forEach 引起的错误。 (issue #471)

Chore 转换 Svelte 代码产物到 ES5 标准，以避免 ES6 引发的构建问题。 (issue #468)

Source code(tar.gz)
Source code(zip)
v3.9.4(Oct 26, 2021)
EN:

Refactor(Global) Add Typescript declaration to VConsole class.

CN:

Refactor(Global) 为 VConsole 类的方法参数添加 Typescript 声明。

Source code(tar.gz)
Source code(zip)
v3.9.3(Oct 22, 2021)
EN:

Fix(Network) Fix Cannot read property 'setAttribute' of null error when call setOption() before init. (PR #453 by @Zhangstring)

Fix(Network) Fix Fetch error when iOS < 11. (PR #457 by @zimv)

Chore Generate .d.ts declarations when built. (RP #433 by @ManiaciaChao)

Chore Remove ./dist from Git tracking.

CN:

Fix(Network) 修复未完成初始化时调用 setOption() 导致的 Cannot read property 'setAttribute' of null错误。 (PR #453 by @Zhangstring)

Fix(Network) 修复 iOS < 11 时产生的 Fetch 错误. (PR #457 by @zimv)

Chore 构建时自动生成 .d.ts 声明。 (RP #433 by @ManiaciaChao)

Chore 从 Git 版本控制中移除 ./dist 目录。

Source code(tar.gz)
Source code(zip)
v3.9.1(Jul 27, 2021)
EN:

Fix(Log) Fix command input style. (PR #437 by @FredZeng)

Fix(Storage) Fix globalThis error. (issue #438 #439)

Chore Fix const let error cause by Svelte. (PR #440 by @dellyoung)

CN:

Fix(Log) 修正命令行输入框样式。 (PR #437 by @FredZeng)

Fix(Storage) 修复由 globalThis 引起的报错。 (issue #438 #439)

Chore 修复由 Svelte 引起的 const let 报错。 (PR #440 by @dellyoung)

Source code(tar.gz)
Source code(zip)
v3.9.0(Jul 16, 2021)
EN:

Feat(Log) Show audio loading error log. (PR #419 by @zimv)

Feat(Storage) Rewrite Storage panel, supports add/edit/delete storage items. (PR #429 by @ManiaciaChao)

Feat(Plugin) New third-party plugin vite-plugin-vconsole. (by @vadxq)

Refactor(Global) Use Svelte as template engine. (PR #429 by @ManiaciaChao)

Refactor(Core|Element) Convert core file and Element panel to .ts file.

Fix(Log) Fix error when print object(s) with no toJSON method such as Vue instance. (PR #431 by @sillyhong)

Fix(Network) Fix error when url not starts with http. (issue #420)

Fix(Network) Fix error when using Request as Fetch's parameter. (PR #428 by @tatsunoneko)

Fix(Network) Display formatted key-value list when POST a JSON string. (issue #425)

style Wrap LESS math operations. (PR #426 by @ManiaciaChao)

Chore Fix yarn serve error. (issue #424)

CN:

Feat(Log) 显示 audio 资源加载失败的报错。 (PR #419 by @zimv)

Feat(Storage) 重写 Storage 面板，现支持添加/编辑/删除内容。 (PR #429 by @ManiaciaChao)

Feat(Plugin) 新增第三方插件 vite-plugin-vconsole。 (by @vadxq)

Refactor(Global) 开始使用 Svelte 作为模板引擎。 (PR #429 by @ManiaciaChao)

Refactor(Core|Element) 转换 core 文件及 Element 面板为 .ts 文件。

Fix(Log) 修复打印无 toJSON 方法的对象（如 Vue 实例）时会报错的问题。 (PR #431 by @sillyhong)

Fix(Network) 修复不以 http 开头的 url 会报错的问题。 (issue #420)

Fix(Network) 修复使用 Request 作为 Fetch 参数时的报错。 (PR #428 by @tatsunoneko)

Fix(Network) 当 POST 数据为一个 JSON 字符串时亦以 key-value 型键值表来显示数据。 (issue #425)

style 修正 LESS 数学运算符。 (PR #426 by @ManiaciaChao)

Chore 修复执行 yarn serve 的报错。 (issue #424)

Source code(tar.gz)
Source code(zip)
v3.8.1(Jun 24, 2021)
EN:

Fix(Log) Do not merge repeated logs with object(s) or array(s) into one line to avoid merging objects with the same structure but different values.

Fix(Log) Fix the issue that log filter does not take effect after selecting the log type.

Fix(Network) Fix error when url starts with //. (PR #414 by @kooritea)

Chore Remove exclude: node_modules option in babel-loader to be compatible with ES5. (issue #404, #407)

Refactor(Log) Convert Log & System panel to .ts file.

CN:

Fix(Log) 不再合并包含 object 或 array 的重复日志，以避免合并结构相同但取值不同的对象。

Fix(Log) 修复日志过滤器（Filter）在点选日志类型 tab 后不生效的问题。

Fix(Network) 修复 url 以 // 开头时产生的错误。 (PR #414 by @kooritea)

Chore 移除 babel-loader 的 exclude: node_modules 选项以避免第三方库的兼容性问题。 (issue #404, #407)

Refactor(Log) 转换 Log 和 System 面板为 .ts 文件。

Source code(tar.gz)
Source code(zip)
v3.8.0(Jun 23, 2021)
EN:

Feat(Log) Show resource (image/video/link/script) loading error log. (PR #411 by @zimv)

Chore Add target: ['web', 'es5'] to Webpack to avoid compatibility issues. (issue #404)

Fix(Network) Fix error when new URL('x', undefined). (PR #409 by @moonkop)

CN:

Feat(Log) 新增显示资源（image/video/link/script）加载失败报错。 (PR #411 by @zimv)

Chore 新增 Webpack 配置 target: ['web', 'es5'] 以避免兼容性问题。 (issue #404)

Fix(Network) 修复 new URL('x', undefined) 第二参数为 undefined 时的报错。 (PR #409 by @moonkop)

Source code(tar.gz)
Source code(zip)
v3.7.0(May 27, 2021)
EN:

Feat(Storage) Show preview value to prevent large raw value blocking rendering. (issue #300)

Feat(Storage) Add copy button and delete button.

Feat(Global) Use system theme color by default when init option theme is empty.

Chore(Storage) Convert Storage panel to .ts file.

Fix(Network) Use forEach instead of .entries() when traversing headers. (issue #404)

Fix(Network) Fix error when Content-Type is empty.

CN:

Feat(Storage) 对于大体积 value 先展示预览值，以避免堵塞渲染。 (issue #300)

Feat(Storage) 新增复制按钮、删除按钮。

Feat(Global) 当初始参数 theme 为空时，跟随系统默认主题色。

Chore(Storage) 转换 Storage 面板为 .ts 文件。

Fix(Network) 使用 forEach 而非 .entries() 来遍历 headers 以避免一些兼容性问题。 (issue #404)

Fix(Network) 修复 Content-Type 为空时导致的报错。

Source code(tar.gz)
Source code(zip)
v3.6.1(May 24, 2021)
EN:

Fix(Network) Fix "Invalid base URL" error. (PR #402)

CN:

Fix(Network) 修复 "Invalid base URL" 错误。 (PR #402)

Source code(tar.gz)
Source code(zip)
v3.6.0(May 21, 2021)
EN:

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)

CN:

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)

Source code(tar.gz)
Source code(zip)
v3.5.2(May 13, 2021)
EN:

Chore Update to Webpack5 and update all NPM packages to the latest version.

Fix(General) Fix invalid click caused by wrong selection.

Fix(Log) Delete cachedLogs when reached maxLogNumber limit.

Fix(Log) Fix XSS risk.

CN:

Chore 升级到 Webpack5，并升级所有 NPM packages 到最新版本。

Fix(General) 修复因 selection 选区引起的点击事件无效问题。

Fix(Log) 当日志数量达到 maxLogNumber 上限时清空对应的 cachedLogs。

Fix(Log) 修复 XSS 漏洞。

Source code(tar.gz)
Source code(zip)
v3.5.1(May 7, 2021)
EN:

Chore(Babel) Fix incorrect catch built by babel-loader. (PR #392 by @myl0204)

Fix(Network) Fix typing error. (PR #388 by @xovel)

CN:

Chore(Babel) 修复由 catch 写法引起的 babel-loader 构建问题。 (PR #392 by @myl0204)

Fix(Network) 修复语法笔误。 (PR #388 by @xovel)

Source code(tar.gz)
Source code(zip)
v3.5.0(Apr 28, 2021)
EN:

Feature(Log) Add ability to copy a single line of logs. (by @akai)

Feature(Plugin) New third-party plugin vconsole-vue-devtools-plugin. (by @Zippowxk)

Perf(System) Rename "System" field to "Client", and add MacOS version.

Fix(Log) Use natural sorting to sort object and array's keys. (issue #372)

Fix(Network) Fix JSON parse error when contentType is text/html. (by @zimv)

Fix(Network) Fix disableLogScrolling not working in Network panel. (issue #282, #379)

CN:

Feature(Log) 新增复制单行日志的能力。 (by @akai)

Feature(Plugin) 新第三方插件 vconsole-vue-devtools-plugin。 (by @Zippowxk)

Perf(System) 将 "System" 字段改名为 "Client"，并新增 MacOS 系统版本号。

Fix(Log) 使用自然排序来排序 object 和 array 的键值。 (issue #372)

Fix(Network) 修复当 contentType 为 text/html 时潜在的 JSON 错误。 (by @zimv)

Fix(Network) 修复 disableLogScrolling 参数在 Network 面板中不生效的问题。 (issue #282, #379)

Source code(tar.gz)
Source code(zip)

Owner

Tencent

GitHub

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

4 May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

14 Jan 3, 2023

Full-Stack Web & Mobile Developer Portfolio (Landing Page only)

[DRAFT] Full-Stack Web & Mobile Developer Portfolio (Landing Page only) ?? Contact me at: LinkedIn My company's website Project Description ⚠️ Nothing

1 Feb 7, 2022

Pass trust from a front-end Algorand WalletConnect session, to a back-end web service

AlgoAuth Authenticate to a website using only your Algorand wallet Pass trust from a front-end Algorand WalletConnect session, to a back-end web servi

16 Dec 15, 2022

Web-Technology with Aj Zero Coding. In this tutorial we learn front-end and back-end development.

Installation through NPM: The jQWidgets framework is available as NPM package: jQuery, Javascript, Angular, Vue, React, Web Components: https://www

3 Nov 19, 2022

A tiny, plugin extendable JavaScript utility library with a JQuery-like syntax.

Tiny Friggin' Utility Zapper What is it? A tiny ~7kb extendable JavaScript utility library with a JQuery like syntax for getting work done fast! If yo

4 Jun 25, 2022

A Simple yet extendable jQuery modal script built for use with inline HTML, images, videos, and galleries.

jQuery Chaos Modal A Simple yet extendable jQuery modal script built for use with inline HTML, forms, and images in mind. There are many other modal p

3 Oct 8, 2020

Personal Blog - a project developed with Angular for the front-end interface and Wordpress for the back-end API served with Docker containers

PersonalBlog This project was generated with Angular CLI version 13.0.1. Front-end Interface Development server Run ng serve or ng serve --configurati

9 Oct 5, 2022

It consists of a recreation of Twitter, to put into practice both Front-end and Back-end knowledge by implementing the MERN Stack together with other technologies to add more value to the project.

Twitter-Clone_Back-end ✨ Demo. ?? About the project. ?? Descriptions. It consists of a recreation of Twitter, to put into practice knowledge of both F

5 Apr 12, 2022

It consists of a recreation of Twitter, to put into practice knowledge of both Front-end and Back-end implementing the MERN Stack along with other technologies to add more value to the project.

Twitter-Clone_Front-end ✨ Demo. Login Home Profile Message Notifications Deployed in: https://twitter-clone-front-end.vercel.app/ ?? About the project

5 Jun 26, 2022

It is a monorepo that includes all end-to-end resolutions. You can create a website, API and mobile application.

Discord Website http://localhost:3000 - vue http://localhost:5000 - vue-mobile http://localhost:4000/graphql - api Setup pnpm install docker-compose u

34 Dec 7, 2022

A modular front-end framework - inspired by the server-side and Web Components.

The NX framework Home page, Docs NX is a modular front-end framework - built with ES6 and Web Components. The building blocks of NX are the core, the

464 Dec 5, 2022

A curated collection of free resources from across the web for front-end developers, covering everything from design to deployment.

6 Jul 11, 2022

The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.

Awesome Books This is the restructured version of the famous awesome-books project! Here you can find JavaScript broken into modules, using import-exp

12 Nov 15, 2022

A Web end-to-end testing framework.

一款舒适的自动化测试框架文档 XBell 站点特性基于 playwright 的异步测试框架基于 TypeScript 提供多功能装饰器多套数据环境支持快速开始 # 初始化一个项目 $ npm create xbell # 进入项目 $ cd <your-project-name> #

10 Dec 15, 2022

This is an application that entered the market with a mobile application in real life. We wrote the backend side with node.js and the mobile side with flutter.

HAUSE TAXI API Get Started Must be installed on your computer Git Node Firebase Database Config You should read this easy documentation Firebase-Fires

4 Nov 4, 2021

Smooth mobile touch slider for Mobile WebApp, HTML5 App, Hybrid App

iSlider iSlider is a lightweight, high-performant, no library dependencies cross-platform slide controller. It can help handling most sliding effects,

1.7k Nov 25, 2022

A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes.

2FA-Solver A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes. It can be used as an offline web page b

8 Dec 7, 2022

Catalogist is the easy way to catalog and make your software and (micro)services visible to your organization in a lightweight and developer-friendly way.

catalogist ?? ?? ?? ?? ?? The easy way to catalog and make your software and (micro)services visible to your organization through an API You were a pe

11 Dec 13, 2022

A lightweight, extendable front-end developer tool for mobile web page.

Related tags

Overview

vConsole

Features

Release Notes

Guide

Method 1: Using npm (Recommanded)

Method 2: Using CDN in HTML:

Preview

Screenshots

Overview

Log Panel

System Panel

Network Panel

Element Panel

Storage Panel

Documentation

Third-party Plugins

Feedback

License

Comments

Releases(v3.15.0)

v3.15.0(Nov 2, 2022)

v3.14.7(Sep 23, 2022)

v3.14.6(Apr 14, 2022)

v3.14.5(Apr 6, 2022)

v3.14.4(Mar 31, 2022)

v3.14.3(Mar 28, 2022)

v3.14.2(Mar 25, 2022)

v3.14.1(Mar 24, 2022)

v3.14.0(Mar 23, 2022)

v3.13.0(Mar 15, 2022)

v3.12.1(Feb 25, 2022)

v3.12.0(Feb 17, 2022)

v3.11.2(Jan 20, 2022)

v3.11.1(Jan 13, 2022)

v3.11.0(Dec 30, 2021)

v3.10.1(Dec 23, 2021)

v3.10.0(Dec 17, 2021)

v3.9.5(Nov 10, 2021)

v3.9.4(Oct 26, 2021)

v3.9.3(Oct 22, 2021)

v3.9.1(Jul 27, 2021)

v3.9.0(Jul 16, 2021)

v3.8.1(Jun 24, 2021)

v3.8.0(Jun 23, 2021)

v3.7.0(May 27, 2021)

v3.6.1(May 24, 2021)

v3.6.0(May 21, 2021)

v3.5.2(May 13, 2021)

v3.5.1(May 7, 2021)

v3.5.0(Apr 28, 2021)

Owner

Tencent

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Kurs-repo för kursen Webbserver och Databaser

Full-Stack Web & Mobile Developer Portfolio (Landing Page only)

Pass trust from a front-end Algorand WalletConnect session, to a back-end web service

Web-Technology with Aj Zero Coding. In this tutorial we learn front-end and back-end development.

A tiny, plugin extendable JavaScript utility library with a JQuery-like syntax.

A Simple yet extendable jQuery modal script built for use with inline HTML, images, videos, and galleries.

Personal Blog - a project developed with Angular for the front-end interface and Wordpress for the back-end API served with Docker containers

It consists of a recreation of Twitter, to put into practice both Front-end and Back-end knowledge by implementing the MERN Stack together with other technologies to add more value to the project.

It consists of a recreation of Twitter, to put into practice knowledge of both Front-end and Back-end implementing the MERN Stack along with other technologies to add more value to the project.

It is a monorepo that includes all end-to-end resolutions. You can create a website, API and mobile application.

A modular front-end framework - inspired by the server-side and Web Components.

A curated collection of free resources from across the web for front-end developers, covering everything from design to deployment.

The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.

A Web end-to-end testing framework.

This is an application that entered the market with a mobile application in real life. We wrote the backend side with node.js and the mobile side with flutter.

Smooth mobile touch slider for Mobile WebApp, HTML5 App, Hybrid App

A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes.

Catalogist is the easy way to catalog and make your software and (micro)services visible to your organization in a lightweight and developer-friendly way.