js日誌輸出還是隻會console.log麼，那你就out了

字母哥部落格發表於2020-10-10
JS

幾乎所有的javascript開發者最常使用的日誌列印除錯api都是console.log(),其實還有很多的選項供我們選擇，筆者下面就為大家一一介紹.

一、console.table()

console.table()是我非常建議大家去使用的方法，它可以接受JSON或陣列並以表格格式列印，在對json物件和陣列進行視覺化列印的時候簡單易用，結果直觀。

比如下面的json資料物件使用console.table()列印

    console.table({
    "id":"1",
    "key":"value",
    "count":2
    });

控制檯的輸出結果如下：

又比如對下面程式碼中的陣列進行列印：

 console.table([
    {
        id: "1",
        key: "value",
        count: 2,
        },
     {
         id: "2",
         key: "value2",
             count: 22,
       },
       {
            id: "3",
            key: "value3",
                count: 5,
               },
     ]);

控制檯的輸出結果如下：

二、console.error()

console.error()相對於console.log()更有助於在除錯時從輸出日誌中區分錯誤資訊

從上圖中可以看到，它的輸出列印結果是紅色的。

三、Time(time,timeLog,timeEnd)

console.time()、console.timeLog()、console.timeEnd() 這三個方法當我們對程式執行時間進行計時的時候特別有用。

參考下圖理解這三個方法

  • console.time()相當於秒錶中的開始按鈕
  • console.timeLog()相當於秒錶中的按圈計時/按點計時
  • console.timeEnd()相當於計時結束
console.time("ForLoop");  
 // "ForLoop" is label here
for (let i = 0; i < 5; i++) {
    console.timeLog('ForLoop'); 
}
console.timeEnd("ForLoop");

控制檯列印輸出結果

四、console.warn()

用黃色字型輸出日誌，更直觀的方便的檢視警告類日誌資訊。

五、console.assert()

console.assert(assert_statement,message)用來設定斷言，如果為false則顯示message訊息

if(3!=2){
    console.error({ msg1: "msg1", msg2: "msg2" });
}
//上面的日誌判斷語句，可以簡寫為下面的斷言
console.assert(3 === 2, { msg1: "msg1", msg2: "msg2" });

另一種可以用來格式化輸出的斷言方式console.assert(assert_statement,message,args)

console.assert(false, "%d nd type for  %s ",2,"console.assert() method");

六、console.count()

console.count()特別適合用來計數，可以傳遞引數，可以根據根據引數標籤統計次數。程式碼如下：

 for (let i = 0; i < 3; i++) {
   console.count("label");
   console.count();
   console.count(i);
 }

控制檯列印輸出的結果，類似於下面這樣

 console.count()  console.count("label")   console.count(i)
 default: 1                label: 1                0: 1
 default: 2                label: 2                1: 1
 default: 3                label: 3                2: 1
  • console.count()如果不傳遞引數，則使用預設的default標籤。
  • console.countReset(標籤引數)可以將指定標籤的計數重置為0

歡迎關注我的部落格，裡面有很多精品合集

  • 本文轉載註明出處（必須帶連線，不能只轉文字）：字母哥部落格。

覺得對您有幫助的話，幫我點贊、分享！您的支援是我不竭的創作動力！ 。另外，筆者最近一段時間輸出瞭如下的精品內容，期待您的關注。

相關文章