移动端调试神器vConsole

安装

在项目中引用插件

npm install vconsole

使用 CDN 直接插入到 HTML

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

浏览器地址栏注入代码

javascript:(function () { var script = document.createElement('script'); script.src="//unpkg.com/vconsole@latest/dist/vconsole.min.js"; document.body.appendChild(script); script.onload = function () { var vConsole = new window.VConsole(); } })();

使用

// 全局使用
// main.js
import Vconsole from 'vconsole'
let vConsole = new Vconsole()

工程化

调试工具我们肯定是希望他在PC端不出现，在生产环境不出现。所以我们可以根据对应的启动环境去做一些工作

// 判断是否是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中也会有一些特定的方法，常见的方法如下

vConsole.show()--显示 vConsole 主面板
vConsole.hide()--隐藏 vConsole 主面板
vConsole.showSwitch()-- 显示 vConsole 的开关按钮。（vConsole的按钮）
vConsole.hideSwitch()-- 隐藏 vConsole 的开关按钮。
vConsole.destroy()-- 将 vConsole 面板从页面中移除。