移动端的H5页面进行调试,safari调试ios端内嵌h5页面(ios-webkit-debug-proxy)

说在前头

本人是一个小小的前端,目前负责公司里一个APP内嵌H5的项目。做项目的话肯定要测试的,所以在测试web页面的时候我一般都是用安卓的真机配合谷歌浏览器一起测的,因为它比较简单,只需要一根数据线和一部安卓手机即可。但是今天我们讲的不是安卓,而是ios怎么通过谷歌浏览器进行web测试。

为了解决这个ios的测试问题,我找了很多资料,但说句不好听的,“一个能打的都没有”。但是功夫不负有心人,经过我数天的"摸爬滚打",终于计获事足了。接下来就给大伙分享一下!

一、准备工作

  1. PC chrome浏览器
  2. IOS safari浏览器
  3. win系统(win7、win10)
  4. iTunes
  5. remotedebug-ios-webkit-adapter
  6. 一根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

安装完成:


1632880433(1).jpg

如果跟上图这样,你就可以使用scoop install 安装需要的资源,下载完成后的资源会在类似 C:\Users\admin\scoop\apps 的位置

scoop 或 scoop help可查看用法和说明:


666.jpg

3.下载失败,一般是上面这种情况的话,我们就可以直接使用了。但是,有的伙伴可能会出现安装失败的情况,如下图:


77.png

遇到这种情况不要慌,遇到问题我们就解决问题!
一般你再重新安装的时候,太会显示已存在,但是无法使用。所以我们要先找到它,然后干掉他再重新安装。
上面已经说过了,他在哪里呢?没错,下载完成后的资源会在类似 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检查器

如下图:

729b8bd52cc82ea91db5dbe8234da18.jpg

四、让您的计算机信任您的 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
9000.jpg

项目启动了,然后我们去到chrome://inspect/#devices,就会看到

1.jpg

然后点击箭头指引那个,把你的端口号添加进去,默认9000,可以自己改自己喜欢的


2.jpg

然后你就成功了


4.jpg

怎么样,是不是很简单,有兴趣的小伙伴赶紧去试试吧,记得点赞哦!❥(^_-)

你可能感兴趣的:(移动端的H5页面进行调试,safari调试ios端内嵌h5页面(ios-webkit-debug-proxy))