目前浏览器的开发者工具都提供了移动设备的调试功能,可以自行选择合适的设备进行移动端的页面开发,但是由于 PC和其他设备的环境始终存在差别,浏览器自带的移动开发工具已无法满足后期的调试工作。
安卓
调试网页
Chrome inspect
- 开启usb调试选项 在开发人员选项中勾选 USB 调试以开启 usb 调试模式。
- 数据线连接手机和电脑
弹出usb连接方式,选择传输文件
- 使用Chrome调试
打开 chrome 浏览器,地址栏输入
chrome://inspect#devices进入设备检测页面。此时会显示你的手机和相关 Web 页面,点击inspect按钮开始调试。
自动打开的新tab页可能会出现白屏,需要科学🔬上网:
浏览器环境只能调试页面,当我们可以想要调试APP的时候,就爱莫能助了,我们可以尝试通过以下的方法来实现:
调试debug包
IOS
调试网页
Mac+Safari
- Safari浏览器设置:偏好设置 - 高级 - 勾选「在菜单栏中显示开发」菜单。
2. iphone 设置:设置 - Safari - 高级 - 打开 Web 检查器。
3. 数据线连接手机和电脑
- 通过手机Safari 来打开 H5 页面,我们通过浏览器开发选项可以看到:
浏览器环境只能调试页面,当我们可以想要调试APP的时候,就爱莫能助了,我们可以尝试通过以下的方法来实现: