【移动端】 移动端调试指南🧭

1,117 阅读1分钟

目前浏览器的开发者工具都提供了移动设备的调试功能,可以自行选择合适的设备进行移动端的页面开发,但是由于 PC和其他设备的环境始终存在差别,浏览器自带的移动开发工具已无法满足后期的调试工作。

安卓

调试网页

Chrome inspect

  1. 开启usb调试选项 在开发人员选项中勾选 USB 调试以开启 usb 调试模式。

image.png

  1. 数据线连接手机和电脑

弹出usb连接方式,选择传输文件

  1. 使用Chrome调试 打开 chrome 浏览器,地址栏输入 chrome://inspect#devices进入设备检测页面。此时会显示你的手机和相关 Web 页面,点击 inspect 按钮开始调试。

自动打开的新tab页可能会出现白屏,需要科学🔬上网:

截屏2022-02-09 下午1.49.16.png

截屏2022-02-09 下午1.49.39.png

浏览器环境只能调试页面,当我们可以想要调试APP的时候,就爱莫能助了,我们可以尝试通过以下的方法来实现:

调试debug包

IOS

调试网页

Mac+Safari

  1. Safari浏览器设置:偏好设置 - 高级 - 勾选「在菜单栏中显示开发」菜单。

截屏2022-02-09 下午1.53.52.png 2. iphone 设置:设置 - Safari - 高级 - 打开 Web 检查器。

48E62323E3FF668E289730FB2358831E.jpg 3. 数据线连接手机和电脑

  1. 通过手机Safari 来打开 H5 页面,我们通过浏览器开发选项可以看到:

截屏2022-02-09 下午1.57.29.png

截屏2022-02-09 下午1.59.36.png

4C42687BC6EAFE430AFF46FA21FAF6D7.jpg

浏览器环境只能调试页面,当我们可以想要调试APP的时候,就爱莫能助了,我们可以尝试通过以下的方法来实现:

调试debug包