分享工作中一些工具和心得

当你在工作中是否遇到过下面的情况：

【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