Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/WechatFE/vConsole

A lightweight, extendable front-end developer tool for mobile web page.
https://github.com/WechatFE/vConsole

console mobile wechat

Last synced: 3 months ago
JSON representation

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

Host: GitHub
URL: https://github.com/WechatFE/vConsole
Owner: Tencent
License: other
Created: 2016-04-27T03:33:45.000Z (over 8 years ago)
Default Branch: dev
Last Pushed: 2024-04-08T09:11:50.000Z (7 months ago)
Last Synced: 2024-04-14T21:30:08.854Z (7 months ago)
Topics: console, mobile, wechat
Language: TypeScript
Homepage:
Size: 5.02 MB
Stars: 16,440
Watchers: 306
Forks: 2,934
Open Issues: 71
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

awesomelist - **vConsole** - end developer tool for mobile web page. (2017.4)
awesomelist - **vConsole** - end developer tool for mobile web page. (2017.4)

README

        English | [简体中文](./README_CN.md)

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](https://img.shields.io/npm/v/vconsole/latest.svg)](https://www.npmjs.com/package/vconsole)

Detailed release notes for each version are available on [Changelog](./CHANGELOG.md).

---

## Guide

See [Tutorial](./doc/tutorial.md) for more usage details.

For installation, there are 2 primary ways of adding vConsole to a project:

#### Method 1: Using npm (Recommended)

```bash

$ npm install vconsole

```

```javascript

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:

```html

  // VConsole will be exported to `window.VConsole` by default.

  var vConsole = new window.VConsole();

```

Available CDN:

- https://unpkg.com/vconsole@latest/dist/vconsole.min.js

- https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js

---

## Preview

[http://wechatfe.github.io/vconsole/demo.html](http://wechatfe.github.io/vconsole/demo.html)

![](./doc/screenshot/qrcode.png)

---

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

 - [Tutorial](./doc/tutorial.md)

 - [Public Properties & Methods](./doc/public_properties_methods.md)

 - [Builtin Plugin: Properties & Methods](./doc/plugin_properties_methods.md)

Custom Plugin:

 - [Plugin: Getting Started](./doc/plugin_getting_started.md)

 - [Plugin: Building a Plugin](./doc/plugin_building_a_plugin.md)

 - [Plugin: Event List](./doc/plugin_event_list.md)

---

## Third-party Plugins

 - [vConsole-sources](https://github.com/WechatFE/vConsole-sources)

 - [vconsole-webpack-plugin](https://github.com/diamont1001/vconsole-webpack-plugin)

 - [vconsole-stats-plugin](https://github.com/smackgg/vConsole-Stats)

 - [vconsole-vue-devtools-plugin](https://github.com/Zippowxk/vue-vconsole-devtools)

 - [vconsole-outputlog-plugin](https://github.com/sunlanda/vconsole-outputlog-plugin)

 - [vite-plugin-vconsole](https://github.com/vadxq/vite-plugin-vconsole)

---

## Feedback

QQ Group: 497430533

![](./doc/screenshot/qq_group.png)

---

## License

[The MIT License](./LICENSE)