iOS：Safari或Chrome调试Webview

一、查看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里面调试了

三、查看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

终端启动proxy.png

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

image

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

9222-复制链接.png

Chrome调试页面.png

作者：Hyelim
链接：https://www.jianshu.com/p/e4e3dedfe36b
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。