js移动端调试神器vConsole

我们知道，微信有自带的浏览器，但是微信浏览器有做了一定的限制，比如在前端开发过程中就不能用微信浏览器进行调试，又因为微信浏览器与其它电脑浏览器有一些细微的区别，所以有些BUG我们无从下手，明明在Edge或Chrome浏览器下面好好的，但是微信中却不行。那么微信浏览器如何调试前端VUE开发呢？

移动端调试神器vConsole

我们需要引到到第三方的调试库vConsole，有了这个库咱们就在手机上看控制台了，VConsole有两种引用方式，使用方法也很简单。

一、html直接引用

方法一：在public目录下index.html文件中引入vconsole.min.js

<script src="/upload/image/20241217/022Q123S-0.jpg"></script>

在index.html代码中加入

<script>
var vConsole = new window.VConsole();
</script>

就可以在微信浏览器中看到 vConsole 按钮，点开就能看到调试信息。也可以到需要查看控制台的页面的created中使用new vConsole 实例

created() {
    var vConsole = new window.VConsole();
    console.log(vConsole);
},
beforeDestroy() {
    vConsole.destroy();// 不需要用到时销毁
}

二、使用npm

npm install vconsole

安装完成直接进入项目引入使用即可。

import VConsole from 'vconsole';
created(){
    const vConsole = new VConsole();
    // 两种方法取其一
    const vConsole = new VConsole({ theme: 'dark' });
    // 打印测试
    console.log('Hello world');
},
beforeDestroy() {
    vConsole.destroy();// 不需要用到时销毁
}