(1)ios 调试 H5页面

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了(1)ios 调试 H5页面相关的知识,希望对你有一定的参考价值。

参考技术A 我们使用safari 浏览器 + ios手机的方式进行页面调试。

打开safari浏览器,并使其处于窗口的最上层。点击顶部工具条的 “Safari浏览器” 选项,选择偏好设置,然后选择高级选项,在弹出框底部勾选 “在菜单栏中显示‘开发’菜单”。

打开手机的设置 - Safari浏览器 - 高级 - 打开网页检查器

手机连接电脑有三个注意点:

1、手机和电脑需要连接在同一个网络中

2、手机用数据线连上电脑

3、如果是vue项目,需要修改一定的配置再启动项目:

原先的配置是localhost,我们需要将其改成电脑的IP,这样手机才能正常访问。

完成以上操作以后,就可以用手机浏览器打开相应的网页,然后在电脑端的 “开发” 选项中就能看到连接的手机,打开网页检查器,这样就能调试H5页面了。

iOS13调试Safari和WKWebView中的页面

参考技术A 新版系统想要通过连数据线直接调试Safari或者App中的Web页面遇到了困难,在Mac上的Safari “开发” 菜单中无法识别到手机。

经过尝试,还是有方法使得 “开发” 菜单中显示当前连接的手机的。步骤如下:

此时 Mac Safari 的 “开发” 菜单中就已经能识别该手机,并且可以开始调试相关页面了。
此方法需要注意,数据线必须保持连接着手机,否则调试会中断。

以上是关于(1)ios 调试 H5页面的主要内容,如果未能解决你的问题,请参考以下文章

调试ios android 手机 上的 H5页面

iOS之Safari调试H5页面

为啥用谷歌调试的h5页面放到安卓上不一样

如何在手机上调试h5

(2)Android 调试 H5页面

h5页面苹果端浮动问题