本篇要解決的問題
其實一開始要解決的,是「console.log
API 回來的資料時,遇到 Object 就要一個一個點開來才能看到每個屬性的 value 是什麼」這個問題,在一陣咕狗來、咕狗去後,就發現還有許多好用的 console
可以用,就決定整理成本篇筆記文。
印象中寫 Console API 的文章有蠻多的,這篇就是整理 August 看到文件後,覺得以後開發時會用到的幾個。
本Z滿主要參考的文件有二個:
Chrome Developers Console API reference
console.log Object 自動全部展開
有時我們 console.log(object)
時,出來的結果會像這樣:
name: (...)
website: (...)
loc: (...)
uri: (...)
我們為了要看每一個 (...)
是什麼,就得一個一個點,遇到大一點的資料,全部點開就可以準備下班囉~(浮誇)
要怎麼樣可以在 console.log
時直接印出全部的值呢?
只要把 console.log(object)
改成:
console.log(JSON.parse(JSON.stringify(object)))
這樣就會看到 Object 直接全部展開了:
console.table 將陣列表格化
陣列裡面塞了太多資料時,要看資料會看到眼睛都花了。
console.table
可以將陣列的資料顯示成表格。
原本只用 console.log
時,會看到像這樣:
用 console.table
後會像這樣:
是不是清楚很多呢?
console.time()、console.timeEnd() 紀錄執行時間
這個 console API 很方便,可以紀錄我們中間執行的程式碼耗用了多少時間。
比方我們可以紀錄調用 API 回來的時間:
console.time(); await fetch('https://api.example.com.tw/user') .then(res => res.json()) .then(res => console.log(res)); console.timeEnd();
console.time()
是計時開始,console.timeEnd()
是計時結束,比方我們拿 JSONPlaceholder 的資料來測試:
default
是預設會有的標籤,如果 console.time()
、console.timeEnd()
的 ()
裡面沒給任何標籤的話,預設就是 default
。
我們也可以自行寫上標籤,就可以做到分組測試,如下:
在 default 的那個截圖,我們測試出調用 JSONPlaceholder 的 users 總計用了 74 多毫秒。
因為好奇這個準不準,所以又拿了 Postman 來試:
78 毫秒,還真的有準。
console.warn()、console.error()
這二個就是可以讓輸出的部份變為 warn 或 error。
console.warn()
console.error()
console.clear() 清除 Console
有時候一個頁面寫了幾千行程式碼,有個報錯、警告,或是一些忘了刪除的 console.log
就印在 Console 上是很難免的。
真的有遇過因為 Console 上文字太多找不到自己寫的 console.log
的真人真事非改編悲劇。
console.clear()
就是可以清除 Console 上的所有文字、警告、報錯……等有的沒的。
document.designMode = “on”
這個不是 Console API,但覺得有趣就分享給大家。
在 Console 上輸入:
document.designMode = 'on'
按下 Enter 後,好玩的事情就發生了,你會發現網頁上的文字就像 Word 一樣可以直接編輯。