mirror of https://github.com/Tencent/vConsole.git synced 2024-10-23 05:34:04 +08:00

A lightweight, extendable front-end developer tool for mobile web page.

Go to file

Maiz 6f8ef9b9a9 Fix(Network): Fix possible "Cannot read property" error by `sendBeacon`. (issue #615 , #629 )		2023-06-14 11:03:22 +08:00
.github/ISSUE_TEMPLATE	v3.6.0 (#401 )	2021-05-21 18:52:47 +08:00
build	build: add option to disable `core-js` polyfill	2022-08-27 20:43:28 +08:00
dev	fix(Core): Fix plugin event `ready` triggering before its HTML finishes rendering. (issue #591 )	2023-05-24 18:29:13 +08:00
doc	chore: rename hideUrlRegexp to ignoreUrlRegExp	2023-05-22 20:34:11 +08:00
src	Fix(Network): Fix possible "Cannot read property" error by `sendBeacon`. (issue #615 , #629 )	2023-06-14 11:03:22 +08:00
.editorconfig	fixed: localStorage is null. add unit test script. add editorconfig.	2016-06-07 10:47:01 +08:00
.gitignore	v3.9.2 (#463 )	2021-10-22 11:12:11 +08:00
.npmignore	v3.5.0 (#382 )	2021-04-28 18:47:46 +08:00
babel.config.json	refactor(storage): Improve robustness.	2022-03-09 22:02:33 +08:00
CHANGELOG_CN.md	Fix(Network): Fix possible "Cannot read property" error by `sendBeacon`. (issue #615 , #629 )	2023-06-14 11:03:22 +08:00
CHANGELOG.md	Fix(Network): Fix possible "Cannot read property" error by `sendBeacon`. (issue #615 , #629 )	2023-06-14 11:03:22 +08:00
LICENSE	update license	2017-09-15 16:19:32 +08:00
package-lock.json	chore: v3.14.6	2022-04-14 16:57:40 +08:00
package.json	chore: v3.15.1	2023-06-01 17:07:39 +08:00
README_CN.md	docs: v3.12.0	2022-02-17 17:27:06 +08:00
README.md	docs: update docs	2022-03-28 16:30:51 +08:00
tsconfig.json	chore(Core): Fix type declaration errors caused by vendors.	2022-02-25 14:16:40 +08:00
tsconfig.type.json	chore(Core): Fix type declaration errors caused by vendors.	2022-02-25 14:16:40 +08:00
webpack.config.js	chore: use __TARGET__ for no-core-js	2022-09-23 18:48:32 +08:00
webpack.serve.config.js	Fix(Network): Do not proxy response body reader when response is done.	2022-04-02 14:31:01 +08:00

README.md

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

Dark theme

Log Panel

Log styling

Command line

System Panel

Performance info

Output logs to different panel

console.log('output to Log 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:

Custom Plugin:

Third-party Plugins

Feedback

QQ Group: 497430533

License

The MIT License