通过Edge开发工具在iPhone真机Safari中调试网页

有关响应式布局的问题，虽然 edge 开发者工具可以提供各种尺寸来模拟，但是我的背景图片模拟的时候是正常的，到手机上就是不正常，实在是找不出问题，不得不真机进行调试。

win10 端安装相关工具

我的电脑端早就安装了scroop和nodejs，所以安装起来很简单。

[note type=”warning flat”]需要以管理员方式打开终端才能正常使用 npm。[/note]

scoop install ios-webkit-debug-proxy
npm install vs-libimobile -g
npm install remotedebug-ios-webkit-adapter -g

准备好 iPhone

1. 将 iPhone 通过数据线连接到电脑，打开爱思助手或者iTunes（如果有什么问题，就全部都打开），信任此电脑。
2. 进入 iPhone->设置->safari 浏览器->高级，将网页检查器和JavaScript打开。

开始调试

• 终端开启调试监听端口9222。网上教程都是用的默认端口是9000，一直报错，最后在Github的一篇issue找到解决办法，改用9222端口即可。

# 找到你的node安装路径
cd E:/NODE/node_global
remotedebug_ios_webkit_adapter --port=9222

• edge浏览器进入edge://inspect/#devices，理论上来讲要输入localhost:9222连接一下，但是我的连接不上。iPhone 直接在safari浏览网页，下面就出现了，inspect进去就可以调试啦。

依旧存在的问题

现在能进入调试界面，但是只能查看元素，无法进行一些改动。一改动就报错，导致调试断开。

# remotedebug_ios_webkit_adapter --port=9222
remotedebug-ios-webkit-adapter is listening on port 9222
node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block,
or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#<Object>".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

Node.js v20.11.0