引言

此文是翻译自 Console API Reference | Tools for Web Developers | Google Developers 原文由 Kayce Basques(Technical Writer, Chrome DevTools & Lighthouse) 创作,更新于五月 29, 2019。
在此处翻译为 中文(简体) 供该语种的开发者学习使用。

Kayce Basques 在 Google Developer Days 2019 中,讲述「利用Chrome DevTools更快速地构建出色的网站 - Chrome DevTools最有用的工作流程」。时长约为20分钟,视频:同声传译官方英语

正文

console.assert(expression, object)

错误等级 Error

表达式false 时,将错误日志写入控制台。

const x =  5;
const y =  3;
const reason =  'x is expected to be less than y';
console.assert(x < y,  {x, y, reason});

The result of the console.assert() example above.

图 1. console.assert() 示例的结果。

console.clear()

清除控制台中的全部日志

console.clear();

如果 保留日志 开启,那么 console.clear() 是被禁用的。

亦可查看 Clear the Console [developers.google.com]

console.count([label])

错误等级 Info

打印在同一行和相同标签上调用 count() 的次数。调用 console.countReset([label]) 重置计数。

console.count();
console.count('coffee');
console.count();
console.count();

The result of the console.count() example above.

图 2. console.count() 示例的结果。

console.countReset([label])

重置 console.count() 的计数。

console.countReset();
console.countReset('coffee');

console.debug(object [, object, …])

错误等级 Info

console.log(object [, object, ...]) 相同

console.debug('debug');

The result of the console.debug() example above.

图 3. console.debug() 示例的结果。

console.dir(object)

错误等级 Info

打印指定对象的 JSON 表示形式。

console.dir(document.head);

The result of the console.dir() example above.

图 4. console.dir() 示例的结果。

console.dirxml(node)

错误等级 Info

打印 节点 后代的XML表示形式。

console.dirxml(document);

The result of the console.dirxml() example above.

图 5. console.dirxml() 示例的结果。

console.error(object [, object, …])

错误等级 Error

对象 打印到控制台,将其格式化为错日志,并包含堆栈跟踪。

console.error("I'm sorry, Dave. I'm afraid I can't do that.");

The result of the console.error() example above.

图 6. console.error() 示例的结果。

console.group(label)

可视化地将日志组合在一起,直到调用 console.groupEnd(label) 结束折叠。
使用 console.groupCollapsed(label) 在打印到控制台时默认折叠该组。

const label =  'Adolescent Irradiated Espionage Tortoises';
console.group(label);
console.info('Leo');
console.info('Mike');
console.info('Don');
console.info('Raph');
console.groupEnd(label);

The result of the console.group() example above.

图 7. console.group() 示例的结果。

console.groupCollapsed(label)

console.group(label) 相同,但该组在打印到控制台时默认为折叠状态。

console.groupEnd(label)

停止打印可视化日志组。

console.info(object [, object, …])

错误等级 Info

console.log(object [, object, ...]) 相同

console.info('info');

The result of the console.info() example above.

图 8. console.info() 示例的结果。

console.log(object [, object, …])

错误等级 Info

打印一个日志到控制台

console.log('log');

The result of the console.log() example above.

图 9. console.log() 示例的结果。

console.table(array)

错误等级 Info

将包含 ObjectArray 以表格的形式打印到控制台。

console.table([
    {
        first: 'René',
        last: 'Magritte',
    },
    {
        first: 'Chaim',
        last: 'Soutine',
        birthday: '18930113',
    },
    {
        first: 'Henri',
        last: 'Matisse',
    }
]);

The result of the console.table() example above.

图 10. console.table() 示例的结果。

console.time([label])

启动一个新的计时器。调用 console.timeEnd([label]) 以停止计时器并将经过的时间打印到控制台。

console.time();
for  (var i =  0; i <  100000; i++)  {
    let square = i **  2;
}
console.timeEnd();

The result of the console.time() example above.

图 11. console.time() 示例的结果。

console.timeEnd([label])

错误等级 Info

停止一个由 console.time([label]) 启动的计时器。

console.trace()

错误等级 Info

将堆栈跟踪打印到控制台。

const first = () => { second(); };
const second = () => { third(); };
const third = () => { fourth(); };
const fourth = () => { console.trace(); };
first();

The result of the console.trace() example above.

图 12. console.trace() 示例的结果。

console.warn(object [, object, …])

错误等级 Warning

向控制台打印警告日志。

console.warn('warn');

The result of the console.warn() example above.

图 13. console.warn() 示例的结果。

Source: https://developers.google.com/web/tools/chrome-devtools/console/api
By Kayce Basques
Technical Writer, Chrome DevTools & Lighthouse
Last update:May 29, 2019

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies. Java is a registered trademark of Oracle and/or its affiliates.