移动端没有控制台该如何调试?

“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第3篇文章，点击查看活动详情”

移动端开发如何在手机上进行调试

相信在开发移动端的时候,都会有这样的问题,调试的时候是在浏览器调试,浏览器有控制台,而放到手机环境呢,有些接口功能会有问题,而手机又不能看控制台,就很难受,这里有两种解决方案:

1.调试神器v-console

这是一个第三方库,是一个手机控制台,安装之后,会在项目底部多出个按钮,点击之后会出来控制台,在控制台里我们能看到多有请求及打印,如下图:

使用方法:

可以npm i vconsole 也可以直接用线上的,这里就介绍线上这一种,比较方便

<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.4.1/vconsole.min.js"></script>
<script> // init vConsole var vConsole = new VConsole(); console.log('Hello world'); </script>

把以上地址及vconsole初始化的代码赋值到public/index.html下即可,此时项目底部就会多一个控制台,注意项目上线时,要把代码注释掉

2.手机抓包

当项目已经上线,偶然出现了响应bug,此时再通过加v-console就比较麻烦,而且控制台是不能给用户看到的,这个时候,bug复现时该怎么快速锁定是哪个请求出了问题? 这个时候手机抓包就可以满足我们的需求

ios手机自己的商店直接可以下载—Stream抓包工具,是免费的,使用方法就是点击开始抓包,然后到自己要抓包的应用中,去发请求,此时所有请求都会捕捉到抓包历史中,在里面可以看到请求体,以及相应内容,从而判断接口是否有问题

安卓手机就需要自己找资源了,以下是小黄鸟的下载地址:www.lanzoui.com/b0dwc60yd

激活成功教程绿色版本,在没开启root安装证书的情况下,无法捕获ssl数据包,但用于我们自己的项目已经够用了,大部分网站都是可以抓取到的.

使用方法:在设置里可以配置想要抓取的应用,提高准确性,之后回到主页,点击开始抓包,然后去对应应用发请求即可捕获到,如下方在浏览器中抓获的包

当然更多功能不仅限于此,用虚拟机来免root啊,注入数据啊等等可自行探索