JavaScript Console 物件

Console 物件提供了存取瀏覽器除錯控制台 (Developer Console) 的方法，是開發和除錯 JavaScript 程式時最常用的工具。

開啟開發者工具

各瀏覽器開啟開發者工具的快捷鍵：

  • Chrome / Edge / Firefox：F12 或 Ctrl+Shift+I（Mac：Cmd+Option+I）
  • Safari：Cmd+Option+I（需先在偏好設定中啟用開發者選單）

開啟後切換到 Console 分頁即可看到輸出。

console.log()

最常用的方法，輸出訊息到控制台：

console.log('Hello World');
console.log(123);
console.log({ name: 'Mike', age: 30 });
console.log([1, 2, 3]);

// 可以一次輸出多個值，用逗號分隔
console.log('Name:', 'Mike', 'Age:', 30);

console.error()

輸出錯誤訊息，在控制台會以紅色樣式顯示：

console.error('發生錯誤！');
console.error('找不到使用者：', userId);

console.warn()

輸出警告訊息，在控制台會以黃色樣式顯示：

console.warn('這個方法已經過時');
console.warn('記憶體使用量過高：', memoryUsage);

console.info()

輸出資訊訊息：

console.info('應用程式已啟動');

console.table()

以表格方式顯示陣列或物件，特別適合顯示結構化資料：

var users = [
    { name: 'Mike', age: 30, city: 'Taipei' },
    { name: 'John', age: 25, city: 'Kaohsiung' },
    { name: 'Amy', age: 28, city: 'Taichung' }
];

console.table(users);

也可以指定要顯示的欄位：

console.table(users, ['name', 'city']);

console.dir()

以樹狀結構顯示物件的屬性，特別適合檢視 DOM 元素：

var element = document.getElementById('myDiv');
console.dir(element);  // 顯示元素的所有屬性

console.group() / console.groupEnd()

將多個 log 分組顯示，方便組織大量輸出：

console.group('使用者資訊');
console.log('姓名：Mike');
console.log('年齡：30');
console.log('城市：Taipei');
console.groupEnd();

// 可以巢狀分組
console.group('外層群組');
console.log('外層訊息');
    console.group('內層群組');
    console.log('內層訊息');
    console.groupEnd();
console.groupEnd();

使用 console.groupCollapsed() 可以建立預設收合的群組：

console.groupCollapsed('詳細資訊（點擊展開）');
console.log('詳細內容 1');
console.log('詳細內容 2');
console.groupEnd();

console.time() / console.timeEnd()

測量程式碼執行時間：

console.time('迴圈時間');

for (var i = 0; i < 100000; i++) {
    // 執行一些操作
}

console.timeEnd('迴圈時間');
// 輸出：迴圈時間: 5.123ms
time() 和 timeEnd() 要使用相同的標籤名稱。

console.count()

計算被呼叫的次數：

function greet(name) {
    console.count('greet 被呼叫');
    return 'Hello, ' + name;
}

greet('Mike');   // greet 被呼叫: 1
greet('John');   // greet 被呼叫: 2
greet('Amy');    // greet 被呼叫: 3

// 重置計數
console.countReset('greet 被呼叫');

console.assert()

只在條件為 false 時輸出訊息：

var x = 10;

console.assert(x > 5, 'x 應該大於 5');   // 不會輸出
console.assert(x > 15, 'x 應該大於 15');  // 會輸出錯誤訊息

console.trace()

輸出堆疊追蹤 (stack trace)，顯示函式的呼叫路徑：

function a() {
    b();
}

function b() {
    c();
}

function c() {
    console.trace('追蹤呼叫路徑');
}

a();
// 會顯示：c -> b -> a 的呼叫路徑

console.clear()

清除控制台的所有訊息：

console.clear();

格式化輸出

console.log 支援類似 C 語言 printf 的格式化字串：

// %s - 字串
console.log('Hello, %s!', 'Mike');  // Hello, Mike!

// %d 或 %i - 整數
console.log('數量：%d', 42);  // 數量：42

// %f - 浮點數
console.log('價格：%f', 19.99);  // 價格：19.99

// %o - 物件
console.log('物件：%o', { name: 'Mike' });

// %c - CSS 樣式
console.log('%c紅色粗體文字', 'color: red; font-weight: bold;');
console.log('%c綠色大字', 'color: green; font-size: 24px;');

實用範例

條件式除錯輸出

var DEBUG = true;

function debug() {
    if (DEBUG) {
        console.log.apply(console, arguments);
    }
}

debug('這只在 DEBUG 模式下輸出');

效能測量

function measurePerformance(fn, label) {
    console.time(label);
    fn();
    console.timeEnd(label);
}

measurePerformance(function() {
    // 要測量的程式碼
    var sum = 0;
    for (var i = 0; i < 1000000; i++) {
        sum += i;
    }
}, '計算總和');

美化輸出

console.log(
    '%c 歡迎 %c 開發者 ',
    'background: #3498db; color: white; padding: 5px;',
    'background: #2ecc71; color: white; padding: 5px;'
);

注意事項

  1. 正式環境移除 console：console.log 在正式環境中應該移除或關閉，避免洩漏資訊和影響效能。可以用打包工具在 build 時自動移除。

  2. console.log 是異步的：在某些情況下，console.log 物件可能會顯示後來修改的值，因為瀏覽器是延遲評估 (lazy evaluation) 物件的。如果要確保看到當下的值，可以用 JSON.stringify()：

var obj = { count: 1 };
console.log(JSON.stringify(obj));  // {"count":1}
obj.count = 2;
// 直接 console.log(obj) 可能會顯示 {count: 2}