幾個方便開發的 Console API 應用

/

本篇要解決的問題

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

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

本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

隨選筆記文

API Front-End

用 Google Apps Script 寫一個 LINE 登入功能:下篇 – 三大步驟

Google Others

Youtube Iframe API 常用功能

Vue

D3.js、Vue 畫一個台灣地圖

API

GitHub API:建立 Issue、Comment – API、Personal access tokens

WordPress

如何用 MAMP 在本機安裝 WordPress

Front-End

TestCafe 學習筆記 – 1:自動化測試會員登入

PWA

PWA 學習筆記 – 2:Workbox CLI

API

Instagram 基本顯示 API :抓取公開 IG 資料、相片、影片

Firebase Google

Firebase Authentication 第三方登入 – Google、FB

Bot Telegram

Telegram Login Widget,製作用 Telegram 登入功能

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言