移动端调试神器vConsole使用详解

最新推荐文章于 2024-07-23 21:45:00 发布

搬砖的小宝

最新推荐文章于 2024-07-23 21:45:00 发布

阅读量1.2k

点赞数 18

分类专栏：前端开发神器文章标签： vue.js vscode javascript

本文链接：https://blog.csdn.net/m0_57462721/article/details/138899258

版权

前端开发神器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用。

方法一：使用 npm

$ npm install vconsole

页面使用：

import VConsole from 'vconsole';

const vConsole = new VConsole();
// 或者使用配置参数来初始化
const vConsole = new VConsole({ theme: 'dark' });

// 接下来即可照常使用 `console` 等方法
console.log('Hello world');

// 结束调试后，可移除掉
vConsole.destroy();

方法二：使用 CDN 直接插入到 HTML

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole 默认会挂载到 `window.VConsole` 上
  var vConsole = new window.VConsole();
</script>

用法参考

// 判断是否是pc设备
const isPc = () => {
    const userAgentInfo = navigator.userAgent;
    const Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"];
    let flag = true;
    for (let v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}
 
//如果不是生产环境并且不是pc设备那么就显示调试
if (process.env.NODE_ENV != "prod" && !isPc()) {
    console.log(process.env.NODE_ENV);
    const vConsole = new VConsole();
}

更多用法查看: vconsole官方文档