背景

最近在幫助團(tuán)隊(duì)中一位前端開發(fā)定位問(wèn)題時(shí)，發(fā)現(xiàn)他是通過(guò)控制臺(tái)的打印，也就是console.log去打印，然后通過(guò)打印的東西，去看是否達(dá)到預(yù)期的結(jié)果，比如他在Login/Index.vue中寫了這么一段代碼：8uJ28資訊網(wǎng)——每日最新資訊28at.com

let name = null// ...coding 對(duì)name進(jìn)行處理// 最后輸出 nameconsole.log('我是Index.vue', name)

這個(gè)時(shí)候肯定是馬上打開網(wǎng)頁(yè)，查看控制臺(tái)，看看 name 這個(gè)變量的值是否達(dá)到預(yù)期，但是一看控制臺(tái)，懵逼了（下面是例子，但是真實(shí)項(xiàng)目中超級(jí)多的打印）8uJ28資訊網(wǎng)——每日最新資訊28at.com

圖片8uJ28資訊網(wǎng)——每日最新資訊28at.com

為什么懵逼呢？因?yàn)轫?xiàng)目中很多個(gè)文件都是這么打印的。。。這時(shí)候就出現(xiàn)兩個(gè)問(wèn)題了：8uJ28資訊網(wǎng)——每日最新資訊28at.com

• 1、很多個(gè)文件都命名為Index.vue怎么知道哪個(gè)打印是我想看的那個(gè)？
• 2、我打印的是 name，怎么確定哪個(gè)打印的是name呢？

這個(gè)時(shí)候，怎么解決呢？一個(gè)一個(gè)點(diǎn)進(jìn)源碼里看嗎？8uJ28資訊網(wǎng)——每日最新資訊28at.com

圖片8uJ28資訊網(wǎng)——每日最新資訊28at.com

那可太累了，只有兩個(gè)文件還好，如果是十個(gè)，二十個(gè)呢？那不是累死了！！！8uJ28資訊網(wǎng)——每日最新資訊28at.com

所以很多人第一選擇肯定是回去改代碼，讓代碼更加準(zhǔn)確地表達(dá)8uJ28資訊網(wǎng)——每日最新資訊28at.com

let name = null// ...coding 對(duì)name進(jìn)行處理// 最后輸出 nameconsole.log('我是/Login/Index.vue',             `name = ${name}`)

這時(shí)候我們就可以準(zhǔn)確地看到我們想看到的那個(gè)文件的輸出8uJ28資訊網(wǎng)——每日最新資訊28at.com

圖片8uJ28資訊網(wǎng)——每日最新資訊28at.com

思考

考慮到現(xiàn)在項(xiàng)目中已經(jīng)有很多這樣的console.log了，且因?yàn)橐郧暗娜瞬蛔⒁猓瑢?dǎo)致了輸出的東西表達(dá)的意義不是很明確，所以代碼的可維護(hù)性大大降低8uJ28資訊網(wǎng)——每日最新資訊28at.com

console.log其實(shí)也是開發(fā)階段很重要的一部分8uJ28資訊網(wǎng)——每日最新資訊28at.com

剛剛在 Login/Index.vue 那個(gè)例子中，我們最后是通過(guò)修改輸出，進(jìn)而準(zhǔn)確地看到我們想看的文件輸出，但是這樣還是得人為去改，我們能不能做到自動(dòng)呢？比如有兩個(gè)Index.vue8uJ28資訊網(wǎng)——每日最新資訊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)

我希望是控制臺(tái)能自動(dòng)輸出這樣：8uJ28資訊網(wǎng)——每日最新資訊28at.com

圖片8uJ28資訊網(wǎng)——每日最新資訊28at.com

這樣能通過(guò)文件路徑看到具體是哪一個(gè)文件輸出的信息，并且都能看到每一個(gè)輸出值所對(duì)應(yīng)的變量名8uJ28資訊網(wǎng)——每日最新資訊28at.com

所以我開發(fā)了兩個(gè)插件來(lái)實(shí)現(xiàn)這個(gè)功能（非常感謝暴走老七大佬，我好多代碼都是學(xué)他的~）8uJ28資訊網(wǎng)——每日最新資訊28at.com

• vite-perfect-console-plugin： 適用于 vite 項(xiàng)目
• babel-plugin-perfect-console： 適用于 webpack 項(xiàng)目

源碼鏈接： https://github.com/sanxin-lin/clear-console-plugins8uJ28資訊網(wǎng)——每日最新資訊28at.com

使用方法很簡(jiǎn)單8uJ28資訊網(wǎng)——每日最新資訊28at.com

// vite 項(xiàng)目npm i vite-perfect-console-plugin// vite.config.tsimport VitePerfectConsolePlugin from 'vite-perfect-console-plugin'defineConfig({  plugins: [    //...plugins    // tip 默認(rèn)是  
                
本文鏈接：http://m.www897cc.com/showinfo-26-83639-0.html改造 console.log！也能提高團(tuán)隊(duì)開發(fā)效率？
                
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
                
上一篇： 聊聊 RabbitMQ 中的死信隊(duì)列
                
下一篇： 首屏?xí)r間，你說(shuō)你優(yōu)化了，那你倒是計(jì)算出來(lái)給我看啊！