您的当前位置:首页正文

前端开发 - 在手机上调试利器vConsole

来源:华拓网

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

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

(2) 上线后,某用户表示页面失灵,但我们自己又重现不出来,看不到用户端的出错信息。

如果说(1)还可以通过电脑连接手机以查看log来解决,那(2)在没有完善的前端上报体系时就非常被动了。

作为开发者,我们的诉求很简单:有没有快捷的方法在手机前端页面看到log日志?

答案是肯定的。

特性:

  • 查看 console 日志
  • 查看网络请求
  • 手动执行 JS 命令行
  • 自定义插件

上手


npm install vconsole

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

//如果打生产包,只需要这行注释(去掉)即可
<script src="path/vconsole.min.js"></script>

<script>
// init vConsole
var vConsole = new VConsole();
console.log('Hello world');

// 然后点击右下角 vConsole 按钮即可查看到 log

</script>

或者

/* eslint-disable no-unused-vars */
import vConsole from 'vconsole';  //如果打生产包,只需要这行注释即可

console.log('Test');

Demo

image.png