“zq” f68be1a75f 更新		3 týždňov pred
..
build	f68be1a75f 更新	3 týždňov pred
dist	f68be1a75f 更新	3 týždňov pred
CHANGELOG.md	f68be1a75f 更新	3 týždňov pred
CHANGELOG_CN.md	f68be1a75f 更新	3 týždňov pred
LICENSE	f68be1a75f 更新	3 týždňov pred
README.md	f68be1a75f 更新	3 týždňov pred
README_CN.md	f68be1a75f 更新	3 týždňov pred
package.json	f68be1a75f 更新	3 týždňov pred

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

Latest version:

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:

Preview

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

Screenshots

Overview

Light theme

![](./doc/screenshot/overview_light.jpg)

Dark theme

![](./doc/screenshot/overview_dark.jpg)

Log Panel

Log styling

![](./doc/screenshot/plugin_log_types.jpg)

Command line

![](./doc/screenshot/plugin_log_command.jpg)

System Panel

Performance info

![](./doc/screenshot/plugin_system.jpg)

Output logs to different panel

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

Network Panel

Request details

![](./doc/screenshot/plugin_network.jpg)

Element Panel

Realtime HTML elements structure

![](./doc/screenshot/plugin_element.jpg)

Storage Panel

Add, edit, delete or copy Cookies / LocalStorage / SessionStorage

![](./doc/screenshot/plugin_storage.jpg)

Documentation

vConsole:

Custom Plugin:

Third-party Plugins

Feedback

QQ Group: 497430533

License

The MIT License

README.md