移动开发过程中的 vConsole 调试面板

web端的开发调试可以通过 Ctrl+F12打开控制台进行页面元素（element）、网络请求、localStorage等信息的查询，对于项目的开发非常有力； 而 vConsole是一个轻量、可拓展、针对手机网页的前端开发者调试面板，与web端的console控制台相似，对于移动端开发过程中调试非常有用

一、vConsole的特性：

1、查看 console 日志
2、查看网络请求
3、查看页面 element 结构
4、查看 Cookies、localStorage 和 SessionStorage
5、手动执行 JS 命令行
6、自定义插件

二、安装

方式1、安装：通过script标签直接引入 vConsole包
<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script>


// 方式2：使用npm进行下载，并使用import进行引入（在项目入口文件：main.js文件）
npm install vconsole
import { VConsole } from 'vconsole'

三、简单使用

// 使用方式1：项目入口index.html文件中
<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script>
<script>
    var vConsole = new VConsole();
</script>

// 使用方式2：项目入口文件 main.js文件中
import Vue from 'vue'
import Vconsole from 'vconsole'
const vconsole = new VConsole()

页面会出现一个vConsole按钮，点击按钮可以看到控制面板的信息，效果如下：