身為一位走跳社會多年的後端打雜工程師，對於前端技能一直處於荒廢加半放棄的狀態，但在工作上常常會遇到與前端工程師搭配合作的情境，因此前端基本的技能還是多少會需要略懂略懂，在前端進行偵錯時自己都會使用瀏覽器所提供的 console.log 來記錄 debug 資訊，但在最近發現 console API 新增了許多方法，可以讓開發者在 debug 時更為方便，此文章就來分享閱讀完 console API from MDN doc 的心得，包含 console 基本應用、console group、console table、console time 內容包含上述 API 介紹範例，若有問題或是錯誤的地方歡迎各方高手大大一起討論或給予指導。
Console 基本應用
最基本的應用是使用 console.log 紀錄內容，使用該 API 後會將內容輸出到瀏覽器的控制台，首先一開始
console.log
在 switch case 看到在進行判斷時是使用 string 作為依據，但在可能會存在像是判斷大小寫、打錯字、去
最基本的應用是使用 console.log 紀錄內容，使用該 API 後會將內容輸出到瀏覽器的控制台，首先一開始先來最基本的 Hello world
console.log('Hello world')
// output : Hello world
log 內容也支援物件輸出，舉例來說定義 book 物件以及其屬性 id 和 name 兩種var book = { id:'1', name:'This is a book'}
console.log(book);
// output :
// {id: "1", name: "This is a book"}
// id: "1"
// name: "This is a book"
如果有多個變數需要一起輸出，又不希望透過每一行來執行時，可以透過 { } 將輸出內容包含在裡面var book = { id:'1', name:'This is a book'};
var book2 = {id:'2', name:'Not a pen'};
console.log({book, book2});
// output :
// {id: "1", name: "This is a book"}
// {id: "1", name: "Not a pen"}
也可以使用 C# 類似 string.format 方式將輸出其變數值var name = 'Marcus 學習筆記';
console.log('welcome %s', name);
// output : welcome Marcus 學習筆記
console.warn 和 console.error
有時候輸出的 log 可能依據不同的 log 內容來做分類及等級顯示，如果紀錄的 log 內容等級較高可以使用 warn 以及 error 等 API，以增加閱讀 log 時的可讀性，舉例來說輸入以下內容
console.warn('Hello warn');
console.error('Hello error');
在 Chrome 瀏覽器會輸出以下內容
Console Group
當 console 輸出內容變多時就會不容易閱讀，這時可以使用 console.Group API 將相關訊息做分類顯示，方便在閱讀時更容易，使用 console.group 做為區塊的開始，接著在用 console.groupCollapsed 做為區塊的結尾，舉例來說購物車的應用情境如下
console.group('Shopping Cart');
console.log('user: Marcus');
// item 1
console.group('Shopping item');
console.log('Name: .NET Core in actopn');
console.log('Author: Andrew Lock');
console.log('ISBN: 1617294616');
console.groupEnd();
// item 2
console.group('Shopping item');
console.log('Name: Something about ASP.NET Core');
console.log('Author: Marcus');
console.log('ISBN: 9527');
console.groupEnd();
以上代碼輸出在 chrome 顯示如下
Console Table
使用 console.group 可以大幅提升 log 的可讀性，增加可讀性的另一種方式是使用 console Table，使用方式也相當簡單，使用 console.table 加上變數即可快速使用，以一開始的例子變數 book、book2 做為範例將 console.log 改為 console.table 即可
var book = { id:'1', name:'This is a book'};
var book2 = {id:'2', name:'Not a pencil'};
console.table({book, book2});
以上代碼輸出在 chrome 輸出如下
Console.Time
在 Gecko 加入 console.Time 使用計時器功能，在同一頁面最多可以使用 10,000 個計時器，單位則是以毫秒為單位，使用 console.time() 方法可以啟用，停止則是 console.timeend ，計時器範例如下
console.time("計時");
alert("準備開始 ! ");
console.timeLog("計時");
alert("時間分支");
console.timeEnd("計時");
畫面上會呈現準備開始按鈕，計時完畢後會在控制台區塊顯示花費時間
計時: 4174.994873046875ms 計時: 4851.634033203125ms
Other
在 console 中還有其他好用的功能如下，這裡就不在多加描述有興趣可以嘗試看看
- console.clear : 清除控制台
- console.trace : 將物件輸出至控制台
0 意見:
張貼留言