幾個方便開發的 Console API 應用

幾個方便開發的 Console API 應用
幾個方便開發的 Console API 應用

本篇要解決的問題

其實一開始要解決的,是「console.log API 回來的資料時,遇到 Object 就要一個一個點開來才能看到每個屬性的 value 是什麼」這個問題,在一陣咕狗來、咕狗去後,就發現還有許多好用的 console 可以用,就決定整理成本篇筆記文。

印象中寫 Console API 的文章有蠻多的,這篇就是整理 August 看到文件後,覺得以後開發時會用到的幾個。

本Z滿主要參考的文件有二個:

MDN Web Docs

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 直接全部展開了:

直接展開 Object 的所有值
直接展開 Object 的所有值

console.table 將陣列表格化

陣列裡面塞了太多資料時,要看資料會看到眼睛都花了。

console.table 可以將陣列的資料顯示成表格。

原本只用 console.log 時,會看到像這樣:

console.log Array
console.log Array

console.table 後會像這樣:

console.table Array
console.table Array

是不是清楚很多呢?


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 的資料來測試:

console.time()、console.timeEnd()
console.time()、console.timeEnd()

default 是預設會有的標籤,如果 console.time()console.timeEnd()() 裡面沒給任何標籤的話,預設就是 default

我們也可以自行寫上標籤,就可以做到分組測試,如下:

可以用標籤寫多組 console.time()、console.timeEnd()
可以用標籤寫多組 console.time()、console.timeEnd()

在 default 的那個截圖,我們測試出調用 JSONPlaceholder 的 users 總計用了 74 多毫秒。

因為好奇這個準不準,所以又拿了 Postman 來試:

拿 Postman 測試回應時間
拿 Postman 測試回應時間

78 毫秒,還真的有準。


console.warn()、console.error()

這二個就是可以讓輸出的部份變為 warn 或 error。

console.warn()

console.warn()
console.warn()

console.error()

console.error()
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 一樣可以直接編輯。

Summary
幾個方便開發的 Console API 應用
Article Name
幾個方便開發的 Console API 應用
Description
本篇大綱:本篇要解決的問題。console.log 自動全部展開。console.table。console.time、console.timeEnd。console.warn、console.error。console.clear。document.designMode。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest

0 Comments
Inline Feedbacks
看所有留言