改造 console.log！！!让打印一目了然

1.背景

近期在开发项目中遇到了一个问题，前端定位问题是通过console.log来定位问题的 然后通过打印的东西，去看是否达到预期的结果：比如这段打印

就会发现出现很多打印，因为项目中很多个文件都是这么打印的。。。这时候就出现两个问题了：

• 很多个文件都命名为Index.vue怎么知道哪个打印是我想看的那个？
• 我打印的是 name，怎么确定哪个打印的是name呢？

这时候怎么高效的解决呢？难道一个一个的点进源码里看吗？

其实我们可以使用个插件，很明确的看出来我们在那个文件写的打印。

2.实现(插件)

• vite-perfect-console-plugin： 适用于 vite 项目

• babel-plugin-perfect-console： 适用于 webpack 项目

使用方法很简单

// vite 项目
npm i vite-perfect-console-plugin
// vite.config.ts
import VitePerfectConsolePlugin from 'vite-perfect-console-plugin'

defineConfig({
  plugins: [
    //...plugins
    // tip 默认是 🐷🐷🐷🐷🐷🐷
    VitePerfectConsolePlugin({ tip: '🐷🐷🐷🐷🐷🐷' }),
  ],
})

// webpack 项目
npm i babel-plugin-perfect-console
// babel.config.js
module.exports = {
  plugins: [
    // ...plugins
    [
      'perfect-console',
      // tip 默认是 🐷🐷🐷🐷🐷🐷
      {
        tip: '🐷🐷🐷🐷🐷🐷',
      },
    ],
  ],
}

添加完之后我们重新运行然后再控制台看出来

这样能通过文件路径看到具体是哪一个文件输出的信息，并且都能看到每一个输出值所对应的变量名

3.再见