说在前头
本人是一个小小的前端,目前负责公司里一个APP内嵌H5的项目。做项目的话肯定要测试的,所以在测试web页面的时候我一般都是用安卓的真机配合谷歌浏览器一起测的,因为它比较简单,只需要一根数据线和一部安卓手机即可。但是今天我们讲的不是安卓,而是ios怎么通过谷歌浏览器进行web测试。
为了解决这个ios的测试问题,我找了很多资料,但说句不好听的,“一个能打的都没有”。但是功夫不负有心人,经过我数天的"摸爬滚打",终于计获事足了。接下来就给大伙分享一下!
一、准备工作
- PC chrome浏览器
- IOS safari浏览器
- win系统(win7、win10)
- iTunes
- remotedebug-ios-webkit-adapter
- 一根USB数据线
二、安装依赖ios-webkit-debug-proxy
1.使用win+r,然后输入PowerShell,准备安装scoop
2.输入下面语句:
1. set-executionpolicy remotesigned -scope currentuser #修改执行策略,选择是
2. iex (new-object net.webclient).downloadstring('https://get.scoop.sh') #安装scoop
安装完成:
如果跟上图这样,你就可以使用scoop install 安装需要的资源,下载完成后的资源会在类似 C:\Users\admin\scoop\apps 的位置
scoop 或 scoop help可查看用法和说明:
3.下载失败,一般是上面这种情况的话,我们就可以直接使用了。但是,有的伙伴可能会出现安装失败的情况,如下图:
遇到这种情况不要慌,遇到问题我们就解决问题!
一般你再重新安装的时候,太会显示已存在,但是无法使用。所以我们要先找到它,然后干掉他再重新安装。
上面已经说过了,他在哪里呢?没错,下载完成后的资源会在类似 C:\Users\admin\scoop\apps 的位置,找到他,然后把它改掉,然后再一次打开PowerShell,重新安装scoop,但是这次输入的语句要改一下了就是把第二个语句改一下:
1. set-executionpolicy remotesigned -scope currentuser #修改执行策略,选择是
2.iex (new-object net.webclient).downloadstring('https://raw.githubusercontent.com/lukesampson/scoop/master/bin/install.ps1') #安装scoop
这样就ojbk了,然后输入scoop 或 scoop help,能看到用法和说明,那么你就安装成功了!
三、设置iphone Safart浏览器
设置 > Safart浏览器 > 高级 > 打开Web检查器
如下图:
四、让您的计算机信任您的 iOS 设备。
启动 iTunes 会提示“信任这台计算机”对话框,选择信任即可。
五、启动项目# remotedebug-ios-webkit-adapter
启动之前,我们先写个配置文件。创建一个launch.json的文件,文件配置如下
{
"version": "0.2.0",
"configurations": [
{
"name": "iOS Web",
"type": "chrome",
"request": "attach",
"port": 9000,
"url": "http://localhost:8080/*",
"webRoot": "${workspaceRoot}/src"
}
]
}
然后在项目目录输入命令行安装依赖
npm install
安装完依赖后,我们就可以启动项目啦
npm start
项目启动了,然后我们去到chrome://inspect/#devices,就会看到
然后点击箭头指引那个,把你的端口号添加进去,默认9000,可以自己改自己喜欢的
然后你就成功了