Skip to content

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

License

Notifications You must be signed in to change notification settings

my19940202/forkedvConsole

This branch is up to date with Tencent/vConsole:dev.

Folders and files

NameName
Last commit message
Last commit date
May 21, 2021
Aug 27, 2022
May 24, 2023
May 22, 2023
Jun 14, 2023
Jun 7, 2016
Oct 22, 2021
Apr 28, 2021
Jun 14, 2023
Jun 14, 2023
Sep 15, 2017
Mar 28, 2022
Feb 17, 2022
Mar 9, 2022
Apr 14, 2022
Jun 1, 2023
Feb 25, 2022
Feb 25, 2022
Sep 23, 2022
Apr 2, 2022

Repository files navigation

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 48.2%
  • Svelte 23.0%
  • HTML 17.8%
  • Less 6.9%
  • JavaScript 3.9%
  • CSS 0.2%