JavaScript 中的 console 对象提供了一些非常实用的命令,帮助你在开发过程中调试和打印信息。以下是 九个常用的 console 命令,它们能大大简化 JavaScript 调试过程。

1. console.log()

console.log() 是最常用的调试命令,用于输出普通信息到控制台。它可以输出字符串、变量、对象等。

console.log('Hello, world!');
console.log('My name is', 'John Doe');
console.log({ name: 'John', age: 30 });

输出:

Hello, world!
My name is John Doe
{name: "John", age: 30}

2. console.warn()

console.warn() 用于输出警告信息。它通常会带有黄色的警告符号,帮助你区分与 console.log() 输出的普通信息。

console.warn('This is a warning!');

输出:

This is a warning!

(带有黄色警告图标)

3. console.error()

console.error() 用于输出错误信息。它通常会带有红色的错误图标,突出显示问题。

console.error('Something went wrong!');

输出:

Something went wrong!

(带有红色错误图标)

4. console.table()

console.table() 用于以表格形式输出数据,特别适用于数组和对象的查看。

console.table([
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 },
  { name: 'Tom', age: 35 }
]);

输出:

┌─────────┬───────┬─────┐
│ (index) │ name  │ age │
├─────────┼───────┼─────┤
│    0    │ 'John' │ 30  │
│    1    │ 'Jane' │ 25  │
│    2    │ 'Tom'  │ 35  │
└─────────┴───────┴─────┘

5. console.group() 和 console.groupEnd()

console.group() 和 console.groupEnd() 用于将多个日志信息分组显示,帮助你组织复杂的调试信息。你可以使用 console.groupCollapsed() 来以折叠形式显示组。

console.group('User Info');
console.log('Name: John');
console.log('Age: 30');
console.groupEnd();

console.groupCollapsed('Settings');
console.log('Theme: Dark');
console.log('Language: English');
console.groupEnd();

输出:

User Info
  Name: John
  Age: 30
Settings
  Theme: Dark
  Language: English

6. console.assert()

console.assert() 只有在第一个参数为假值时才会输出错误信息,适合用来测试断言。

console.assert(5 > 10, '5 is not greater than 10');
console.assert(10 > 5, 'This will not show');

输出:

Assertion failed: 5 is not greater than 10

7. console.count()

console.count() 用于输出函数调用的次数。如果你多次调用 console.count(label),它会显示计数器的当前值。

console.count('Function called');
console.count('Function called');
console.count('Function called');

输出:

Function called: 1
Function called: 2
Function called: 3

8. console.time() 和 console.timeEnd()

console.time() 和 console.timeEnd() 用于计算代码的执行时间。你可以为计时器指定一个标签,帮助你在多次测量中区分不同的计时器。

console.time('Timer 1');
for (let i = 0; i < 1000000; i++) {}
console.timeEnd('Timer 1');

console.time('Timer 2');
for (let i = 0; i < 500000; i++) {}
console.timeEnd('Timer 2');

输出:

Timer 1: 4.23ms
Timer 2: 2.10ms

9. console.dir()

console.dir() 用于打印对象的可枚举属性,通常适用于 DOM 元素或复杂的对象,能够以树形结构显示。

let obj = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    zip: '10001'
  }
};
console.dir(obj);

输出:

{name: 'John', age: 30, address: {city: 'New York', zip: '10001'}}

小结

这些 console 命令在 JavaScript 调试过程中非常有用,可以帮助你更清晰、更有条理地查看和调试代码。在实际开发中,合理使用它们能够让你更快速地发现并解决问题。