前端必须知道的手机调试工具vConsole

在日常业务中我相信大家多多少少都有移动端的项目,移动端的项目需要真机调试的很多东西看不到调试起来也比较麻烦,今天给大家分享一个我认为比较好用的调试第三方库VConsole ,有了这个库咱们就在手机上看控制台了,VConsole有两种引用方式,使用方法也很简单
方法一:在public目录下index.html文件中引入
vconsole.min.js
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>

再到需要查看控制台的页面的created中使用new vConsole 实例

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

接下来咱们就能在页面上看到

方法二:cmd用npm安装VConsole

npm install vconsole

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

复制代码
import VConsole from 'vconsole';
creatrd(){
const vConsole = new VConsole();
// 两种方法取其一
const vConsole = new VConsole({ theme: 'dark' });


// 打印测试
console.log('Hello world');
},
beforeDestroy() {
    vConsole.destroy();// 不需要用到时销毁
},
复制代码

两种方法效果相同,我倾向于第一种方法比较方便

PS:还有注意了,调试完成一定一定一定记得删除

更多vConsole使用教程方法可以去
github:https://github.com/Tencent/vConsole

gitee:https://gitee.com/Tencent/vConsole

posted @   艾码的日常生活  阅读(1685)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
点击右上角即可分享
微信分享提示