import { VConsole } from 'vconsole';

const vConsole = new VConsole();
// or init with options
const vConsole = new VConsole({ maxLogNumber: 1000 });

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

Preview

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

Screenshots


Overview:
Light theme	Dark theme

Log Panel:
Log styling	Command line

System Panel:
Performance info	Output logs to different panel
	`console.log('[system]', 'output to system panel.')`
Network Panel:
Request details

Element Panel:
Realtime HTML elements structure

Storage Panel:
Add, edit, delete or copy Cookies / LocalStorage / SessionStorage

Documentation

vConsole:

Plugin:

Third-party Plugins

Feedback

QQ Group: 497430533

License

The MIT License

3.10.0 (2021-12-17)

In this version, we refactored a lot of core logic, and used Svelte as the rendering engine for all views.
So there are some breaking changes, a small number of methods and properties are not forward compatible.
If you are a vConsole plugin developer, you should pay attention to these changes.

Breaking Changes:

Refactor(Core|Log|Network|Element) Rebuild all views by using Svelte as template engine.
Refactor(Core) Remove vConsole.(tabList | activedTab | $dom) properties.
Refactor(Plugin) Rename vConsole.showTab(pluginID) to vConsole.showPlugin(pluginID).
Refactor(Plugin) Change callback option { data, onClick } of plugin event addTopBar: onClick method will receive 2 arguments (which was 0 before): (event: Event, data?: any) => boolean, which data is the above option's data field.
Feat(Core) Remove helper functions vConsole.tool and vConsole.$.

Common Updates:

Feat(Log) Support object's Symbol keys.
Feat(Log) Support multi-level keyword hint in Log's command line input.
Feat(Log) Support string formatting %s, %d, %o, and better %c CSS styling formatting.
Feat(Log) Add pagination to objects or arrays to improve rendering performance, with 50 key-values per page.
Feat(Network) Add copy buttons to request attributes.
Feat(Element) Improve UX, selected node will be highlighted and applied to Expand/Collapse action.
Feat(Style) Style tags will be loaded into <head> after vConsole initialization, and removed after destruction.
Refactor(Storage) Improve UX.
Fix(Network) Throw error when Fetch get an error. (issue #458)

Keywords

FAQs

What is vconsole?

Is vconsole popular?

Is vconsole well maintained?

Package last updated on 17 Dec 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install