vConsole: 一个轻量、可拓展、针对手机网页的前端开发者调试面板

代码拉取完成,页面将自动刷新

开源项目 > 手机/移动开发 && 开发工具 > 开发/调试 &&

扫描微信二维码支付

取消

支付完成

richgiteeai

Watch

不关注关注所有动态仅关注版本发行动态关注但不提醒动态

38 Star 668 Fork 99

腾讯开源/vConsole

代码 Issues 7 Pull Requests 0 Wiki 统计流水线

服务

加入 Gitee

与超过 1400万开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)

免费加入

已有帐号? 立即登录

克隆/下载

HTTPS SSH SVN SVN+SSH 下载ZIP

提示

下载代码请复制以下命令到终端执行

为确保你提交的代码身份被 Gitee 正确识别,请执行以下命令完成配置

git config --global user.name userName 
git config --global user.email userEmail

初次使用 SSH 协议进行代码克隆、推送等操作时,需按下述提示完成 SSH 配置

1 生成 RSA 密钥

2 获取 RSA 公钥内容,并配置到 SSH公钥中

在 Gitee 上使用 SVN,请访问使用指南

使用 HTTPS 协议时,命令行会出现如下账号密码验证步骤。基于安全考虑,Gitee 建议配置并使用私人令牌替代登录密码进行克隆、推送等操作

Username for 'https://gitee.com': userName

Password for 'https://userName@gitee.com': # 私人令牌

新建文件

新建子模块

上传文件

分支 19

标签 61

贡献代码

同步代码

创建 Pull Request

了解更多

对比差异通过 Pull Request 同步

同步更新到分支

通过 Pull Request 同步

将会在向当前分支创建一个 Pull
Request,合入后将完成同步

Maiz fix(Log): recognize adjacent format specif... de7026d

992 次提交

.github/ISSUE_TEMPLATE

build

dev

doc

src

.editorconfig

.gitignore

.npmignore

CHANGELOG.md

CHANGELOG_CN.md

CLAUDE.md

LICENSE

README.md

README_CN.md

babel.config.json

package-lock.json

package.json

tsconfig.json

tsconfig.type.json

webpack.config.js

webpack.serve.config.js

README

未知许可证

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

vConsole
===

一个轻量、可拓展、针对手机网页的前端开发者调试面板。

vConsole 是框架无关的,可以在 Vue、React 或其他任何框架中使用。

现在 vConsole 是微信小程序的官方调试工具。

---

## 功能特性

- 日志(Logs): `console.log|info|error|...`
- 网络(Network): `XMLHttpRequest`, `Fetch`, `sendBeacon`
- 节点(Element): HTML 节点树
- 存储(Storage): `Cookies`, `LocalStorage`, `SessionStorage`
- 手动执行 JS 命令行
- 自定义插件

详情可参考下方的截图。

---

## 版本说明

最新版本: [![npm version](https://img.shields.io/npm/v/vconsole/latest.svg)](https://www.npmjs.com/package/vconsole)

每个版本的详细说明请参阅 [Changelog](./CHANGELOG_CN.md)。

---

## 上手

详细使用方法请参阅[使用教程](./doc/tutorial_CN.md)。

将 vConsole 添加到项目中主要有以下方式:

#### 方法一:使用 npm(推荐)

```bash
$ npm install vconsole
```

Import 并初始化后,即可使用 `console.log` 功能,如 Chrome devtools 上一样。

```javascript
import VConsole from 'vconsole';

const vConsole = new VConsole();
// 或者使用配置参数来初始化,详情见文档
const vConsole = new VConsole({ theme: 'dark' });

// 接下来即可照常使用 `console` 等方法
console.log('Hello world');

// 结束调试后,可移除掉
vConsole.destroy();
```

#### 方法二:使用 CDN 直接插入到 HTML

```html
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
 // VConsole 默认会挂载到 `window.VConsole` 上
 var vConsole = new window.VConsole();
</script>
```

可用的 CDN:

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

---

## 手机预览

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

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

---

## 截图

### 概览

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

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

### Log 面板

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

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

### System 面板

<details>
 <summary>Performance 信息</summary>

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

<details>
 <summary>输入日志到不同的 log 面板</summary>

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

### Network 面板

<details>
 <summary>请求、回包的详情</summary>

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

### Element 面板

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

### Storage 面板

<details>
 <summary>添加、编辑、删除、复制 Cookies / LocalStorage / SessionStorage</summary>

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

---

## 文档

vConsole 本体:

- [使用教程](./doc/tutorial_CN.md)
 - [公共属性及方法](./doc/public_properties_methods_CN.md)
 - [内置插件:属性及方法](./doc/plugin_properties_methods_CN.md)

自定义插件:

- [插件:入门](./doc/plugin_getting_started_CN.md)
 - [插件:编写插件](./doc/plugin_building_a_plugin_CN.md)
 - [插件:Event 事件列表](./doc/plugin_event_list_CN.md)

---

## 第三方插件列表

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

---

## 交流反馈

QQ 群:497430533

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

---

## License

[The MIT License](./LICENSE)

Tencent is pleased to support the open source community by making vConsole available. Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. If you have downloaded a copy of the vConsole binary from Tencent, please note that the vConsole binary is licensed under the MIT License. If you have downloaded a copy of the vConsole source code from Tencent, please note that vConsole source code is licensed under the MIT License, except for the third-party components listed below which are subject to different license terms. Your integration of vConsole into your own projects may require compliance with the MIT License, as well as the other licenses applicable to the third-party components included within vConsole. A copy of the MIT License is included in this file.