神器vConsole！快速定位移动端问题，加快开发效率

2023-05-31 20:11| 来源: 网络整理| 查看: 265

大家好，我是程序视点的小二哥!

今天小二哥碰到一新来的实习生在使用 alert 调试H5页面，仿佛看到小二哥年少时羞涩的样子...

趁这个机会，就给大家分享一个针对手机网页的前端开发者调试面板工具：vConsole

请在此添加图片描述

简介

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

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

请在此添加图片描述

功能特性

查看日志(Logs)： console.log|info|error|...

请在此添加图片描述

查看网络请求(Network)：请求、响应的详情

请在此添加图片描述

查看节点结构(Element)： HTML 节点树

请在此添加图片描述

管理存储(Storage)：添加、编辑、删除、复制 Cookies / LocalStorage / SessionStorage

请在此添加图片描述

手动执行 JS 命令行: 这就和在 Chrome devtools 的console面版中执行命令一样。

使用方法

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

方法一：使用 npm（推荐） $ npm install vconsole

Import 并初始化后，即可使用 console.log 功能。

import VConsole from 'vconsole'; const vConsole = new VConsole(); // 或者使用配置参数来初始化，详情见文档 const vConsole = new VConsole({ theme: 'dark' }); // 接下来即可照常使用 `console` 等方法 console.log('Hello world'); // 结束调试后，可移除掉 vConsole.destroy(); 方法二：使用 CDN 直接插入到 HTML // VConsole 默认会挂载到 `window.VConsole` 上 var vConsole = new window.VConsole();

可用的 CDN：

https://unpkg.com/vconsole@latest/dist/vconsole.min.js https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js 使用示例和建议

引入 vConsole 模块后，页面前端将会在右下角出现 vConsole 的悬停按钮，可展开/收起面板。

支持 4 种不同类型的日志，会以不同的颜色输出到前端面板：

请在此添加图片描述

支持打印 Object 对象，会以 JSON 字符串格式输出：

请在此添加图片描述

vConsole 面板中的使用几乎如同 Chrome devtools 一样。

重点注意：请不要在生产环境中引入 vConsole 模块。

vConsole 还提供了公共属性、方法和配置项，以及插件的使用。这些详细的使用就留待大家去查阅啦。

vConsole地址https://gitee.com/Tencent/vConsole

【本文地址】

公司简介

联系我们