Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vconsole

Package Overview
Dependencies
Maintainers
1
Versions
64
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vconsole

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

  • 3.11.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
40K
decreased by-23.4%
Maintainers
1
Weekly downloads
 
Created
Source

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 (Recommanded)
$ npm install vconsole
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('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

Keywords

FAQs

Package last updated on 20 Jan 2022

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc