腾讯移动端调试·vConsolethc手机「腾讯移动端调试·vConsole」

English | 简体中文

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

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

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

---

• 日志(Logs)：
• 网络(Network)： , ,
• 节点(Element)： HTML 节点树
• 存储(Storage)： , ,
• 手动执行 JS 命令行
• 自定义插件

详情可参考下方的截图。

---

最新版本：
每个版本的详细说明请参阅 Changelog。

---

详细使用方法请参阅使用教程。

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

方法一：使用 npm（推荐）

Import 并初始化后，即可使用 功能，如 Chrome devtools 上一样。

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

可用的 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

---

概览

浅色主题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jnmwIqIx-1683785301865)(https://blog.csdn.net/qq_35606400/article/details/doc/screenshot/overview_light.jpg)]

深色主题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SjCTHCRE-1683785301867)(https://blog.csdn.net/qq_35606400/article/details/doc/screenshot/overview_dark.jpg)]

Log 面板

Log 样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kgYWEf7I-1683785301870)(https://blog.csdn.net/qq_35606400/article/details/doc/screenshot/plugin_log_types.jpg)]

命令行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P42JBxOM-1683785301873)(https://blog.csdn.net/qq_35606400/article/details/doc/screenshot/plugin_log_command.jpg)]

System 面板

Performance 信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mqW89lqs-1683785301874)(https://blog.csdn.net/qq_35606400/article/details/doc/screenshot/plugin_system.jpg)]

输入日志到不同的 log 面板

Network 面板

请求、回包的详情

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oRG1EqIu-1683785301876)(https://blog.csdn.net/qq_35606400/article/details/doc/screenshot/plugin_network.jpg)]

Element 面板

查看 HTML 对象结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A7up64fB-1683785301877)(https://blog.csdn.net/qq_35606400/article/details/doc/screenshot/plugin_element.jpg)]

Storage 面板

添加、编辑、删除、复制 Cookies / LocalStorage / SessionStorage

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XFaHhU2m-1683785301879)(https://blog.csdn.net/qq_35606400/article/details/doc/screenshot/plugin_storage.jpg)]

---

vConsole 本体：

• 使用教程
• 公共属性及方法
• 内置插件：属性及方法

自定义插件：

• 插件：入门
• 插件：编写插件
• 插件：Event 事件列表

---

• vConsole-sources
• vconsole-webpack-plugin
• vconsole-stats-plugin
• vconsole-vue-devtools-plugin
• vconsole-outputlog-plugin
• vite-plugin-vconsole

---

QQ 群：497430533

---