iOS 调试:通过 Safari/Chrome 调试 WebView

iOS 调试:通过 Safari/Chrome 调试 WebView

主要汇总通过 Safari 和 Chrome 调试网页的步骤

Safari 调试 WebView

1、真机/模拟器开启 Safari 调试开关

如果需要远程调试iOS Safari,必须启用Web检查功能

  • 设置 -> Safari -> 高级 -> 启动”Web检查“
    Safari 调试 WebView-01

2、Safari 开启调试模式

  • Safari浏览器 -> 偏好设置 -> 高级 -> 勾选“在菜单栏中显示开发菜单”
    Safari 调试 WebView-02

3、开始调试 WebView

  • 将手机通过数据线连接到mac上

  • 打开 Safari 浏览器,运行手机 app 中的 Web 界面

  • Safari -> 开发 中选择连接的手机,并找到调试的网页

    Safari 调试 WebView-03

Chrome 调试 WebView

1、准备工作

  • 安装部署ios-webkit-debug-proxy,在终端中输入
brew install ios-webkit-debug-proxy
  • 启动 proxy,在终端输入以下命令
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

运行结果如下所示


Chrome 调试 WebView-01

2、调试

  • 在 Chrome 中打开 localhost:9221 ,可以看到当前已连接的设备列表
    Chrome 调试 WebView-02
  • 在app中打开Web页面,并在Chrome中点击local进入新页面,并右键转到该连接的页面


    Chrome 调试 WebView-03
  • 最后在Web页面中,右键,选择检查即可
    Chrome 调试 WebView-04

推荐阅读更多精彩内容