iOS：Safari或Chrome调试Webview

一、查看iOS设备上Safari浏览器的页面

1.准备步骤

• 【Mac】使用 Safari 浏览器的“开发”菜单

  请选取“Safari 浏览器”>“偏好设置”，点按“高级”，然后选择“在菜单栏中显示开发菜单”。

• 【iPhone】开启调试模式

  要远程调试 IOS Safari ，必须启用 Web 检查 功能，打开 iPhone 依次进入 设置 > Safari > 高级 > Web 检查 > 启用。

iPhone设置.jpg

2.操作步骤

iPhone链接到mac上，打开Safari浏览器，运行手机app里面的web页面，在“开发”菜单中选择连接的手机，找到调试的网页，就能在Safari里面调试了

二、查看XCode Simulator中的页面

1.准备步骤

• Xcode Version9.2

image

2.操作步骤

• 在Xcode中新建Swift项目“webview”[4]

• 点击运行

image

• 打开Safari，在“开发”菜单中选择连接的模拟器，找到调试的网页，就能在Safari里面调试了

  
  Safari开发.jpg
  Safari调试页面.png

三、查看iOS应用中的页面

1.操作步骤

• 打开XCode,登录AppleID

• 选择项目“General”和“Build Settings”,设置相应的参数[7]

Xcode参数设置.jpg

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

XCode打包.jpg

• 打开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

参考

1. ios-webkit-debug-proxy
2. XCode下Swift – WebView IOS demo
3. 在Xcode8.0下、手动安装iOS 9.3 的模拟器
4. 通过 Chrome 调试运行在 IOS-safari 上的页面
5. “Could not connect to lockdownd. Exiting.”快速解决方法
6. 您的设备管理设置不允许在此台iPhone上xxx
7. Xcode8真机测试问题 code signing is required for product type 'Application' in SDK 'iOS 10.0'