English | Simplified Chinese
vConsole
A lightweight, scalable, front-end developer debugging panel for mobile web pages.
vConsole is framework agnostic and can be used in Vue, React or any other framework.
vConsole is now the official debugging tool for WeChat mini programs.
Features
- Logs:
console.log|info|error|... - Network:
XMLHttpRequest,Fetch,sendBeacon - Node (Element): HTML node tree
- Storage:
Cookies,LocalStorage,SessionStorage - Manually execute JS command line
- Custom plugin
Please refer to the screenshot below for details.
Release Notes
Latest version: 
Please see the Changelog for detailed descriptions of each version .
good
Please refer to the usage tutorial for detailed usage .
The main ways to add vConsole to the project are as follows:
Method 1: Use npm (recommended)
$ npm install vconsole
Once imported and initialized, you can use console.logthe functionality just like on Chrome devtools.
import VConsole from 'vconsole';
const vConsole = new VConsole();
// 或者使用配置参数来初始化，详情见文档
const vConsole = new VConsole({
theme: 'dark' });
// 接下来即可照常使用 `console` 等方法
console.log('Hello world');
// 结束调试后，可移除掉
vConsole.destroy();
Method 2: Use CDN to insert directly into HTML
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
// VConsole 默认会挂载到 `window.VConsole` 上
var vConsole = new window.VConsole();
</script>
Available CDNs:
- https://unpkg.com/vconsole@latest/dist/vconsole.min.js
- https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js
Mobile preview
http://wechatfe.github.io/vconsole/demo.html
screenshot
Overview
light theme[The external link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-jnmwIqIx-1683785301865)(./doc/screenshot/overview_light.jpg)]
dark theme[The external link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-SjCTHCRE-1683785301867)(./doc/screenshot/overview_dark.jpg)]
Log panel
Log style[The external link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-kgYWEf7I-1683785301870)(./doc/screenshot/plugin_log_types.jpg)]
Command Line[The external link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-P42JBxOM-1683785301873)(./doc/screenshot/plugin_log_command.jpg)]
System panel
Performance information[The external link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-mqW89lqs-1683785301874)(./doc/screenshot/plugin_system.jpg)]
Input logs to different log panelsconsole.log('output to Log panel.')
console.log('[system]', 'output to System panel.')
Network panel
Details of request and return package[The external link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-oRG1EqIu-1683785301876)(./doc/screenshot/plugin_network.jpg)]
Element panel
View HTML object structure[The external link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-A7up64fB-1683785301877)(./doc/screenshot/plugin_element.jpg)]
Storage panel
Add, edit, delete, copy Cookies / LocalStorage / SessionStorage[The external link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-XFaHhU2m-1683785301879)(./doc/screenshot/plugin_storage.jpg)]
document
vConsole body:
Custom plugin:
List of third-party plug-ins
- vConsole-sources
- vconsole-webpack-plugin
- vconsole-stats-plugin
- vconsole-vue-devtools-plugin
- vconsole-outputlog-plugin
- vite-plugin-vconsole
Exchange feedback
QQ group: 497430533