2019-06-01

vConsole调试console

介绍

因为最近一直在弄移动端项目，由于在移动端无法打开控制台，所以想办法打印调试console的数据一直苦恼。之前用的是chrome的inspect调试，但是只能使用移动版的chrome查看数据，兼容不好，所以最近使用了vConsole 进行调试

具体描述介绍啥的见github

使用

npm install vconsole
使用webpack，然后js代码中

1 2	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();
</script>

效果

页面效果

avatar

点击后

avatar

对应的webpack-plugin vconsole-webpack-plugin

安装

npm install vconsole-webpack-plugin –save-dev

如何使用

// 引入插件
var vConsolePlugin = require('vconsole-webpack-plugin');
module.exports = {
  ...
  plugins: [
      new vConsolePlugin({
          filter: [],  // 需要过滤的入口文件
          enable: true // 发布代码前记得改回 false
      }),
      ...
  ]
  ...
}