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

2019-11-16 23:58:31  阅读 318 次 评论 0 条

写在前面

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

  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写的小接口,感兴趣可以一同研究)

qrcode (1).png


QQ图片20191117003123.png

文档

vConsole 本体:

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

插件:

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


本文地址:https://www.yangguangdream.com/?id=2057
版权声明:本文为原创文章,版权归 编辑君 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?