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

2022-10-28 12:43:51 浏览数 (1)

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

安卓手机解决办法:

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

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

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

清理手机网页缓存的方法

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

查看调试的方法

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

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

ios网页调试的方法

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

下面为嵌入方法:

代码语言:javascript复制
<!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>

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

0 人点赞