English | 简体中文

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.

• Logs: console.log|info|error|...
• Network: XMLHttpRequest, Fetch, sendBeacon
• Element: HTML elements tree
• Storage: Cookies, LocalStorage, SessionStorage
• MCP: Let desktop AI debugging tools read page logs and network requests, with optional JavaScript execution after explicit on-device authorization
• Execute JS command manually
• Custom plugins

For details, please see the screenshots below.

Latest version:

Detailed release notes for each version are available on Changelog.

See Tutorial for more usage details.

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

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

<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

The built-in MCP panel connects the page to a vConsole MCP server running on your computer. Once connected, MCP clients such as Codex and Claude Code can read Console logs and Network requests from the current mobile page.

To connect, start the MCP server on the computer, open the MCP panel, enter the computer's reachable LAN IP in Host, then enter its port and optional pairing token. Tap Connect; the page is available to the MCP client when Status becomes open. Do not use localhost as the host when connecting from a phone.

Allow JavaScript Execution is denied by default. Enable it only when the AI must operate the page. Authorization granted in the panel lasts only for the current page lifetime and resets after a reload, unless it is explicitly enabled in the initialization options. Executed scripts have the full privileges of the current page context, so use a pairing token and enable this option only on trusted development pages and networks.

HTTPS pages require a secure WebSocket (wss://) endpoint. See Public Properties & Methods for programmatic configuration.

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

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

vConsole:

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

Custom Plugin:

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

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

QQ Group: 497430533

The MIT License