[Chrome] Chrome Dev Tool (Get Started with Debugging JavaScript in Chrome DevTools)
TL;DR
基本 console 使用
/**
* 視覺化呈現
**/
console.warn('<output>')
console.error('<output>')
console.clear()
console.dir(<DOMElement>) // 以物件的方式列出該 DOM 元素與相關屬性
console.dirxml(<DOMElement>) // 以 HTML 樣式輸出 DOM 元素
console.table([object/array]) // 將物件以表格方式呈現
/**
* 偵錯
**/
console.trace('Trace this function');
debugger;
debug(<functionName>); // 在 console 中輸入,當執行到此函式時會中斷
/**
* 效能測試
**/
console.time('<timerName>'); // 開始為 'timerName' 計時
console.timeEnd('<timerName>'); // 結束 'timerName' 計時
console.count('counterName'); // 為 'counterName' 計數
/**
* 選取器
**/
$0;
$('.class-name') // 找到第一個 .class-name
$$('.class-name') // 找出所有 .class-name
/**
* 將輸出資料分群顯示
**/
console.group('<groupName>') // 開始分群,預設展開
console.groupCollapsed('<groupName>') // 開始分群,預設不展開
console.groupEnd() // 結束分群
/**
* 使用 '%c' 幫輸出的內容添加樣式
**/
console.log('%c What a Cool Console', 'font-size: 32px; color: red')