首页 > 建站教程 > JS、jQ、TS >  vconsole 移动端的调试利器正文

vconsole 移动端的调试利器

在使用mui等做手机端混合APP时，真机调试问题非常的麻烦，之前介绍过《如何使用电脑上的谷歌浏览器来调试安卓手机上的移动端页面》，这个方法很不错，就是初次使用很麻烦，还需要翻墙。今天介绍的这个 vconsole 就很简单，就是引用一个js，模拟电脑端的firebug来实现调试效果，有点类似于很久之前出来的一款专门针对IE6的《IE6的firebug，IE6css调试工具》：

先看下效果：
1、当页面使用了vconsole之后，就会在页面显示一个绿色的按钮：



2、点击这个绿色的按钮，就会打开控制台，里面的功能一应俱全，包括请求接口、打印的log、storage存储、dom节点等等：



使用方法：
1、使用 npm 安装： 
npm install  vconsole
2、使用webpack，然后js代码中: 
import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
let vConsole = new VConsole() // 初始化
    或者找到这个模块下面的 dist/vconsole.min.js ，然后复制到自己的项目中: 
<head>
    <script src="dist/vconsole.min.js"></script>
</head>
<!--建议在 `<head>` 中引入哦~ -->
<script>
  // 初始化
  var vConsole = new VConsole();
  console.log('VConsole is cool');
</script>

TAGS: vconsole