# Repository: Tencent/vConsole
# Stars: 17468

## CLAUDE.md

# vConsole Development Notes

Reply in Simplified Chinese, but use English for code, comments, and Git.

## Workflow

### Coding
1. Evaluate feasibility. If accepted by user, use plan mode.
2. After implementation, update related `dev/*.html` test cases and `doc/*.md` documentation if necessary.
3. Update both `CHANGELOG.md` (English) and `CHANGELOG_CN.md` (Chinese) under the current unreleased version block.
  - Follows the existing entry format: `` `Category(Module)` Description. (PR/issue #xxx) ``
  - Common type categories: `Feat`, `Fix`, `Perf`, `Chore` (sorted by category)
  - Common modules: `Core`, `Network`, `Log`, `Storage`, `Element` (sorted by module)
4. Commit.

### Git
- Use English commit messages, format: `<type>(<module>): <subject>`
- Do not add `Co-Authored-By: Claude` to commit messages.
- Use `unset GITHUB_TOKEN && /opt/homebrew/bin/gh` to access GitHub (instead of `gh` below).
- Ask for user approval before committing or merging any changes.

### Issues

1. Fetch the issue with `gh issue view <N> --repo Tencent/vConsole`.
2. Read the relevant source files before drawing conclusions.
3. Determine the category:
   - **Bug**: investigate root cause, fix source, commit, update both changelogs.
   - **Usage / environment problem**: explain why it is not a vConsole bug and suggest directions.
   - **Feature request**: run coding task, then commit with `Closes #N`.
4. Draft a short, concise reply with neutral tone in the issue author's language. Show to user for confirmation, then post with:
   `gh issue comment <N> --repo Tencent/vConsole --body "..."`

### PRs

1. Fetch the PR diff and conversations from GitHub.
2. Read the affected local source files before judging the implementation.
3. Evaluate correctness and flag any issues found.
4. Merge with `gh pr merge <N> --repo Tencent/vConsole --squash` and run `git pull`.
5. Fix any remaining issues in the local copy, then update both changelogs.
6. Commit.


## README.md

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)