console的用法

1.console.log()

最常用的输出，用于打印普通信息。

console.log('Hello', 'World'); console.log('答案：', 42);

2.console.error(), console.warn(), console.info(), console.debug()

error：输出错误样式（红色，带错误图标）

warn：输出警告样式（黄色，带警告图标）

info：通常与 log 类似，某些环境带信息图标

debug：输出调试信息，一些控制台默认不显示

console.error('出错了！'); console.warn('注意边界情况'); console.info('这是提示'); console.debug('调试变量：', obj);

3.格式化输出

%s → 字符串

%d 或 %i → 整数

%f → 浮点数

%o 或 %O → 对象（可展开）

%c → CSS 样式

console.log('姓名：%s，年龄：%d', '张三', 25); console.log('%c红色大字', 'color: red; font-size: 20px');

4.对象/数组的清晰展示

console.dir()

以可展开的树形结构显示对象的属性和方法，尤其适合 DOM 元素。

const obj = { a: 1, b: { c: 2 } }; console.dir(obj); console.dir(document.body);

console.table()

将数组或对象以表格形式展示，便于对比数据。

const users = [ { name: 'Alice', age: 28 }, { name: 'Bob', age: 32 } ]; console.table(users);

5.计时与性能

console.time() / timeEnd() / timeLog()

标记一段代码的执行时间，可传入标签（默认 'default'）。

console.time('loop'); for (let i = 0; i < 1000000; i++) {} console.timeEnd('loop'); // loop: 2.3ms console.time('fetch'); fetch('https://api.example.com') .then(() => console.timeLog('fetch')) // 打印当前已耗时 .finally(() => console.timeEnd('fetch'));

6.console.clear()

清空控制台历史输出。