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

developerworks 发布于2019-08-22 11:20 / 582人阅读

摘要：谷歌和苹果分别提供了各自方案，来帮助开发者使用开发者工具调试真机或模式器的页面。这极大的提高了调试效率。本文介绍了苹果提供的在真机和模拟器中使用调试方法。真机调试一准备需要一台。需要一台在测试序列号中的手机。

开发 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。

混合云云服务器 ios 真机调试主程序真机调试 linux真机调试 android模拟器service真机

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92221.html

微信小程序真机预览体验测试教程

摘要：此处的，请填写真实有效的，是在微信小程序官网后台拿到的，要不然你是无法在真机是体验测试的。真机上的调试模式微信小程序，在真机的体验真的很棒，对用户而言，好用可用流畅是第一要点。文章首发地址微信小程序真机预览体验测试教程如需转载，请标明说出前言从小程序内测开始，有很多优秀的创意、想法已经在内测阶段开发完成。目前小程序开始公测，开放了小程序的申请和注册，但是还无法正式发布。那么我们在未...

Salamander 2019-08-05 10:21 评论0 收藏0
微信小程序真机预览体验测试教程

摘要：此处的，请填写真实有效的，是在微信小程序官网后台拿到的，要不然你是无法在真机是体验测试的。真机上的调试模式微信小程序，在真机的体验真的很棒，对用户而言，好用可用流畅是第一要点。文章首发地址微信小程序真机预览体验测试教程如需转载，请标明说出前言从小程序内测开始，有很多优秀的创意、想法已经在内测阶段开发完成。目前小程序开始公测，开放了小程序的申请和注册，但是还无法正式发布。那么我们在未...

tianhang 2019-08-20 12:10 评论0 收藏0
React Native在真机运行（IOS）

摘要：真机在线运行打开，项目的目录如果之前在模拟器调试过，换成真机运行的时候务必关闭模拟器需要修改的配置修改为如果上来就运行的话，会报错改完界面处选择修改如下确认目标设备的系统版本一致同样也要确认测试用例项目下的配置打开文件值改为打开文件修改的引真机在线运行打开Xcode，open项目的ios目录；如果之前在模拟器调试过，换成真机运行的时候务必关闭模拟器；需要修改的配置： showI...

jeyhan 2019-08-22 16:22 评论0 收藏0
小技巧|移动端网页调试神器Eruda使用技巧

摘要：做移动端开发的一大痛点就是，在真机运行下无法查看日志和其他信息如网络请求显示本地存储等信息。是一个专为手机网页前端设计的调试面板，类似的迷你版，其主要功能包括捕获日志检查元素状态显示性能指标捕获请求显示本地存储和信息浏览器特性检测等等。 showImg(https://segmentfault.com/img/bVXvig?w=2396&h=1302); 做移动端Web开发的一大痛点就...

xzavier 2019-08-21 17:19 评论0 收藏0
HTML5 plus初步了解

摘要：中国产业联盟中国产业联盟，是工信部下属单位，是为了更好的推进的商用更好的为开发者服务而由产业链厂商共同组成的一个联盟。是会员中国产业联盟发起单位，致力于推进发展，构建生态。问题开发HTML5页面要解决的主要问题之一，就是调用系统的能力，比如拍照／选图／保存图片到相册／录音／录制视频／定位等，而是否能够调用这些能力，在于其运行环境是否开放了这些权限，是否能够便捷地使用，取决于所提供的...

honmaple 2019-08-05 18:02 评论0 收藏0