移动端如何使用 vConsole 调试

前言：移动端（如手机、iPad）无法打开控制台像pc端一样使用console.log，使用chrome的inspect 也蛮麻烦的，借助vConsole就会变得很方便。

介绍：vConsole 是一个由微信公众平台前端团队研发的 Web 前端开发者面板，可用于展示 console 日志，方便开发、调试。

使用：VConsole 只是 vConsole 的原型，而非一个已实例化的对象。所以在手动 new 实例化之前，vConsole 不会被插入到网页中。

Release Release 3.1.0 · Tencent/vConsole · GitHub

方法一：使用 npm（推荐）

npm install vconsole -S

方法二：下载源码文件：下载找到dist/vconsole.min.js 这个文件放到项目的static静态资源下面，然后在main.js中import进来。

import VConsole from 'vconsole';  // npm 方式
//import VConsole from '@/static/libs/vconsole.min.js';  //下载源码引入

//开发环境
 if (process.env.VUE_APP_MODE !== 'production') {
   const vConsole = new Vconsole()
 }

// 接下来即可照常使用 `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();

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

可用的 CDN：

• https://unpkg.com/vconsole@latest/dist/vconsole.min.js
• https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js

效果：