用proxy改造你的console

前言

在前端平常的开发中,最长使用的调试手段应该就是console大法。console很好用，但有时候打印变量多了，看起来就比较懵。

let name1 = 'kk'; name2 = 'kkk'; name3 = 'kk1k'; name4= 'k1kk';
console.log(name1)
console.log(name2)
console.log(name3)
console.log(name4)

打印如下

那个变量对应那个就比较难分辨。我又不想在写代码来分辨(懒😀)，那个打印对应的变量是多少。

解决方案

方案一，通过ast解析console 将变量名放在console后面，奈何esbuild不支持ast操作(不是我不会哈哈哈哈), 故放弃。

方案二，既然vue能代理对象，那么console是不是也能被代理。

实践

第一步代理console,将原始的console,用全局变量originConsole保存起来，以便后续使用 withLogging 函数拦截console.log 重写log参数

const originConsole = window.console; 
var console = new Proxy(window.console, { 
    get(target, property) { 
    if(property === 'log') { 
        return withLogging(target[property]) 
    } 
    return target[property] }, 
})

遇到问题，js中无法获取获取变量的名称的字符串。就是说无法打印变量名。

解决方案，通过vite中的钩子函数transform，将console.log(name.x) 转化成 console.log(name.x, ['isPlugin', 'name.x'])

      transform(src, id) {
          if(id.includes('src')) { // 只解析src 下的console
              const matchs = src.matchAll(/console.log\((.*)\);?/g);
             [...matchs].forEach((item) => {
                      const [matchStr, args] = item;
                      let replaceMatch = ''
                      const haveSemicolon = matchStr.endsWith(";"); 
                      const sliceIndex = haveSemicolon ? -2 : -1;
                      const temp = matchStr.slice(0,sliceIndex); 
                      const tempArgs = args.split(",").map(item => {
                          if(item.endsWith('"')) {
                              return item
                          }
                          return `"${item}"`
                      }).join(",")
                      replaceMatch = `${temp},['isPlugin',${tempArgs}]);`
                      src = src.replace(matchStr, replaceMatch)
              });
          }
          return {
            code: src,
            id,
          }
      },

这样最终就实现了类型于这样的输出代码

  originConsole.log('name.x=', name.x)

这样也就最终实现了通过变量输出变量名跟变量值的一一对应

最后

我将其写成了一个vite插件，vite-plugin-consoles 感兴趣的可以试试，有bug记得跟我说(●'◡'●)

源码地址： github.com/ALiangTech/…