生产环境使用vConsole

前言

移动端调试经常使用到vConsole这款插件。

常规的引入操作是：

import VConsole from 'vconsole'
new VConsole()

这种做法只能通过代码人工控制，而且上线前要将代码去掉，防止对生产环境的页面造成污染。

优化

考虑通过一个可修改的参数控制vConsole的显隐，如页面URL链接上的参数。代码如下：

//调试工具，链接上加vconsole=1可见
if (/vconsole=1/.test(location.href)) {
  // 动态加载脚本的方法
  function loadScript(src, callback) {
    let s,
      r,
      t
    r = false
    s = document.createElement('script')
    s.type = 'text/javascript'
    s.src = src
    s.onload = s.onreadystatechange = function () {
      if (!r && (!this.readyState || this.readyState == 'complete')) {
        r = true
        callback()
      }
    }
    t = document.getElementsByTagName('script')[0]
    t.parentNode.insertBefore(s, t)
  }
  
  // 定义console的打印类型，用以实现存储vconsole加载前的打印数据
  const consoleTypes = ['log', 'info', 'warn', 'debug', 'error']
  // 定义一个存储打印信息的数据
  const consoleStore = []
  
  consoleTypes.forEach(type => {
  	const method = console[type]
    // 重写console下的方法，劫持打印的方法类型与参数
    console[item] = function () {
      consoleStore.push({
        type: type,
        params: arguments
      });
      method.apply(console, arguments);
    }
  })
  
  // 引用vconsole链接
  const vconsoleUrl = 'https://unpkg.com/vconsole/dist/vconsole.min.js'
  loadScript(vconsoleUrl, () => {
    new window.VConsole()
    
    // vConsole实例生成后，输出之前的记录信息
    consoleStore.forEach(item => {
    	console[item.type](item.params)
    })
  })
}

总结

URL链接上添加vconsole=1只是一个开启vConsole引入逻辑的暗号。还有其他方式吗？