关于h5页面的几种调试办法

2023年12月5日发(作者：汽车5万以下)

关于h5页面的几种调试办法

调试有两种情况：1、微信外打开的h5页面；2、微信中打开的网页

微信外的网页

1、谷歌浏览器调试安卓

（1）手机USB链接到电脑，打开开发者选项，安卓打开的方式有很多，，iPhone目前还不知道怎么用这个调试

（2）电脑端打开谷歌浏览器输入chrome://inspect#device，记得勾选discover usb devicces 下面会有设备列表

（3）选择设备，在设备的浏览器中打开网页，会弹出是否使用USB调试，统一

（4）点击chrome://inspect/#devices 页面上的inspect便可以审查安卓机上的H5页面的元素了

注：ios的可以用mac的safari调试，没有mac还没有试过这个方法

微信中打开的网页

1、微信web开发工具，，发现最新版本无法进行移动调试，在我们进行微信端开发的时候，微信web开发工具能够调试我们的分享参数和微信相关的配置参数，同时中国工具的移动

端调试也很方便

（1）打开微信开发者工具，查看移动调试（注：设置好代理后，页面会无法打开，需要重启微信，不行的话就重新登录微信账号）

（2）点击开始调试，就能看手机中页面的问题了，我之前遇到过https的资源会加载失败，导致页面有问题，后来发现是微信的web

开发工具不支持HTTPS，所以这个还是要注意下。

（3）微信web开发者工具能访问页面的网络请求，包括手机上的一些请求你能观察到一些网络问题

2、使用vconsole调试

vconsloe是微信开发的一个移动端日志工具，，引入js再跟进demo中的写法，初始化一个vconsole对象，你就能看到你的所有log

了，在手机端的显示如下：

点击vconsole