Chrome Dev Tools 控制台 API

Chrome Dev Tools（以下简称DevTools）提供了一系列的JavaScript API来操作控制台(console)，开发者可以通过这些API来实现一些常见的调试任务和检查页面的内容和性能。

获取控制台对象

在DevTools中，控制台对象会自动挂载到全局对象(window)下，我们可以通过全局变量console来访问它，如下所示：

console.log('hello world');

控制台中的消息

在控制台中，我们通常发送的四种类型的消息：log, warn, error和info消息。这些消息通过console.log(), console.warn(), console.error()和console.info()分别输出。

console.log('This is a log message');
console.warn('This is a warning message');
console.error('This is an error message');
console.info('This is an info message');

调试代码

有两种方式可以在DevTools中进行代码调试：

1. 断点调试：点击代码行前面的行号，就可以添加/删除断点，方便我们调试代码。
2. 使用debugger语句：当遇到debugger语句时，执行代码就会在这里中断，我们就可以在这里进行调试。

function foo() {
  debugger;
  console.log('test');
}

foo();

打印堆栈信息

通过console.trace()函数，我们可以打印当前的调用堆栈信息。

function foo() {
  bar();
}

function bar() {
  console.trace();
}

foo(); // 输出堆栈信息

清空控制台

如果我们想清空控制台中的消息，可以使用console.clear()方法。

console.clear();

计时功能

使用console.time()和console.timeEnd()可以计算代码执行时间。

console.time('myFunc');
myFunc();
console.timeEnd('myFunc'); // 输出代码执行的时间

格式化输出

默认情况下，console.log()等函数会把所有参数都按空格连接起来输出。但是我们也可以使用字符串格式化语法，比如%s, %d, %o, %c等来格式化输出。

console.log('Starting %s on %o', 'app', new Date());
console.log('%c%s', 'color: red; font-size: 2rem;', 'ERROR');