当你在工作中是否遇到过下面的情况：
【1】修改代码，想真机看效果但又不想一版一版的发布？
【2】测试手机没微信，H5链接很长想真机看效果却又懒得下载微信再复制粘贴链接到浏览器？
【3】想让APP内嵌H5页面的效果在Web上面就像在内嵌在app里面一样显示出来？
###########下面是解决方案############
【1】问题的解决方案：使用Charles软件做代理
（1）保证手机和电脑在同一个无线网上面
（2）mac使用SwitchHost修改host,windows自行百度下修改host的方法
image.png
（3）使用Charles软件做代理
（3.1）获取PC的IP地址和端口
在Charles菜单栏 -> Help -> Local IP Address中可以查看PC的IP地址。
一般Charles端口是默认的8888，可以从Charles菜单栏 -> Proxy -> Proxy Settings查看
image.jpeg
（3.2）配置iPhone代理
设置 -> 无线局域网 -> 局域网信息(i) -> 配置代理 -> 手动
image.png
（3.3）iPhone代理配置完成后，Charles会弹出连接提示框，点击Allow之后即可使用Charles对从该iPhone发出的请求进行抓包了随便走一个web就可以走http的抓包了也就是代理连接成功了
image.jpeg
（4）启动项目npm run dev 多次更改代码，不用发布/发版即可真机调试
【2】问题的解决步骤：
（1）浏览器安装草料浏览器插件——二维码生成和解码
点我官方教程指路
（2）找到你项目的链接
image.png
（3）安卓手机和苹果手机自带的扫码功能
苹果：下拉找到二维码图标
image.png
安卓：相机-更多-扫一扫
image.png
扫描草料生成的二维码即可
【3】问题的解决方案：设置谷歌浏览器的UA
什么是User-Agent
User-Agent是Http协议中的一部分，属于头域的组成部分，User Agent也简称UA。用较为普通的一点来说，是一种向访问网站提供你所使用的浏览器类型、操作系统及版本、CPU 类型、浏览器渲染引擎、浏览器语言、浏览器插件等信息的标识。UA字符串在每次浏览器 HTTP 请求时发送到服务器！
浏览器UA 字串的标准格式为： 浏览器标识 (操作系统标识; 加密等级标识; 浏览器语言) 渲染引擎标识 版本信息
(1)点击编辑
image.png
(2)新增一个APP环境
image.png
(3)上图填入对应抓包工具User-Agent是Http协议中的一部分抓到的app的User-Agent保存即可
image.png
网友评论