『翻譯』有趣的Console對象

Read the originaljavascript

Console對象提供了接口去操做瀏覽器的調試控制檯(像火狐瀏覽器中的控制檯)。它在不一樣瀏覽器中實現細節不一樣,但也有其通用的特性。java

Console - Web API 接口 | MDNgit

下面列舉了一些你可能不知道的Console對象的特性:(譯者注:如下例子均可在控制檯直接運行)github

1.清空控制檯

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

2.輸出樣式

你能夠使用%c指令給你的輸出指定樣式:微信

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

3.顯示錶格樣式的數據

使用console.table(object),提供一個對象,讓它像表格同樣顯示:ui

讓咱們來試試:spa

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翻譯,轉載請與譯者聯繫。不然將追究法律責任。

相關文章
相關標籤/搜索