移动端调试工具vconsole — 在移动端打开控制台

在我们平时项目开发中可以直接打开浏览器控制台，可以通过console.log打印一些我们希望看到的信息，但是在我们开发移动端应用时，往往需要进行真机测试，在手机上我们也希望能够打开控制台查看一些 console.log 打印出来的信息。而这就是本篇文章主要介绍的 vconsole 插件。

在移动端项目中打开控制台有两种方案：

方案一：通过 CDN 地址引入

步骤一：通过 CDN 地址引入 

    <script src="https://cdn.bootcss.com/vConsole/3.2.2/vconsole.min.js"></script>

步骤二：实例化

    <script>  var vConsole = new VConsole();  </script>

步骤三、运行项目查看项目页面中是否出现一个绿色 vConsole 的按钮，点击该按钮便可以打开控制台

方案二：通过npm安装 vconsole 插件

步骤一、通过npm安装 vconsole

    npm install vconsole --save-dev 

步骤二、在项目入口文件中引入：

     import  vconsole  from  'vconsole'

步骤三、实例化 vconsole:  

    var  vConsole  =  new vconsole ()

步骤四、运行项目查看项目页面中是否出现一个绿色 vConsole 的按钮，点击该按钮便可以打开控制台