使用 Chrome://inspect 调试 Android 和 IOS 上的浏览器页面

这一篇是调试两种设备上的浏览器页面（不是应用中的 Webview），等我研究明白了怎么调试应用中的 Webview 会再写一篇。

Android

参考：使用Chrome://inspect调试 Android 设备上Webview

注意：

• 调试安卓设备的浏览器页面很简单，按照参考文章操作没有遇到什么问题。
• 可以调试安卓自带浏览器和Chrome。

IOS

参考：

• 使用 ios-webkit-debug-proxy 來 debug iOS 上的 Safari
• 使用Chrome DevTool调试iOS设备的webView
• 使用chrome inspect调试ios safari浏览器和webview中的页面 #50

注意：

• 只可以调试设备自带的Safari浏览器，但是你可以选择调试工具（Safari 或 Chrome）。
• 需要借助两个工具（我的电脑是 Mac，以下操作都是在 Mac 上的，其他操作系统的参考官网）：

1. ios-webkit-debug-proxy 在Safari上调试
2. remotedebug-ios-webkit-adapter 在Chrome或VS Code上调试

整理步骤如下：

1. 在Safari上调试

   • 安装 brew install ios-webkit-debug-proxy

   • 手机上需要开启 设置 -> Safari -> 高级 -> Web 检查器

   • USB 连接电脑和手机，手机上弹出提示选接受

   • 启动 ios_webkit_debug_proxy （如果这一步出现错误提示，往下滑）
     

   • 用手机的 Safari 浏览器打开 youtube（不要让手机黑屏）

   • 打开电脑的 Safari 浏览器 -> 开发 -> 你的手机名称 -> m.youtubi.com
     

   • 点击之后可以看到如下网页检查器，用检查器选择元素可以看到手机上有相应的蓝色蒙层
     
     第 6 步也可以直接在浏览器地址栏输入 localhost:9221 进行调试，这个端口和上面启动命令的端口要一致。
     
     运行启动命令 ios_webkit_debug_proxy 的时候可能会报如下错误，按照这个方法解决下 ERROR: Could not connect to lockdownd, error code -X或在 issue 里搜一下错误。

     报错：Listing devices on :9221 Could not connect to lockdownd, error code -XX. Exiting. Unable to attach xxx inspector

2. 在Chrome或VS Code上调试

   • 安装 remotedebug-ios-webkit-adapter 之前先要安装 ios-webkit-debug-proxy 和 libimobiledevice

     brew update
     brew unlink libimobiledevice ios-webkit-debug-proxy usbmuxd
     brew uninstall --force libimobiledevice ios-webkit-debug-proxy usbmuxd
     brew install --HEAD usbmuxd
     brew install --HEAD libimobiledevice
     brew install --HEAD ios-webkit-debug-proxy
     

   • 安装 npm install remotedebug-ios-webkit-adapter -g
   • 手机同样需要开启 Web 检查器，USB 连接电脑
   • 启动 remotedebug_ios_webkit_adapter 或 remotedebug_ios_webkit_adapter --port=9000（默认是9000端口，你也可以自己指定端口）
     
     上图中的 error 提示的是设备版本不匹配，正常是没有的额，但这个不影响调试。
   • 谷歌浏览器打开 chrome://inspect/#devices -> Configure -> 配置上一步指定的端口 localhost:9000 -> Done
     
   • 配置完成之后就可以看到我们手机中打开的页面了，点 inspect 就可以进行调试了
     
     

以上。