天天看點

對console.log的一種封裝

對于一個特别喜歡用console.log來調試代碼的人來說,console.log的一些坑和console.log的詳細用法确實是一件值得深究的事。

先記錄一下console.log的一些坑:

1.對于引用對象,比如Array和Object,列印出來的内容可能是目前在記憶體裡的内容,而不是列印的那個時刻的内容

2.對于一個大型項目而言,如果console.log過多,管理滿屏的console.log是一件很恐怖的事,因為你很可能找不到想要的資訊

針對問題1,如果你還是要用console.log來debug,那麼這是不可避免的。

解決方法1:改變習慣,以後用斷點的方式調試。

解決方法2:使用JSON.stringify把對象變成字元串列印

本文主要針對【問題2】提供了一個解決方案。代碼如下

let consoleVersion = [1000, 1001];

let emptyFunc = function(){}

let _log = function(version){
    if(consoleVersion.includes(version)){
        return console.log;
    }else{
        return emptyFunc;
    }
}
           

使用方式

log(1000)('顯示1');
log(1001)('顯示2');
log(1002)('不會顯示1');
log(1003)('不會顯示2');
           

原理是通過consoleVersion數組管理列印的内容,比如今天我需要調試登入子產品

我們記錄登入子產品的console.log的調試内容為1001,那麼所有的登入子產品的列印都使用這樣的方式列印

log(1001)('登入子產品調試1');
log(1001)('登入子產品調試2');
log(1001)('登入子產品調試3');
log(1001)('登入子產品調試4');
log(1002)('其他子產品調試1');
           

然後設定

consoleVersion = [1001];
           

這樣隻會列印:

登入子產品調試1

登入子產品調試2

登入子產品調試3

登入子產品調試4

不會列印其他内容