You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
196 lines
4.0 KiB
196 lines
4.0 KiB
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: [](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)
|
|
|
|
|
|
|
|
---
|
|
|
|
## Screenshots
|
|
|
|
### Overview
|
|
|
|
<details>
|
|
<summary>Light theme</summary>
|
|
|
|
|
|
</details>
|
|
|
|
<details>
|
|
<summary>Dark theme</summary>
|
|
|
|
|
|
</details>
|
|
|
|
### Log Panel
|
|
|
|
<details>
|
|
<summary>Log styling</summary>
|
|
|
|
|
|
</details>
|
|
|
|
<details>
|
|
<summary>Command line</summary>
|
|
|
|
|
|
</details>
|
|
|
|
### System Panel
|
|
|
|
<details>
|
|
<summary>Performance info</summary>
|
|
|
|
|
|
</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>
|
|
|
|
|
|
</details>
|
|
|
|
### Element Panel
|
|
|
|
<details>
|
|
<summary>Realtime HTML elements structure</summary>
|
|
|
|
|
|
</details>
|
|
|
|
### Storage Panel
|
|
|
|
<details>
|
|
<summary>Add, edit, delete or copy Cookies / LocalStorage / SessionStorage</summary>
|
|
|
|
|
|
</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
|
|
|
|
|
|
|
|
---
|
|
|
|
## License
|
|
|
|
[The MIT License](./LICENSE)
|
|
|