vConsole: a full debug panel you ship inside the page

Two install routes, and the CDN one pins @latest

Adding vConsole takes one line either way. npm is the recommended route, and the package name is vconsole.

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

The constructor takes options, and the theme is the one shown in the example. A script tag is the other route, and the class is exported to window.VConsole by default.

<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>

Two CDNs are named, unpkg and cdn.jsdelivr.net, and both use vconsole@latest rather than a version. That tag follows whatever npm currently serves as the latest release, which is not necessarily the code in the branch you are reading.

The network panel covers three transports and names them

The Network panel is not a proxy. vConsole hooks XMLHttpRequest, Fetch and sendBeacon, and those three names are the entire scope the README gives. A page that streams over WebSocket, or subscribes through EventSource, has no entry to show, so a live-update screen can look like a dead network tab.

The same three-wrapper approach explains the runtime footprint. package.json lists three dependencies and nothing else: @babel/runtime, core-js and copy-text-to-clipboard, the last one there because the panel has a copy button. There is no framework in the dependency list, which is what the framework-free claim comes from and why the same build works inside Vue, React or a plain page.

vConsole is also the official debugging tool for WeChat Miniprograms. That is not incidental to the build: the package scripts carry a separate webpack invocation, build:wx, that passes --env target=wx, so the miniprogram bundle is its own build target rather than a shim over the web one.

console.log('[system]', ...) is the documented routing key

Anything you log goes to the Log panel, except output whose first argument is the literal string [system], which the panel reroutes to the System panel. Both forms appear side by side in the README.

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

That is a string convention rather than a separate API, so any log line that happens to start with a bracketed system tag is diverted whether you meant it or not, and a teammate scanning a shared log has to know the convention to read the output in the right place.

The other panels work the same way, in the sense that you look rather than act. Element shows the HTML elements tree as it is at that moment. Storage lists Cookies, LocalStorage and SessionStorage and lets you add, edit, delete or copy entries. A command line executes JavaScript by hand on the device, the fastest way to inspect state and the fastest way to change it by accident.

vConsole.destroy() is the entire removal story

Nothing in the documented setup removes the panel at build time. One removal path exists, a runtime call to vConsole.destroy(), and the example puts a comment on it that reads remove it when you finish debugging. A new VConsole() that reaches production therefore ships a log buffer, a network recorder, a DOM tree view and an executable command line to every user of that page.

The third-party plugin list is where a build-time answer would live. That list includes vconsole-webpack-plugin and vite-plugin-vconsole alongside vConsole-sources, vconsole-stats-plugin, vconsole-vue-devtools-plugin and vconsole-outputlog-plugin, and the README names them without saying what any of them changes. Reading the plugin you intend to depend on is on you.

There is a second consequence for anyone shipping vConsole to testers or reviewers. Because the Storage panel can edit entries and the command line runs arbitrary JavaScript, a person holding an open panel can change application state and then exercise flows that no longer reflect the code under test.

The published tarball is dist/*, not src/

package.json sets main to dist/vconsole.min.js and typings to dist/vconsole.min.d.ts, and the files array ships dist/*, build/vendor.d.ts, the changelogs and the readmes. No src/ tree ships in the package, so a panel's behaviour cannot be changed from an installed copy. Customising means either writing a plugin against the documented plugin API, which has its own getting started, building and event list pages under doc/, or working from the repository.

The build itself is webpack with a TypeScript and Svelte toolchain, including svelte-loader, less for styles, and separate production, development and watch scripts. Two fields describe the module shape rather than the build: sideEffects names lib/*, element/*, network/* and storage/*, marking those paths as having side effects for bundlers.

For a project measuring its bundle, the practical point is that the entry point is a minified single file with a type declaration beside it, and three runtime dependencies is the honest cost of the panel.

A 2023 release tag on a 2026 push, on the dev branch

The default branch is dev, and its last push was on 2026-03-27. The newest release tag in the repository is v3.15.1 from 2023-06-01, preceded by v3.15.0 from 2022-11-02 and v3.14.7 from 2022-09-23, while package.json on that branch reads 3.16.0-alpha. A three-year gap between the last tag and an unreleased alpha means the version you install is not the version in the tree.

Two things follow for a library you vendor into a mobile page. Anything installed from npm, or from a CDN tag using @latest, gets a published release, so behaviour you read in src/ on dev may not be what your users load. And for a project that has to justify a dependency years later, CHANGELOG.md and CHANGELOG_CN.md are the only record of what changed per version.

Licensing is stated as The MIT License pointing at the LICENSE file, while the repository's own metadata reports no assertion for the licence field. Read the LICENSE file rather than the metadata. A demo preview is linked from the README and served from wechatfe.github.io rather than a tencent.github.io host, and one listed third-party plugin lives under the WechatFE organisation.

Editorial conclusion

vConsole is the right pick when a bug only reproduces on a real handset and all you need is console output, network traffic and the live DOM, and the wrong pick when the problem needs breakpoints, stack inspection or source-level stepping. Guard it with a condition you control, since the README's only removal path is vConsole.destroy() at runtime. Before pinning, compare the newest release tag, v3.15.1 from 2023-06-01, against the 3.16.0-alpha in package.json, because the published package may not match the branch source.

Frequently asked questions

Official sources

1. Issues
2. README
3. Releases
4. Tencent/vConsole on GitHub