手机前端开发调试利器 – vConsole

写在前面

我们在开发手机端网页的时候，常常会出现以下情景

1. 开发时，在自己电脑上运行得好好的，在手机上打开就挂了，但是手机上又看不到error log；

2. 上线后，某用户表示页面出错，但我们自己又重现不出来，看不到用户侧的出错信息。

如果说(1)还可以通过电脑连接手机以查看log来进行调试

那(2)在没有完善的前端上报体系时就显得非常被动了

那么问题来了，有没有快捷的方法在手机前端页面看到log日志？

答案是肯定的

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

特性

• 查看 console 日志

• 查看网络请求

• 手动执行 JS 命令行

• 自定义插件

上手

下载 vConsole 的最新版本。（不要直接下载 dev 分支下的 dist/vconsole.min.js）

或者使用npm安装

npm install vconsole

引入 dist/vconsole.min.js 到项目中

<script type="text/javascript" src="https://sg-common.s5s.pw/vConsole/lib/vconsole.min.js"></script>
<script type="text/javascript">
    var vco=new VConsole();
    console.log("Hello World ");
    console.log("course by sunnydream");
</script>

测试项目(用手机访问的小伙伴可以直接点击访问)：https://sg-demo.s5s.pw/VConsoleDemo/index.html

或者扫描下方二维码(扫不出来的帮忙反馈下哈，自己用.NET写的小接口，感兴趣可以一同研究)

文档

vConsole 本体：

使用教程 | 公共属性及方法 | 辅助函数

插件：

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

微信扫码查看本文