APP中的调试工具-vConsole使用方法

为什么要使用 vconsole.js ?

因为手机或者平板之类的客户端软件并没有控制台，前端开发想看log日志比较麻烦，如果一直弹窗alert方法实在太挫了。所以引入vconsole.js就和浏览器调试一样。

注意点

vconsole 这个插件源码里面是依赖 html dom api 来实现的，如果你所使用的的环境不支持 dom，与原有的浏览器内核有差异，可能无法使用。一般的 web-view 嵌套网页是可以用的，或者手机浏览器都是OK的。如果是小程序或者第三方软件解析html需要查看一下原理。至于微信小程序为什么有，因为别人就是内置的，自己写适配了自己。

如何使用引入？

提示：官方源代码地址 ： https://github.com/Tencent/vConsole/blob/dev/README_CN.md

1. 使用 cdn 方式引入，这里列举了所有版本的 js 地址，可以随意选择一个版本复制引入。https://www.bootcdn.cn/vConsole/。然后在页面 里面加入初始化代码。举例如下：

<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
<script>
// 初始化
var vConsole = new VConsole();
console.log('Hello world');
</script>

为什么要在head引入，这样能尽量将你所有的的console都打印出来，vconsole原理是只有 new 初始化的时候才会插入dom，并改写监听console方法。

2. 使用 es6 webpack 引入。

npm/cnpm/yarn install vconsole

然后设置个环境变量作为区分线上线下环境，比如：

import VConsole from 'vconsole';
const isDebug = true;
// 本地开发调试注入vConsole
if (isDebug) {
    new VConsole();
}

webpack的配置

npm install -vconsole --save-dev
npm install -vconsele-webpack-plugin --save-dev

webpack.base.conf.js修改示例如下：

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const webpack = require('webpack')
const vueLoaderConfig = require('./vue-loader.conf')
const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入vConstle
 
function resolve(dir) {
  return path.join(__dirname, '..', dir)
}
 
process.env.NODE_ENV = 'production'
 
const argv = require('yargs')
  .describe('debug', 'debug 环境') // use 'webpack --debug'
  .argv;
module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  plugins: [
    new webpack.ProvidePlugin({
      '$': 'jquery',
      'jQuery': 'jquery',
      'window.jQuery': 'jquery'
    }),
    new vConsolePlugin({
      enable: !!argv.debug
    })
  ],
  output: {
    path: config.build.assetsRoot,
    filename: 'bundle.[hash:4].js',
    publicPath: process.env.NODE_ENV === 'production' ?
      config.build.assetsPublicPath : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      echarts$: "echarts/src/echarts.js",
      echarts: "echarts/src",
      zrender$: "zrender/src/zrender.js",
      zrender: "zrender/src"
    }
  },
  module: {
    rules: [{
        test: /\.vue$/,
        loader: 'vue-loader', // 包含了css loader
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}