加载中......
输入验证码,即可复制
微信扫码下载好向圈APP, 登陆后即可进入消息页面查看验证码
只需要3秒时间
  大家好,我是为广大程序员兄弟操碎了心的小编,每天推荐一个小工具/源码,装满你的收藏夹,每天分享一个小技巧,让你轻松节省开发效率,实现不加班不熬夜不掉头发,是我的目标!
  我们在开发手机版网页的时候,常常会出现下面的情景:

    1.开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log。2.上线后,某用户表示页面失灵,但我们自己又重现不出来,看不到用户的出错信息。
  如果说(1)还可以通过电脑连接手机以查看log来解决,那(2)在没有完善的前端上报体系时就非常被动了。所以,今天小编推荐一款手机前端开发调试利器——vConsole

特性

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

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

或者使用 npm 安装:

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

<script src="path/to/vconsole.min.js"></script><script>  // 初始化  var vConsole = new VConsole();  console.log('Hello world');</script>
对于 TypeScript,可引入 d.ts 文件:

import 'path/to/vconsole.min.d.ts';预览


移动端开发调试难?试试这款神器-1.jpg


移动端开发调试难?试试这款神器-2.jpg


移动端开发调试难?试试这款神器-3.jpg


移动端开发调试难?试试这款神器-4.jpg

结尾

  本期就分享到这里,我是小编南风吹,专注分享好玩有趣、新奇、实用的开源项目及开发者工具、学习资源!希望能与大家共同学习交流。
前端开发
7586 查看 0 0 反对

说说我的看法高级模式

您需要登录后才可以回帖 登录|立即注册

还没人评论此主题哦

相关阅读