點選上方“中興開發者社群”，關注我們

每天讀一篇一線開發者原創好文

開篇

前端開發人員在編碼過程中，會經常使用console命令取代原始的alert()，將日誌資訊輸出到控制檯中，便於除錯程式碼，跟蹤業務流程。console的命令非常多，功能強大，日誌內容豐富，更不會像alert()那樣阻塞頁面操作。所以非常受歡迎，在程式碼中的使用率非常高。中開社的技術論壇裡也有很多前輩和大牛介紹了其相關用法。

然而世界是繁雜的，正所謂陰中有陽，陽中有陰。console命令給我們帶來便利的同時也帶來一些不容忽視的問題。我們需要站在新的角度去發現和思考。

首先，版本釋出時不一定能及時清理程式碼中的console命令，更不會去刪除那些有特殊需要的日誌列印。其次，console命令雖多，但是很容易過度使用，特別是輸出日誌時不區分級別。最終的結果是版本執行後，瀏覽器控制檯裡面的日誌資訊密密麻麻。等到定位問題時，滿眼白花，無從下手，影響心情，影響效率。相信每位搞前端的小夥伴都有類似的深刻體會。

可怕的是在傳遞給console命令列印輸出的物件是不能被垃圾回收的，因為在程式碼執行之後需要在控制檯中能檢視物件資訊。這有可能造成記憶體洩露。所以最好不要在生產環境中使用console.log方法輸出任何物件。

黎明

在服務端的世界裡，那些精通Java的大哥哥一定知道Log4j，熟悉Nodejs的小姐姐也知道Log4js；而我們這些玩angular的小夥伴們也很想知道有沒有Log4angular這玩意兒？可惜，木有。

不要氣餒，畢竟我們這些玩前端的小夥伴的智慧和想象力是無窮的，在這裡我向大家推薦angular2-logger，它的靈感恰好來自Log4js。它提供了Logger服務，能夠象Log4js一樣通過定義每一條日誌資訊的級別，我們能夠更加細緻地控制日誌的生成過程。並且可以在控制檯動態修改日誌級別或關閉日誌。有了它，媽媽再也不用擔心我加班定位問題了。

曙光

angular2-logger是一個開源的，基於ng2的日誌記錄器模組。

它提供了6個日誌級別：

 Logger服務提供的api方法：

1.安裝方法

 npm install --save angular2-logger

2.配置方法

在app.module中設定provider：

3.在程式碼中使用   

在component或service中注入Logger服務

4.在控制檯中使用

1.檢視當前日誌級別

輸入logger.level 按回車鍵

2.修改當前日誌級別

輸入logger.level=level數值 按回車鍵

後續控制檯只輸出小於等於當前級別的日誌

3.支援儲存當前設定

輸入logger.store() 按回車鍵

重新整理或重新開啟介面，後續控制檯只輸出小於等於上次儲存的級別的日誌。如果要恢復預設的日誌級別，可以清除瀏覽器快取。

4.不儲存當前設定（預設）

輸入logger.unstore() 按回車鍵

5.關閉控制檯日誌功能

輸入logger.level=0 按回車鍵

5.分享OES拓撲團隊的使用方法

在environment.prod.ts配置WARN級別

在environment.ts配置日誌LOG級別

在app.module中設定provider

這樣OES拓撲客戶端的日誌在開發環境下預設是LOG級別，在生產環境下預設是WARN級別，所以版本打包部署後，在環境中執行時預設只看到ERROR和WARN級別的日誌。

道家講究法於陰陽，和於術數。我覺得不管做什麼事，最重要的是把握一個度。通過使用angular2-logger，客戶端日誌在合理的控制下，瀏覽器控制檯一下子變得非常清爽。如果定位問題時，需要看到更加詳盡的日誌，可以隨時在瀏覽器控制檯動態修改日誌級別。由於設定了store為true，瀏覽器自動儲存使用者設定。

展望未來

雖然目前angular2-logger不能跟大名鼎鼎的Log4j相比。但它是基於ng2框架的，提供了元件化，模組化的設計思想，為我們去擴充套件它，改造它，提供了無限的可能。後續我會為它擴充套件如下的功能，貢獻出來方便大家使用。歡迎感興趣的小夥伴們一起參與。

    1.新增prefixPattern屬性，支援格式化每條訊息的字首。

    2.新增datatimePatten屬性，支援每條訊息帶時間戳，並且可以格式化。

    3.新增url屬性，支援將重要的日誌內容通過url配置的介面，post到服務端。

 最後，衷心的感謝大家對我的支援，希望大家多多提出寶貴的意見，幫助我成長。祝大家2018年萬事如意！開工大吉！

拓展閱讀