电脑端调试移动端H5页面

1,116 阅读2分钟

导言:介绍一个方便简单的调试移动端H5的方法(尤其是安卓设备)

相信做移动端H5的小伙伴都经历过这样痛苦的场景,在开发过程中,本地的浏览器以及手中的移动设备均能正常的运行代码,但是到了某些特定机型却无法运行,尤其是打包后的代码,或者说是正式环境,无法使用类似vconsole的debug工具,或者在移动端设备打开devtools进行查看。

这个时候,手机连接电脑也是可以进行debug的。

方法如下:

  1. 先打开手机的开发者选项的功能(具体手机如何开启可百度)
  2. 进入开发者选项-打开usb调试功能
  3. 将手机连接电脑,并打开谷歌浏览器,chrome://inspect,如果前两步成功的话,会有如下界面:

a4c4af284e723e0eca2d16687d3bea9.png 并且会出现具体的手机设备Remote Target 如我的机型为RMX3366,上面就会展示出当前你手机打开的页面

  1. 在移动端设备的谷歌浏览器上打开想要调试的页面,然后点击电脑端界inspect进入调试界面,通常来说,使用谷歌浏览器,进入该调试页面,一般都会报404错误,因为这个需要钥匙才能正常运行。

978d237b03c82cc46aa8a4004077c5a.png 6. 鉴于并不是人人都有钥匙,国内能用的工具还有另外一个Microsoft Edge,对,就是这个由于IE而导致大家对微软自家浏览器没有好感的浏览器,它的功能其实也非常强大,并且可以在没有钥匙的情况下,正常调试移动端H5页面,操作步骤其实跟上述一致 7. 不过edge浏览器有些许不同,就是首先进入的页面是edge://inspect,然后再在手机端打开谷歌浏览器进入调试页面,同时点击电脑端inspect,进入调试页面 按照1-4的流程操作,会出现如下:

4e1845e7245c5e97df7e029c21fe6df.png

20f39572cfd6ff65d72191078a0854c.png

上面会展示相关浏览器打开的相关页面

47fbd97c06997bd4514331c09076a16.jpg

然后就可以进行调试了!