今年入职了一家做直播的公司,主要是负责APP中内嵌webview页面的开发,之前移动端兼容经验比较少,对于我来说最大的困扰就是网页兼容性问题。
在Chrome浏览器的模拟器进行开发调试已经完美完成了需求之后,一到验收或者上线,就出现各种兼容引起的bug,要解决还特别曲折,不仅要探索Android和iOS手机的不同调试方式,还要支持在不同浏览器或者APP上调试,极大的影响了开发的效率。
虽然我们也可以通过模拟器进行开发调试,但模拟终究是模拟,在某些场景下真机还是不可或缺,尤其是特定机型版本的问题。
一般情况下,真机Web调试要怎么做呢?
一、vConsole
npm地址: github.com/Tencent/vCo…
介绍: vConsole插件是一个移动端轻量可扩展的工具,其功能和电脑端的控制台基本一致,能运行JS代码、查看cookie、抓包等
使用: 在head中添加如下代码即可
<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
<script>
// 初始化
var vConsole = new VConsole();
console.log("hello vconsole");
</script>
复制代码
如果是想通过npm安装或者对于TypeScript的使用方式请去仓库查看!
调试:
面板:
其实和console控制台一样,打开一个页面的时候,下方会出现一个绿色的“vConsole”按钮,点击按钮即可打开控制台,在“log”页面中输入JS代码,即可执行脚本,“Network”页面为分析网络会话列表,“System”页面显示协议头User-Agent、系统信息网络状态等信息,“Storage”页面为cookie信息等
二、Eruda
npm地址: github.com/liriliri/er…
介绍: Eruda 是一个专为前端移动端、移动端设计的调试面板,类似Chrome DevTools 的迷你版(没有chrome强大 这个是可以肯定的),其主要功能包括:捕获 console 日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储和 Cookie信息、浏览器特性检测等等。
使用: 在head中添加如下代码即可
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
复制代码
Eruda 的使用方法和面板跟vConsole差不多,更详细的使用方法可去官方仓库查看!
三、Fildder
下载地址: www.telerik.com/fiddler
介绍: Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据,Fiddler无论对开发人员或者测试人员来说,都是非常有用的工具
使用:
1、下载安装并配置好fillder工具
2、手机和fildder链接同一个网络,然后手机开启手动代理并安装证书
a.配置手动代理
b.下载证书
手机浏览器地址输入代理的主机名和端口(10.0,5.155::8888)
c.安装证书
上面步骤完成后然后打开H5页面,如果能在fildder抓到页面资源表示抓包成功
3、然后线上或则测试环境有问题的相关文件或者页面代理到本地调试
AutoResponder不仅可以代理文件,还能代理接口返回等,代理成功后就可以在本地文件中debugger断点一步步调试,找出线上真机出现的问题
四、调试本地Vue项目步骤
1、手机和fildder软件同一个网络
2、手机网络设置手动代理,ip为电脑网络的ipv4地址,端口为fiddler设置的端口默认8080
3、手机浏览器输入代理的地址+端口,安装证书
4、本地项目跑起来,如果是域名访问的,则需要配置hosts
5、手机打开访问的地址就可以debugger调试了
复制代码
本文如有偏颇,欢迎留言指正,若您觉得本文对你有用,不妨点个赞~