『翻譯』有趣的Console物件

Read the original

Console物件提供了介面去操作瀏覽器的除錯控制檯（像火狐瀏覽器中的控制檯）。它在不同瀏覽器中實現細節不同，但也有其通用的特性。

Console - Web API 介面 | MDN

下面列舉了一些你可能不知道的Console物件的特性：(譯者注：以下例子都可在控制檯直接執行)

1.清空控制檯

使用console.clear()指令清空你的控制檯。

2.輸出樣式

你可以使用%c指令給你的輸出指定樣式:

console.log('%c Make console greate again!', 'font-size:50px; background:red;')複製程式碼

3.顯示錶格樣式的資料

使用console.table(object)，提供一個物件，讓它像表格一樣顯示：

讓我們來試試：

persons = [ { name: 'Hien Vuong', city: 'Ho Chi Minh' }, { name: 'Donald Trump', city: 'New York' }]

console.table(persons)複製程式碼

4.分組輸出

使用console.group(message)和console.groupEnd()指令，用下拉選單的形式分組輸出全部日誌。

讓我們用上面的persons物件試試：

persons.forEach(p => {
    console.group();
    console.log(`This is ${p.name}`);
    console.log(`He comes from ${p.city}`);
    console.groupEnd();
});複製程式碼

這樣敲程式碼多讓人開心！

喜歡本文的朋友可以關注我的微信公眾號，不定期推送一些好文。

本文由Rockjins Blog翻譯，轉載請與譯者聯絡。否則將追究法律責任。