在我们平时项目开发中可以直接打开浏览器控制台,可以通过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 的按钮,点击该按钮便可以打开控制台