iOS:Safari或Chrome调试Webview
2018-03-28 本文已影响392人
Hyelim
一、查看iOS设备上Safari浏览器的页面
1.准备步骤
-
【Mac】使用 Safari 浏览器的“开发”菜单
请选取“Safari 浏览器”>“偏好设置”,点按“高级”,然后选择“在菜单栏中显示开发菜单”。
-
【iPhone】开启调试模式
要远程调试 IOS Safari ,必须启用 Web 检查 功能,打开 iPhone 依次进入 设置 > Safari > 高级 > Web 检查 > 启用。

2.操作步骤
iPhone链接到mac上,打开Safari浏览器,运行手机app里面的web页面,在“开发”菜单中选择连接的手机,找到调试的网页,就能在Safari里面调试了
二、查看XCode Simulator中的页面
1.准备步骤
- Xcode Version9.2

2.操作步骤
-
在Xcode中新建Swift项目“webview”[4]
-
点击运行

-
打开Safari,在“开发”菜单中选择连接的模拟器,找到调试的网页,就能在Safari里面调试了
Safari开发.jpg
Safari调试页面.png
三、查看iOS应用中的页面
1.操作步骤
-
打开XCode,登录AppleID
-
选择项目“General”和“Build Settings”,设置相应的参数[7]

- 连接iPhone,选择相应的真机设备,点击运行按钮,查看iPhone上被安装了相应的App,打开App

- 打开Safari,在“开发”菜单中选择连接的手机,找到调试的网页,就能在Safari里面调试了
四、使用Chrome调试
1.准备步骤
- 安装部署ios-webkit-debug-proxy,在终端中输入
brew install ios-webkit-debug-proxy
2.操作步骤
- 启动 proxy,在终端中输入
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

- 在chrome中打开 localhost:9221 ,可以看到当前已连接的设备列表。

-
点击进去,看到新的页面,按提示右键“复制链接地址”,在新标签页中地址栏中打开,就可以愉快的使用chrome的dev tool来调试webView啦
9222-复制链接.png
Chrome调试页面.png