JavaScript 超好用的 console 技巧,不能只會 console.log

基本輸出訊息

    
console.debug("console.debug")
console.log("console.log");
console.info("console.info");
console.warn("console.warn"); // 警告
console.error("console.error"); // 錯誤
    

輸出訊息如下:


註: debug 需要在瀏覽器中選擇「詳細」才會顯示

清除所有訊息

    
console.clear()
    

在「主控台」中直接輸入也可以直接將內容清除

計算執行時間

將 console.time 和 console.timeEnd 中放入相同標籤(label),就會在執行到 console.timeEnd 時輸出經過時間
    
console.time("time1");
for (let i = 0; i < 1000000; i++) {
}
console.timeEnd("time1");
    

範例輸出:
    
time1: 1.05419921875 ms
    

使用表格輸出陣列資料

    
const data = [
    {id: 0, name: "小名", phone: "0912345678"},
    {id: 1, name: "小華", phone: "0987654321"},
    {id: 2, name: "小張", phone: "0923456789"},
    {id: 3, name: "小李", phone: "0934567890"}
];

console.table(data);
    

並且可以點擊標題作排序



參考資料:
mdn - Console

留言