开发 Web 页面时，难免会碰到一些特定机型、特定版本或者是嵌到 App 中才会出现的问题。碰到这类问题时，如果不能使用开发者工具 devtools，这意味着，你只能使用 alert 或者 window.onerror 等手段。
谷歌和苹果分别提供了各自方案，来帮助开发者使用开发者工具 devtools 调试真机或模式器的 Web 页面。这极大的提高了调试效率。本文介绍了苹果提供的在真机和模拟器中使用 devtools 调试方法。
真机调试
一 准备
- 需要一台 Mac。
- 需要一台在测试序列号中的 iPhone 手机。
- hybrid 调试需要 iOS 同学帮忙安装一个测试版的 App。
二 开启 Safari Web 检查器的权限
- 打开设置
- 依次进入 Safari > 高级
- 开启 Web 检查器
[图片上传失败...(image-c3690-1513580163773)]
三 开启显示 Safari 开发菜单
- 打开** Safari **
- 依次点开** Safari 菜单 > 偏好设置 > 高级**
- 开启 在菜单栏中显示“开发”菜单
- 这时就可以在 Safari 的菜单栏中看到 开发 选项了
[图片上传失败...(image-78ffca-1513580163774)]
四 使用 USB 连接 iPhone 和 Mac
五 打开App，进入页面
六 开启页面调试
- 打开 Safari
- 依次点开 ** 开发 > 某某的 Macbook > 具体页面**
[图片上传失败...(image-36c718-1513580163774)]
模拟器中调试
一 准备
- 需要一台 Mac。
- 需要下载 Xcode 和 iOS Simulator。
- hybrid 调试需要一个能在模拟器中安装的 App。
二 打开 Simulator
- 使用快捷键 command + 空格，打开 Spotlight
- 输入 Simulator，并按回车打开。
三 打开App，进入页面
四 开启页面调试
- 打开 Safari
- 依次点开 ** 开发 > Simulator > 具体页面**
注意事项： 必须先打开 Simulator，再打开 Safari。不然 Safari 检查不到 Simulator。
[图片上传失败...(image-cbb3b5-1513580163774)]
