列印到瀏覽器除錯控制檯

可以使用瀏覽器的除錯控制檯來列印簡單訊息。可以在瀏覽器中直接開啟此除錯或 Web 控制檯 ( F12 大多數瀏覽器中的鍵 - 請參閱下面的備註以獲取更多資訊),可以通過鍵入以下內容來呼叫 console Javascript 物件的 log 方法:

console.log('My message');

然後,按下 Enter,這將在除錯控制檯中顯示 My message

console.log() 可以使用當前作用域中可用的任意數量的引數和變數進行呼叫。多個引數將列印在一行中,它們之間有一個小空格。

var obj = { test: 1 };
console.log(['string'], 1, obj, window);

log 方法將在除錯控制檯中顯示以下內容:

['string']  1  Object { test: 1 }  Window { /* truncated */ }

除了普通字串,console.log() 還可以處理其他型別,如陣列,物件,日期,函式等:

console.log([0, 3, 32, 'a string']);
console.log({ key1: 'value', key2: 'another value'});

顯示:

Array [0, 3, 32, 'a string']
Object { key1: 'value', key2: 'another value'}

巢狀物件可能會摺疊:

console.log({ key1: 'val', key2: ['one', 'two'], key3: { a: 1, b: 2 } });

顯示:

Object { key1: 'val', key2: Array[2], key3: Object }

某些型別(如 Date 物件和 functions)可能會以不同方式顯示:

console.log(new Date(0));
console.log(function test(a, b) { return c; });

顯示:

Wed Dec 31 1969 19:00:00 GMT-0500 (Eastern Standard Time)
function test(a, b) { return c; }

其他列印方法

除了 log 方法,現代瀏覽器也支援類似的方法:

  • console.info - 小資訊圖示(ⓘ)出現在列印的字串或物件的左側。

  • console.warn - 左側出現小警告圖示(!)。在某些瀏覽器中,日誌的背景為黃色。

  • console.error - 左側出現小時間圖示(⊗)。在某些瀏覽器中,日誌的背景為紅色。

  • console.timeStamp - 輸出當前時間和指定的字串,但不是標準的:

    console.timeStamp('msg');
    

    顯示:

    00:00:00.001 msg
    
  • console.trace - 如果在全域性範圍內呼叫,則輸出當前堆疊跟蹤或顯示與 log 方法相同的輸出。

    function sec() {
       first();
    }
    function first() {
       console.trace();
    }
    sec();
    

    顯示:

    first
    sec
    (anonymous function)
    

StackOverflow 文件

上圖顯示了 Chrome 版本 56 中的所有功能,但 timeStamp 除外。

這些方法的行為類似於 log 方法,並且在不同的除錯控制檯中可以呈現不同的顏色或格式。

在某些偵錯程式中,可以通過單擊列印文字或引用相應物件屬性的小三角形(►)來進一步擴充套件單個物件資訊。這些摺疊物件屬性可以在日誌中開啟或關閉。有關此內容的更多資訊,請參見 console.dir