vconsole

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

``bash
$ npm install vconsole
`

`javascript
import VConsole from 'vconsole';

const vConsole = new VConsole();
// or init with options
const vConsole = new VConsole({ theme: 'dark' });

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

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

#### Method 2: Using CDN in HTML:

`html


`

Available CDN:

- https://unpkg.com/vconsole@latest/dist/vconsole.min.js
- https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js

---

Preview

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

![](./doc/screenshot/qrcode.png)

---

Screenshots

$3

$3

$3

$3

$3

$3

---

Documentation

vConsole:

- Tutorial
- Public Properties & Methods
- Builtin Plugin: Properties & Methods

Custom Plugin:

- Plugin: Getting Started
- Plugin: Building a Plugin
- Plugin: Event List

---

Third-party Plugins

- vConsole-sources
- vconsole-webpack-plugin
- vconsole-stats-plugin
- vconsole-vue-devtools-plugin
- vconsole-outputlog-plugin
- vite-plugin-vconsole

---

Feedback

QQ Group: 497430533


---

License

The MIT License