Console 对象 - 常用 API 揭秘，助你轻松掌控浏览器控制台

console.log()

console.log() 方法用于在控制台中输出信息。它可以接受多个参数，将它们的结果连接起来输出。如果第一个参数是格式字符串，则可以根据格式字符串中的占位符来输出其他参数的值。

console.log('Hello, world!'); // 输出 "Hello, world!"
console.log(1, 2, 3); // 输出 "1 2 3"
console.log('%d %s', 1, 'apple'); // 输出 "1 apple"

console.error()

console.error() 方法用于在控制台中输出错误信息。它与 console.log() 方法类似，但会在控制台中显示红色的错误消息。

console.error('Error: Something went wrong!'); // 输出 "Error: Something went wrong!"

console.warn()

console.warn() 方法用于在控制台中输出警告信息。它与 console.log() 方法类似，但会在控制台中显示黄色的警告消息。

console.warn('Warning: This could be a problem!'); // 输出 "Warning: This could be a problem!"

console.info()

console.info() 方法用于在控制台中输出信息消息。它与 console.log() 方法类似，但会在控制台中显示蓝色的信息消息。

console.info('Info: This is just for your information.'); // 输出 "Info: This is just for your information."

console.debug()

console.debug() 方法用于在控制台中输出调试信息。它与 console.log() 方法类似，但会在控制台中显示灰色的调试消息。

console.debug('Debug: This is for debugging purposes only.'); // 输出 "Debug: This is for debugging purposes only."

console.clear()

console.clear() 方法用于清除控制台中的所有输出。

console.clear(); // 清除控制台中的所有输出

console.dir()

console.dir() 方法用于在控制台中显示一个对象的详细信息。

const obj = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

console.dir(obj); // 输出对象的详细信息

console.dirxml()

console.dirxml() 方法用于在控制台中显示一个对象的详细信息，包括其子元素。

const obj = {
  name: 'John Doe',
  age: 30,
  city: 'New York',
  children: [
    {
      name: 'Jane Doe',
      age: 5
    },
    {
      name: 'John Doe Jr.',
      age: 3
    }
  ]
};

console.dirxml(obj); // 输出对象的详细信息，包括其子元素

console.group()

console.group() 方法用于在控制台中创建一个组。

console.group('Group 1'); // 创建一个名为 "Group 1" 的组
console.log('This is inside Group 1'); // 在 "Group 1" 组中输出信息
console.groupEnd(); // 结束 "Group 1" 组

console.groupEnd()

console.groupEnd() 方法用于结束一个组。

console.group('Group 1'); // 创建一个名为 "Group 1" 的组
console.log('This is inside Group 1'); // 在 "Group 1" 组中输出信息
console.groupEnd(); // 结束 "Group 1" 组

console.count()

console.count() 方法用于在控制台中统计一个字符串出现的次数。

console.count('Message'); // 统计 "Message" 字符串出现的次数
console.count('Message'); // 统计 "Message" 字符串出现的次数
console.count('Message'); // 统计 "Message" 字符串出现的次数
console.count('Another message'); // 统计 "Another message" 字符串出现的次数

console.time()

console.time() 方法用于在控制台中开始计时。

console.time('Timer 1'); // 开始计时 "Timer 1"

console.timeEnd()

console.timeEnd() 方法用于在控制台中结束计时。

console.time('Timer 1'); // 开始计时 "Timer 1"
// ... 代码执行 ...
console.timeEnd('Timer 1'); // 结束计时 "Timer 1"

console.table()

console.table() 方法用于在控制台中显示一个表格。

const data = [
  ['Name', 'Age'],
  ['John Doe', 30],
  ['Jane Doe', 25]
];

console.table(data); // 输出一个表格

console.assert()

console.assert() 方法用于在控制台中断言一个条件是否为真。如果条件为真，则不会输出任何内容；如果条件为假，则会输出错误消息。

console.assert(true, 'This is true'); // 不输出任何内容
console.assert(false, 'This is false'); // 输出错误消息 "Assertion failed: This is false"

console.trace()

console.trace() 方法用于在控制台中显示一个堆栈跟踪。

console.trace(); // 显示一个堆栈跟踪

总结

console 对象是一个强大的工具，可用于在浏览器控制台中输出信息、记录错误和调试应用程序。本文介绍了 console 对象的常用 API，包括 console.log()、console.error()、console.warn()、console.info()、console.debug()、console.clear()、console.dir()、console.dirxml()、console.group()、console.groupEnd()、console.count()、console.time()、console.timeEnd()、console.table()、console.assert() 和 console.trace() 方法。熟练掌握这些 API，可以帮助你轻松掌控浏览器控制台，成为一名 JavaScript 调试高手。