windows10 chrome 调试 iOS Safari 页面

我们在开发H5 页面时，经常会遇到在chrome 模拟器上运行正常，到了真机上偶尔出现问题的情况。这篇文章介绍在windows10 chrome 调试 iOS Safari 页面方案。特此记录

原理是利用 remotedebug-ios-webkit-adapter插件

利用 scoop 安装插件，后面会涉及到

1、打开 powershell 2、输入命令：

Set-ExecutionPolicy RemoteSigned -scope CurrentUser

此步骤目的是允许当前用户运行来自远程源的脚本 3、下载 scoop 输入命令：

iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

安装成功后提示：验证 scoop 是否安装成功

scoop help

npm install remotedebug-ios-webkit-adapter -g

1、安装 iTunes

调试 iOS 设备基本都是要安装iTunes

下载地址，找一个最新版

2、用USB连接你的 iOS 设备

此处我用的 iPhone，iPad 应该也是可以的

直到你的iTunes 左下角出现连接的设备才算连接完成

3、在你的iOS 设备上开启web 检查 你的iOS 设备->Settings->Safari->高级->网页检查器->开启

4、启动 webkit adapter 插件

remotedebug_ios_webkit_adapter --port=9000

如果提示'scoop install ios-webkit-debug-proxy' ，那么按照提示安装即可。此处就用到了 scoop

scoop install ios-webkit-debug-proxy

如果提示’ Couldn't find manifest for 'ios-webkit-debug-proxy'.’此处是一个bug,可以通过下面的命令解决

scoop bucket add extras

具体解决方案参考这里： https://github.com/lukesampson/scoop-extras/pull/2504

5、设置chrome 调试设备 chrome 地址栏输入地址 chrome://inspect/#devices 如下界面定位到 Devies->点击 Configure 按钮输入 localhost:9000

9000 是刚才启动的端口

这是在你的iOS 设备上 Safari 浏览器打开想要调试的页面。这时chrome 调试设备界面会出现“远程目标”信息

如果没有出现，尝试刷新这个页面

点击“inspect”即可看到iOS 设备界面，剩下的就可以真机调试了

huangshuwei / blog