改造 console.log！也能提高团队开发效率？

背景

最近在帮助团队中一位前端开发定位问题时，发现他是通过控制台的打印，也就是console.log去打印，然后通过打印的东西，去看是否达到预期的结果，比如他在Login/Index.vue中写了这么一段代码：S2428资讯网——每日最新资讯28at.com

let name = null// ...coding 对name进行处理// 最后输出 nameconsole.log('我是Index.vue', name)

这个时候肯定是马上打开网页，查看控制台，看看 name 这个变量的值是否达到预期，但是一看控制台，懵逼了（下面是例子，但是真实项目中超级多的打印）S2428资讯网——每日最新资讯28at.com

图片S2428资讯网——每日最新资讯28at.com

为什么懵逼呢？因为项目中很多个文件都是这么打印的。。。这时候就出现两个问题了：S2428资讯网——每日最新资讯28at.com

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

这个时候，怎么解决呢？一个一个点进源码里看吗？S2428资讯网——每日最新资讯28at.com

图片S2428资讯网——每日最新资讯28at.com

那可太累了，只有两个文件还好，如果是十个，二十个呢？那不是累死了！！！S2428资讯网——每日最新资讯28at.com

所以很多人第一选择肯定是回去改代码，让代码更加准确地表达S2428资讯网——每日最新资讯28at.com

let name = null// ...coding 对name进行处理// 最后输出 nameconsole.log('我是/Login/Index.vue',             `name = ${name}`)

这时候我们就可以准确地看到我们想看到的那个文件的输出S2428资讯网——每日最新资讯28at.com

图片S2428资讯网——每日最新资讯28at.com

思考

考虑到现在项目中已经有很多这样的console.log了，且因为以前的人不注意，导致了输出的东西表达的意义不是很明确，所以代码的可维护性大大降低S2428资讯网——每日最新资讯28at.com

console.log其实也是开发阶段很重要的一部分S2428资讯网——每日最新资讯28at.com

刚刚在 Login/Index.vue 那个例子中，我们最后是通过修改输出，进而准确地看到我们想看的文件输出，但是这样还是得人为去改，我们能不能做到自动呢？比如有两个Index.vueS2428资讯网——每日最新资讯28at.com

// login/Index.vueconst name = 'sunshine_lin'const age = 20console.log(name, age)// team/Index.vueconst name = 'sunshine_lin'const age = 20const gender = '男'console.log(name, age, gender)

我希望是控制台能自动输出这样：S2428资讯网——每日最新资讯28at.com

图片S2428资讯网——每日最新资讯28at.com

这样能通过文件路径看到具体是哪一个文件输出的信息，并且都能看到每一个输出值所对应的变量名S2428资讯网——每日最新资讯28at.com

所以我开发了两个插件来实现这个功能（非常感谢暴走老七大佬，我好多代码都是学他的~）S2428资讯网——每日最新资讯28at.com

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

源码链接： https://github.com/sanxin-lin/clear-console-pluginsS2428资讯网——每日最新资讯28at.com

使用方法很简单S2428资讯网——每日最新资讯28at.com

// vite 项目npm i vite-perfect-console-plugin// vite.config.tsimport VitePerfectConsolePlugin from 'vite-perfect-console-plugin'defineConfig({  plugins: [    //...plugins    // tip 默认是  
                
本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-83639-0.html改造 console.log！也能提高团队开发效率？
                
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
                
上一篇： 聊聊 RabbitMQ 中的死信队列
                
下一篇： 首屏时间，你说你优化了，那你倒是计算出来给我看啊！