Awesome
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
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)
$ npm install vconsole
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:
<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:
- 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
Screenshots
Overview
<details> <summary>Light theme</summary> </details> <details> <summary>Dark theme</summary> </details>Log Panel
<details> <summary>Log styling</summary> </details> <details> <summary>Command line</summary> </details>System Panel
<details> <summary>Performance info</summary> </details> <details> <summary>Output logs to different panel</summary>console.log('output to Log panel.')
console.log('[system]', 'output to System panel.')
</details>
Network Panel
<details> <summary>Request details</summary> </details>Element Panel
<details> <summary>Realtime HTML elements structure</summary> </details>Storage Panel
<details> <summary>Add, edit, delete or copy Cookies / LocalStorage / SessionStorage</summary> </details>Documentation
vConsole:
Custom Plugin:
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