移动端开发调试神器 vConsole

前言

我们在开发手机版网页的时候，常常会出现下面的情景：
(1) 开发时，在自己电脑上运行得好好的，在手机上打开就挂了，但是手机上又看不到error log；
(2) 上线后，某用户表示页面失灵，但我们自己又重现不出来，看不到用户侧的出错信息。
如果说(1)还可以通过电脑连接手机以查看log来解决，那(2)在没有完善的前端上报体系时就非常被动了。
作为开发者，我们的诉求很简单：有没有快捷的方法在手机前端页面看到log日志？

vConsole前端调试面板

莫慌，抱紧vConsole！

vConsole是一款由微信公众平台前端团队打造的前端调试面板，专治手机端看log难题。

目前vConsole自带有2个面板，默认为“日志”面板，负责展示log。

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

• 查看 console 日志
• 查看网络请求
• 查看页面 element 结构
• 查看 Cookies、localStorage 和 SessionStorage
• 手动执行 JS 命令行
• 自定义插件

上手

下载 vConsole 的最新版本。
使用 npm 安装：
npm install vconsole

使用

// package.json
// "vconsole": "^3.3.4",

import vConsole from 'vconsole';
const Console = new vConsole();

结尾

我是圆圆，如果我的文章对你的学习成长有所帮助，欢迎 点 赞 👍 支持，您的 点 赞 👍 支持是我进行创作和分享的动力！

如果有问题可以留言评论或者私信我，我都会一一解答~笔芯🤞

参考

• vConsole首页、文档和下载 - 手机前端开发调试利器 - OSCHINA - 中文开源技术交流社区 https://www.oschina.net/p/vconsole
• https://gitee.com/Tencent/vConsole?utm_source=alading&utm_campaign=repo