导言:介绍一个方便简单的调试移动端H5的方法(尤其是安卓设备)
相信做移动端H5的小伙伴都经历过这样痛苦的场景,在开发过程中,本地的浏览器以及手中的移动设备均能正常的运行代码,但是到了某些特定机型却无法运行,尤其是打包后的代码,或者说是正式环境,无法使用类似vconsole的debug工具,或者在移动端设备打开devtools进行查看。
这个时候,手机连接电脑也是可以进行debug的。
方法如下:
- 先打开手机的开发者选项的功能(具体手机如何开启可百度)
- 进入开发者选项-打开usb调试功能
- 将手机连接电脑,并打开谷歌浏览器,
chrome://inspect,如果前两步成功的话,会有如下界面:
并且会出现具体的手机设备Remote Target 如我的机型为RMX3366,上面就会展示出当前你手机打开的页面
- 在移动端设备的谷歌浏览器上打开想要调试的页面,然后点击电脑端界
inspect进入调试界面,通常来说,使用谷歌浏览器,进入该调试页面,一般都会报404错误,因为这个需要钥匙才能正常运行。
6. 鉴于并不是人人都有
钥匙,国内能用的工具还有另外一个Microsoft Edge,对,就是这个由于IE而导致大家对微软自家浏览器没有好感的浏览器,它的功能其实也非常强大,并且可以在没有钥匙的情况下,正常调试移动端H5页面,操作步骤其实跟上述一致
7. 不过edge浏览器有些许不同,就是首先进入的页面是edge://inspect,然后再在手机端打开谷歌浏览器进入调试页面,同时点击电脑端inspect,进入调试页面
按照1-4的流程操作,会出现如下:
上面会展示相关浏览器打开的相关页面
然后就可以进行调试了!