在真机和模拟器中使用 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 检查器

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

三 开启显示 Safari 开发菜单

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

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

四 使用 USB 连接 iPhone 和 Mac

五 打开App,进入页面

六 开启页面调试

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

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

模拟器中调试

一 准备

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

二 打开 Simulator

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

三 打开App,进入页面

四 开启页面调试

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

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

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

相关推荐