『翻译』有趣的Console对象

1,961 阅读1分钟

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翻译,转载请与译者联系。否则将追究法律责任。