在真机和模拟器中使用 devtools 调试(iOS Web版)
开发 Web 页面时,难免会碰到一些特定机型、特定版本或者是嵌到 App 中才会出现的问题。碰到这类问题时,如果不能使用开发者工具 devtools,这意味着,你只能使用 alert 或者 window.onerror 等手段。
谷歌和苹果分别提供了各自方案,来帮助开发者使用开发者工具 devtools 调试真机或模式器的 Web 页面。这极大的提高了调试效率。本文介绍了苹果提供的在真机和模拟器中使用 devtools 调试方法。
真机调试
一 准备
- 需要一台 Mac。
- 需要一台在测试序列号中的 iPhone 手机。
- hybrid 调试需要 iOS 同学帮忙安装一个测试版的 App。
二 开启 Safari Web 检查器的权限
- 打开设置
- 依次进入 Safari > 高级
- 开启 Web 检查器
三 开启显示 Safari 开发菜单
- 打开 Safari
- 依次点开 Safari 菜单 > 偏好设置 > 高级
- 开启 在菜单栏中显示“开发”菜单
- 这时就可以在 Safari 的菜单栏中看到 开发 选项了
四 使用 USB 连接 iPhone 和 Mac
五 打开App,进入页面
六 开启页面调试
- 打开 Safari
- 依次点开 开发 > 某某的 Macbook > 具体页面
模拟器中调试
一 准备
- 需要一台 Mac。
- 需要下载 Xcode 和 iOS Simulator。
- hybrid 调试需要一个能在模拟器中安装的 App。
二 打开 Simulator
- 使用快捷键 command + 空格,打开 Spotlight
- 输入 Simulator,并按回车打开。
三 打开App,进入页面
四 开启页面调试
- 打开 Safari
- 依次点开 开发 > Simulator > 具体页面
注意事项: 必须先打开 Simulator,再打开 Safari。不然 Safari 检查不到 Simulator。
相关推荐
liuweiq 2020-07-08
e度空间 2020-06-11
ZHANGRENXIANG00 2020-06-09
88961137 2020-06-01
marisafari 2020-05-29
jiaguoquan00 2020-05-27
fanhuasijin 2020-04-17
juanjuanwang 2020-03-23
81224450 2020-01-24
xiangxiaojun 2020-01-16
程序员俱乐部 2020-01-11
combine 2015-06-23
baynkbtg 2019-12-23
Safari浏览器 2019-12-14
88961137 2019-12-09
NeptuneSafari 2013-07-17