AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

當前位置:首頁 > 科技  > 軟件

改造 console.log!也能提高團隊開發效率?

來源: 責編: 時間:2024-04-15 18:17:02 174觀看
導讀背景最近在幫助團隊中一位前端開發定位問題時,發現他是通過控制臺的打印,也就是console.log去打印,然后通過打印的東西,去看是否達到預期的結果,比如他在Login/Index.vue中寫了這么一段代碼:let name = null// ...coding 對

背景

最近在幫助團隊中一位前端開發定位問題時,發現他是通過控制臺的打印,也就是console.log去打印,然后通過打印的東西,去看是否達到預期的結果,比如他在Login/Index.vue中寫了這么一段代碼:3El28資訊網——每日最新資訊28at.com

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

這個時候肯定是馬上打開網頁,查看控制臺,看看 name 這個變量的值是否達到預期,但是一看控制臺,懵逼了(下面是例子,但是真實項目中超級多的打印)3El28資訊網——每日最新資訊28at.com

圖片圖片3El28資訊網——每日最新資訊28at.com

為什么懵逼呢?因為項目中很多個文件都是這么打印的。。。這時候就出現兩個問題了:3El28資訊網——每日最新資訊28at.com

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

這個時候,怎么解決呢?一個一個點進源碼里看嗎?3El28資訊網——每日最新資訊28at.com

圖片圖片3El28資訊網——每日最新資訊28at.com

那可太累了,只有兩個文件還好,如果是十個,二十個呢?那不是累死了!!!3El28資訊網——每日最新資訊28at.com

所以很多人第一選擇肯定是回去改代碼,讓代碼更加準確地表達3El28資訊網——每日最新資訊28at.com

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

這時候我們就可以準確地看到我們想看到的那個文件的輸出3El28資訊網——每日最新資訊28at.com

圖片圖片3El28資訊網——每日最新資訊28at.com

思考

考慮到現在項目中已經有很多這樣的console.log了,且因為以前的人不注意,導致了輸出的東西表達的意義不是很明確,所以代碼的可維護性大大降低3El28資訊網——每日最新資訊28at.com

console.log其實也是開發階段很重要的一部分3El28資訊網——每日最新資訊28at.com

剛剛在 Login/Index.vue 那個例子中,我們最后是通過修改輸出,進而準確地看到我們想看的文件輸出,但是這樣還是得人為去改,我們能不能做到自動呢?比如有兩個Index.vue3El28資訊網——每日最新資訊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)

我希望是控制臺能自動輸出這樣:3El28資訊網——每日最新資訊28at.com

圖片圖片3El28資訊網——每日最新資訊28at.com

這樣能通過文件路徑看到具體是哪一個文件輸出的信息,并且都能看到每一個輸出值所對應的變量名3El28資訊網——每日最新資訊28at.com

所以我開發了兩個插件來實現這個功能(非常感謝暴走老七大佬,我好多代碼都是學他的~)3El28資訊網——每日最新資訊28at.com

  • vite-perfect-console-plugin: 適用于 vite 項目
  • babel-plugin-perfect-console: 適用于 webpack 項目

源碼鏈接: https://github.com/sanxin-lin/clear-console-plugins3El28資訊網——每日最新資訊28at.com

使用方法很簡單3El28資訊網——每日最新資訊28at.com

// 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 中的死信隊列

下一篇: 首屏時間,你說你優化了,那你倒是計算出來給我看啊!

標簽:
  • 熱門焦點
Top