手机网页调试工具-兼容IOS与安卓

缺乏、安全感 2023-02-22 05:26 41阅读 0赞

## 最近在开发微信公众号网页的时候，由于手机端的各种不适配或者机型的问题出现了很多莫名其妙的bug，但这些bug只会在固定的机型或者部分手机复现，电脑端调试以及大部分手机都是没有问题的。 所以需要在手机上模拟控制台输出日志来查看是否有报错。 ##

**安卓手机解决办法：**

在微信上打开： [https://debugx5.qq.com/?from=singlemessage][https_debugx5.qq.com_from_singlemessage] 出现以下图片

![format_png][]

需要在手机端查看调试的时候，切换到第二个Tab栏

![format_png 1][]

勾选vConsole调试功能即可在手机网页上查看控制台输出

**清理手机网页缓存的方法**

首页下拉到最后面，根据需要勾选需要清除的缓存，点击清除。

![format_png 2][]

**查看调试的方法**

当打开手机网页时网页右下角会出现vConsole按钮，其功能与电脑上的开发者工具类似，算是迷你版的开发者工具。点击按钮就会出现下列界面，此处可以查看日志打印，本地存储等各类信息。

![format_png 3][]

以上就是安卓端手机网页开发时调试的方法。

**ios网页调试的方法**

IOS不支持X5内核所以不能使用上述方法。但是可以直接在html中嵌入vconsole.js

下面为嵌入方法：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Title</title>
    </head>
    <body>
    <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
    <script>
        var vConsole = new VConsole();
    </script>
    </body>
    </html>

具体使用方法与上述安卓的操作类似。

[https_debugx5.qq.com_from_singlemessage]: https://debugx5.qq.com/?from=singlemessage
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC83LzIvMTczMGNmOTc5MmEyZDcyMg?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC83LzIvMTczMGNmYTI0YWZiNTg0Nw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC83LzIvMTczMGNmYmIwYTdmMzZlMQ?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC83LzIvMTczMGNmZDJkMGU1MGQyZg?x-oss-process=image/format,png