移动端h5（非react-native应用）调试神器vConsole

hzxOnlineOk

于 2019-12-19 15:08:24 发布

阅读量505

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/hzxOnlineOk/article/details/103614765

本文介绍了一种用于移动端调试的工具vConsole.js。它能够实现类似微信小程序的调试效果，无需使用alert弹窗查看控制台信息，提高开发者的工作效率。只需在HTML文件中引入特定JS片段并初始化vConsole，即可在手机上轻松调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

平时web开发时，在手机上，如果是要看控制台信息，都需要alert弹窗，这样很不友好，还会阻拦进程。

通过vConsole.js 重写console方法，实现了类似于微信小程序的移动端调试效果，成功执行后会在右下角出现绿色的按钮，文本是vConsole（请注意，部分接口信息在这里观察不到，比如img的src请求资源）

点击按钮后的效果如下图所示：

具体使用方法也很简单

在index.html 里加入以下js片段

<script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
<script>
    // init vConsole
    var vConsole = new VConsole();
    console.log('Hello world');
</script>