前言

相信许多小伙伴在开发移动端网页时，都会遇到兼容性问题的修改，尤其是当项目运转在真机上时，一些奇奇怪怪的bug接二连三，很是头疼。在Android设备上，咱们可以轻松的在Chrome DevTools上进行调试，但面对iOS设备，在咱们没有Mac电脑的状况下，调试iOS的页面就是困难重重，一般都会选择alert或者是vConsole来调试，但此方法也仅仅检查控制台，却无法检查Dom元素。

RemoteDebug iOS WebKit 适配器

RemoteDebug iOS WebKit适配器是一个协议适配器，iOS上的Safari和WebView可以从VS Code，Chrome DevTools，Mozilla Debugger.html和其他与Chrome调试协议兼容的东西进行调试。

用 RemoteDebug iOS Webkit 在 Chrome DevTools 中调试iOS/iPadOS设备的前端页面

在Medium的介绍博客文章中阅读更多内容：Hello RemoteDebug iOS WebKit适配器：运用Chrome DevTools，VS Code和Mozilla Debugger.html 进行iOS网络调试

原文出处：RemoteDebug iOS WebKit

Windows体系：

所需东西：

windows powershell 5.1及以上版别；
node.js环境；
git环境；
iTunes程序（可在Microsoft Store中装置）或爱思助手；
windows包管理器Scoop。

1. 装置scoop主程序（已装置可忽略此步骤）

1.1 首次装置（非管理员运转）

Win R 翻开运转，输入powershell回车；

# 脚本履行策略更改
Set-ExecutionPolicy RemoteSigned -scope CurrentUser
# 输入 Y 或 A，赞同
# 再履行装置命令
iwr -useb scoop.201704.xyz | iex

1.2 替换scoop镜像库地址

# 替换 scoop 的 repo 地址
scoop config SCOOP_REPO “gitee.com/glsnames/sc…” # 替换后更新一下
scoop update

2. 为scoop增加新bucket

2.1 装置git程序（已装置可忽略）

# 必装git，scoop及bucket更新均依赖此软件
scoop install git

2.2 增加extras库

scoop bucket add extras

2.3 bucket的语法及怎么增加第三方库

# 查询官方已有的bucket
scoop bucket known

# 基本语法
scoop bucket add <库名（别号）> <git地址（增加第三方库时必填）>
# 例如增加scoopcn库
scoop bucket add scoopcn github.com/scoopcn/sco…
# 删去bucket
scoop bucket rm <库名（别号）>

ps：scoop地点目录下不可有对应库名的文件夹，即使是空的也不行，需求先运转scoop bucket rm <库名> 进行删去。

2.4 署理（可选）

ps：即使上面已经将scoop的镜像库替换成国内的了，但装置时依旧会有超时状况发生，可根据需求增加署理

# 增加署理
scoop config proxy 127.0.0.1:[署理端口]
# 移除署理
scoop config rm proxy

3. 装置软件

3.1 装置 ios-webkit-debug-proxy

scoop install ios-webkit-debug-proxy

3.2 装置 vs-libimobile

npminstall-gvs-libimobile

3.3 装置 remotedebug-ios-webkit-adapter

npminstallremotedebug-ios-webkit-adapter-g

4. 调试

ps：调试前，需求将iPhone或iPad经过数据线连接到电脑上，翻开iTunes或爱思助手，并在手机上信赖此电脑。

4.1 运转 remotedebug-ios-webkit-adapter

# 在命令行/终端中运转
remotedebug_ios_webkit_adapter # 默许运转的端口是9000，如需指定端口，可在后边增加端口，例：
remotedebug_ios_webkit_adapter –port=9001

4.2 翻开谷歌/Edge开发者东西

在地址栏里输入 chrome://inspect/#devices 或 edge://inspect/#devices

4.3 装备

4.4 调试

这界面，非常熟悉的味道，不过也有个弊端，我电脑上无法运用console.log和console.error，但可以运用console.info，且无法输出object对象，需求对其进行序列化后输出，至此，整体步骤已结束。

注意事项

可能会呈现抛出过错的地方时：
在装置remotedebug-ios-webkit-adapter时，Windows 11体系会抛出过错，处理方法就是找到电脑全局的npm包管理器装置库的方位，在该方位将remotedebug-ios-webkit-adapter从github上下载下来，编译一次即可（其他的库假如装置有问题，也可以用此方法处理）

用 RemoteDebug iOS Webkit 在 Chrome DevTools 中调试iOS/iPadOS设备的前端页面

前言