最近在幫助團隊中一位前端開發定位問題時,發現他是通過控制臺的打印,也就是console.log去打印,然后通過打印的東西,去看是否達到預期的結果,比如他在Login/Index.vue中寫了這么一段代碼:
let name = null// ...coding 對name進行處理// 最后輸出 nameconsole.log('我是Index.vue', name)
這個時候肯定是馬上打開網頁,查看控制臺,看看 name 這個變量的值是否達到預期,但是一看控制臺,懵逼了(下面是例子,但是真實項目中超級多的打印)
圖片
為什么懵逼呢?因為項目中很多個文件都是這么打印的。。。這時候就出現兩個問題了:
這個時候,怎么解決呢?一個一個點進源碼里看嗎?
圖片
那可太累了,只有兩個文件還好,如果是十個,二十個呢?那不是累死了!!!
所以很多人第一選擇肯定是回去改代碼,讓代碼更加準確地表達
let name = null// ...coding 對name進行處理// 最后輸出 nameconsole.log('我是/Login/Index.vue', `name = ${name}`)
這時候我們就可以準確地看到我們想看到的那個文件的輸出
圖片
考慮到現在項目中已經有很多這樣的console.log了,且因為以前的人不注意,導致了輸出的東西表達的意義不是很明確,所以代碼的可維護性大大降低
console.log其實也是開發階段很重要的一部分
剛剛在 Login/Index.vue 那個例子中,我們最后是通過修改輸出,進而準確地看到我們想看的文件輸出,但是這樣還是得人為去改,我們能不能做到自動呢?比如有兩個Index.vue
// 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)
我希望是控制臺能自動輸出這樣:
圖片
這樣能通過文件路徑看到具體是哪一個文件輸出的信息,并且都能看到每一個輸出值所對應的變量名
所以我開發了兩個插件來實現這個功能(非常感謝暴走老七大佬,我好多代碼都是學他的~)
源碼鏈接: https://github.com/sanxin-lin/clear-console-plugins
使用方法很簡單
// vite 項目npm i vite-perfect-console-plugin// vite.config.tsimport VitePerfectConsolePlugin from 'vite-perfect-console-plugin'defineConfig({ plugins: [ //...plugins // tip 默認是
本文鏈接:http://www.tebozhan.com/showinfo-26-83639-0.html改造 console.log!也能提高團隊開發效率?
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: 聊聊 RabbitMQ 中的死信隊列