mac安装ios和Android模拟器进行h5页面调试

IOS模拟器

Xcode下载:https://apps.apple.com/cn/app/xcode/id497799835?mt=12

打开模拟器:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XYVxRQO2-1612420999682)(/Users/mybells/Desktop/%E5%85%AC%E5%8F%B8%E5%89%8D%E7%AB%AF%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%BE%85%E5%AE%8C%E6%88%90%E6%96%87%E6%A1%A3/mac%E5%AE%89%E8%A3%85ios%E5%92%8CAndroid%E6%A8%A1%E6%8B%9F%E5%99%A8.assets/image-20210204141340644.png)]

选择不同IOS模拟器:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D38eyRu5-1612420999687)(/Users/mybells/Desktop/%E5%85%AC%E5%8F%B8%E5%89%8D%E7%AB%AF%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%BE%85%E5%AE%8C%E6%88%90%E6%96%87%E6%A1%A3/mac%E5%AE%89%E8%A3%85ios%E5%92%8CAndroid%E6%A8%A1%E6%8B%9F%E5%99%A8.assets/image-20210204141415323.png)]

Android模拟器

Android Studio下载:https://developer.android.com/studio

打开模拟器:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XQWDcSsS-1612420999692)(/Users/mybells/Desktop/%E5%85%AC%E5%8F%B8%E5%89%8D%E7%AB%AF%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%BE%85%E5%AE%8C%E6%88%90%E6%96%87%E6%A1%A3/mac%E5%AE%89%E8%A3%85ios%E5%92%8CAndroid%E6%A8%A1%E6%8B%9F%E5%99%A8.assets/image-20210204141750698.png)]

选择不同模拟器:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r47JwBVm-1612420999697)(/Users/mybells/Desktop/%E5%85%AC%E5%8F%B8%E5%89%8D%E7%AB%AF%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%BE%85%E5%AE%8C%E6%88%90%E6%96%87%E6%A1%A3/mac%E5%AE%89%E8%A3%85ios%E5%92%8CAndroid%E6%A8%A1%E6%8B%9F%E5%99%A8.assets/image-20210204141851416.png)]

可以查看不同手机型号的屏幕尺寸设置不同的模拟器:https://uiiiuiii.com/screen/

iOS使用xcode模拟器 调试webView/H5页面

模拟器和mac都已按照Safari。

  1. 打开mac自带的Safari -> 偏好设置… -> 高级 -> 勾选在菜单栏显示“开发”菜单。

  2. 在顶部菜单的开发->iPhone,看见对应模拟器上Safari打开的页面,点击展开开发者工具,即可在电脑上调试移动端页面。

具体步骤:https://www.jianshu.com/p/09fc95d20483

Android模拟器进行webView/H5

页面调试

模拟器和电脑都已安装chrome浏览器。

  1. 手机chrome浏览器打开要调试的页面。

  2. 电脑chrome浏览器打开:chrome://inspect/#devices
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4qalXxIY-1612420999698)(/Users/mybells/Desktop/%E5%85%AC%E5%8F%B8%E5%89%8D%E7%AB%AF%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%BE%85%E5%AE%8C%E6%88%90%E6%96%87%E6%A1%A3/mac%E5%AE%89%E8%A3%85ios%E5%92%8CAndroid%E6%A8%A1%E6%8B%9F%E5%99%A8.assets/image-20210204143945404.png)]

  3. 点击对应页面的inspect,打开调试页面。
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zUT1uV5Q-1612420999699)(/Users/mybells/Desktop/%E5%85%AC%E5%8F%B8%E5%89%8D%E7%AB%AF%E6%96%87%E6%A1%A3%E6%95%B4%E7%90%86/%E5%BE%85%E5%AE%8C%E6%88%90%E6%96%87%E6%A1%A3/mac%E5%AE%89%E8%A3%85ios%E5%92%8CAndroid%E6%A8%A1%E6%8B%9F%E5%99%A8.assets/image-20210204144034037.png)]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值