JavaScript中的console對象及其方法-學習筆記

1 console對象與浏覽器Console面闆

console

對象是JavaScript的原生對象，而

console

對象的浏覽器實作，已被包含在浏覽器自帶的開發工具當中。如下圖所示，這就是浏覽器的Console面闆，又被稱為控制台。

建議：推薦直接使用ctrl+shift+I或者ctrl+shift+J，像F12容易和電腦的功能鍵沖突，需要輔助Fn鍵才能使用。

控制台的用途主要有以下兩點：

1. 定位錯誤：這裡可以顯示代碼運作時的輸出資訊，代碼運作發生錯誤時，會顯示具體是哪一行代碼出現的錯誤；
2. 作為一個指令行視窗：可以向其中鍵入各種指令（本文不會涉及控制台的指令API）。

除了Console面闆（控制台），以下這幾個面闆也比較常用：

• Element：用來檢視網頁的HTML源碼和CSS代碼。
• Sources：檢視加載的各種資源檔案（比如代碼檔案等）以及硬碟上各種内容（就是可以檢視硬碟上存儲的檔案，類似于Windows的檔案資料總管）。
• Network：檢視網頁的HTTP通信情況。
• Performance：檢視網頁的性能情況，比如CPU和記憶體消耗。

2 console對象方法

console對象提供了一些靜态方法，讓我們的程式在控制台輸出一些與程式運作相關的特定的資訊，例如運作結果、錯誤資訊、程式運作時間等等。下面我會總結幾個最常用的，并大緻做了一個分類（自己做了一個分類😁）：

1. 輸出資訊的基本方法：

   console.log()

   、

   console.info()

   、

   console.debug()

   、

   console.warn()

   、

   console.error()

   。

   這幾個方法中最常用的就是

   console.log()

   方法，我們重點來看一下這個方法，直接上例子吧：

   

   占位符分以下幾種類型，代表了可以替換的資料的類型：

   • %s

     ：字元串

   • %d

     ：整數

   • %i

     ：整數

   • %f

     ：浮點數

   • %o

     ：對象

   • %c

     ：CSS代碼，并對參數内容進行css渲染。
   示例1：輸出結果看代碼中的注釋。

   var number = 11 * 9;
   var color = 'red';
   
   console.log('%d %s balloons', number, color);// 99 red balloons
              

   示例2：

   %c

   為占位符時，對應的參數必須時css代碼，并對輸出内容進行css渲染。

   console.log(
     '%cThis text is styled!',
     'color: red; background: yellow; font-size: 24px;'
   )
              

   控制台輸出效果如下所示：黃底黑字，字型大小為24像素的渲染效果。

   

   至于其他幾個都和

   console.log()

   用法是一樣的，隻是輸出内容略有不同而已：下面的僅僅做了個簡單的測試，分别輸出了一個單詞。

   

   • console.info()

     ：和log一樣。

   • console.warn()

     ：會在輸出資訊的前面加一個黃色三角。

   • console.error()

     ：會在輸出資訊的前面加一個紅色的叉，同時，還會高亮顯示輸出文字和錯誤發生的堆棧。

   • console.debug()

     ：用于在控制台輸出調試資訊。

     如下圖所示，隻有勾選了Verbose選項才會顯示

     console.debug()

     輸出的資訊。

     

2. 以表格形式輸出複合類型的資料的方法：

   console.table()

   。如下例子會以表格的形式在控制台輸出變量

   language

   。

   var languages = [
     { name: "JavaScript", fileExtension: ".js" },
     { name: "TypeScript", fileExtension: ".ts" }
   ];
   
   console.table(languages);
              

   運作效果如下：

   

3. 用于計時的方法：

   console.time()

   與

   console.timeEnd()

   。如下可以輸出數組初始化所用時間。

   console.time('數組初始化');
   var array= new Array(1000000);
   for (var i = array.length - 1; i >= 0; i--) {
     array[i] = new Object();
   };
   console.timeEnd('數組初始化');
              

   運作效果如下：

   

4. 清除控制台所有輸出内容的方法：

   console.clear()

   ，它清除目前控制台的所有輸出，将光标回置到第一行。

   注意：如下圖：若使用者選中了控制台的【Preserve log】選項，該方法将不起作用。

   

3 自定義console對象方法

由于

console

對象的所有方法都可以被覆寫，是以可以按照自己的需要自定義

console

對象方法。

實作方法示例：可為輸出結果加上目前時間，輸出結果見注釋。

['log', 'info', 'warn', 'error'].forEach(function(method) {
  console[method] = console[method].bind(
    console,
    new Date().toISOString()
  );
});

console.log("出錯了！");// 2021-07-27T15:55:25.536Z 出錯了！
           

4 debugger語句

debugger

語句主要用于除錯，作用是設定斷點。如果有正在運作的除錯工具，程式運作到

debugger

語句時會自動停下。

示例代碼如下：

for(var i = 0; i < 5; i++){
  console.log(i); debugger;
}
           

這個在chrome中運作效果如下：當代碼運作到

debugger

語句時，就會暫停運作，自動打開腳本源碼界面。我們可以點選下圖中的功能按鈕對代碼進行一步步執行，這裡不再贅述細節。