在真机和模拟器中使用 devtools 调试（iOS Web版）

开发 Web 页面时，难免会碰到一些特定机型、特定版本或者是嵌到 App 中才会出现的问题。碰到这类问题时，如果不能使用开发者工具 devtools，这意味着，你只能使用 alert 或者 window.onerror 等手段。

谷歌和苹果分别提供了各自方案，来帮助开发者使用开发者工具 devtools 调试真机或模式器的 Web 页面。这极大的提高了调试效率。本文介绍了苹果提供的在真机和模拟器中使用 devtools 调试方法。

真机调试

一 准备

1. 需要一台 Mac。
2. 需要一台在测试序列号中的 iPhone 手机。
3. hybrid 调试需要 iOS 同学帮忙安装一个测试版的 App。

二 开启 Safari Web 检查器的权限

1. 打开设置
2. 依次进入 Safari > 高级
3. 开启 Web 检查器

[图片上传失败...(image-c3690-1513580163773)]

三 开启显示 Safari 开发菜单

1. 打开** Safari **
2. 依次点开** Safari 菜单 > 偏好设置 > 高级**
3. 开启 在菜单栏中显示“开发”菜单
4. 这时就可以在 Safari 的菜单栏中看到 开发 选项了

[图片上传失败...(image-78ffca-1513580163774)]

四 使用 USB 连接 iPhone 和 Mac

五 打开App，进入页面

六 开启页面调试

1. 打开 Safari
2. 依次点开 ** 开发 > 某某的 Macbook > 具体页面**

[图片上传失败...(image-36c718-1513580163774)]

模拟器中调试

一 准备

1. 需要一台 Mac。
2. 需要下载 Xcode 和 iOS Simulator。
3. hybrid 调试需要一个能在模拟器中安装的 App。

二 打开 Simulator

1. 使用快捷键 command + 空格，打开 Spotlight
2. 输入 Simulator，并按回车打开。

三 打开App，进入页面

四 开启页面调试

1. 打开 Safari
2. 依次点开 ** 开发 > Simulator > 具体页面**

注意事项： 必须先打开 Simulator，再打开 Safari。不然 Safari 检查不到 Simulator。

[图片上传失败...(image-cbb3b5-1513580163774)]

参考文章：
Debug on iOS Devices and the iOS Simulator