# vconsole

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

Latest version **3.15.1** (published 2023-06-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install vconsole
pnpm add vconsole
yarn add vconsole
bun add vconsole
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; popular repo.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.15.1 |
| Published | 2023-06-01 |
| First published | 2016-04-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 382.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17516 |
| Author | Tencent |
| Maintainers | maiz |
| Keywords | console, debug, mobile |

## Links

- npm: https://www.npmjs.com/package/vconsole
- Repository: https://github.com/Tencent/vConsole
- Issues: https://github.com/Tencent/vConsole/issues
- npm.io page: https://npm.io/package/vconsole

## Dependencies (4)

- [core-js](https://npm.io/package/core-js.md) ^3.11.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.17.2
- [mutation-observer](https://npm.io/package/mutation-observer.md) ^1.0.3
- [copy-text-to-clipboard](https://npm.io/package/copy-text-to-clipboard.md) ^3.0.1

## Alternatives

- [cli-color](https://npm.io/package/cli-color.md) — 3.4M weekly downloads
- [log](https://npm.io/package/log.md) — 1.3M weekly downloads
- [logstash-client](https://npm.io/package/logstash-client.md) — 4.5K weekly downloads
- [@nocobase/plugin-logger](https://npm.io/package/@nocobase/plugin-logger.md) — 2.0K weekly downloads
- [child-process-debug](https://npm.io/package/child-process-debug.md) — 695 weekly downloads

## Recent versions

- 3.15.1 (latest) — 2023-06-01
- 3.15.0 — 2022-11-02
- 3.14.7 — 2022-09-23
- 3.14.6 — 2022-04-14
- 3.14.5 — 2022-04-06
- 3.14.4 — 2022-03-31
- 3.14.3 — 2022-03-28
- 3.14.2 — 2022-03-25
- 3.14.1 — 2022-03-24
- 3.14.0 — 2022-03-23
- 3.13.0 — 2022-03-15
- 3.12.1 — 2022-02-25
- 3.12.0 — 2022-02-17
- 3.11.2 — 2022-01-20
- 3.11.1 — 2022-01-13
- … 49 more at https://npm.io/package/vconsole/versions

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

- 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

<details>
  <summary>Light theme</summary>

![](./doc/screenshot/overview_light.jpg)
</details>

<details>
  <summary>Dark theme</summary>

![](./doc/screenshot/overview_dark.jpg)
</details>

### Log Panel

<details>
  <summary>Log styling</summary>

![](./doc/screenshot/plugin_log_types.jpg)
</details>

<details>
  <summary>Command line</summary>

![](./doc/screenshot/plugin_log_command.jpg)
</details>

### System Panel

<details>
  <summary>Performance info</summary>

![](./doc/screenshot/plugin_system.jpg)
</details>

<details>
  <summary>Output logs to different panel</summary>

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

### Network Panel

<details>
  <summary>Request details</summary>

![](./doc/screenshot/plugin_network.jpg)
</details>

### Element Panel

<details>
  <summary>Realtime HTML elements structure</summary>

![](./doc/screenshot/plugin_element.jpg)
</details>

### Storage Panel

<details>
  <summary>Add, edit, delete or copy Cookies / LocalStorage / SessionStorage</summary>

![](./doc/screenshot/plugin_storage.jpg)
</details>

---

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

---
_Source: https://npm.io/package/vconsole · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._