移动端开发调试难?试试这款神器!

  大家好,我是为广大程序员兄弟操碎了心的小编,每天推荐一个小工具/源码,装满你的收藏夹,每天分享一个小技巧,让你轻松节省开发效率,实现不加班不熬夜不掉头发,是我的目标!

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

  • 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 到项目中:


对于 TypeScript,可引入 d.ts 文件:

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

预览

移动端开发调试难?试试这款神器!_第1张图片

移动端开发调试难?试试这款神器!_第2张图片

移动端开发调试难?试试这款神器!_第3张图片

移动端开发调试难?试试这款神器!_第4张图片

结尾

  本期就分享到这里,我是小编南风吹,专注分享好玩有趣、新奇、实用的开源项目及开发者工具、学习资源!希望能与大家共同学习交流,欢迎关注我的公众号【Github导航站】

你可能感兴趣的:(前端调试github)