Package Exports

vconsole
vconsole/dist/vconsole.min
vconsole/dist/vconsole.min.d.ts
vconsole/dist/vconsole.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vconsole) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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('[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:

Plugin:

Third-party Plugins

Feedback

QQ Group: 497430533

License

The MIT License