Chrome DevTools console.log 輸出 jQuery 物件顯示差異解析

現象描述

在 Chrome 控制台執行：

console.log($('div'));      // 輸出：[div, div, ...] 可展開的樹狀結構
console.log('divs: ' + $('div')); // 輸出：divs: [object Object] 字串

第一行顯示 DOM 物件結構，第二行變成不可展開的字串。

根本原因

• 多參數傳遞：console.log(obj1, obj2, ...) 會將每個參數作為獨立物件輸出，保留物件引用，控制台渲染為可互動的樹狀結構。
• 字串拼接：'str' + obj 觸發隱式 toString() 轉換，jQuery 物件轉為 "[object Object]"，控制台只收到純字串，無法還原物件結構。

正確輸出方式

// 正確：多參數
console.log('divs:', $('div')); 

// 正確：使用格式化佔位符
console.log('divs: %o', $('div')); // %o 格式化為物件

// 錯誤：字串拼接
console.log('divs: ' + $('div')); 

延伸：輸出 DOM 元素而非 jQuery 物件

console.log($('div')[0]);        // 第一個原生 DOM 元素
console.log($('div').get());     // 所有原生 DOM 元素陣列
console.dir($('div')[0]);        // 強制以物件屬性視圖顯示

總結

調試時習慣使用 console.log('label:', obj) 或 console.log('%o', obj)，避免字串拼接導致物件信息丟失。