Console 面板Console 面板的作用 Console（控制台）是浏览器开发者工具中使用频率最高的面板之一，主要

Console 面板的作用

Console（控制台）是浏览器开发者工具中使用频率最高的面板之一，主要用于：

查看 JavaScript 错误和警告信息
输出调试信息（console.log 等）
执行 JavaScript 代码并查看返回结果
与页面进行交互式调试

1. 基本输出方法

console.log / warn / error / info

// 常规信息输出
console.log('Hello World');
console.log('姓名:', name, '年龄:', age);
console.log({ name: 'Alice', age: 25 });  // 输出对象
console.log([1, 2, 3, 4, 5]);             // 输出数组

// 警告信息（黄色背景 + 警告图标）
console.warn('API 即将废弃，请使用新版本');

// 错误信息（红色背景 + 错误图标）
console.error('数据加载失败:', error);

// 提示信息
console.info('当前版本:', version);

2. 高级输出方法

console.table() - 表格化显示

以表格形式显示数组或对象，适合查看结构化数据、API 返回的列表。

const users = [
  { name: 'Alice', age: 25, city: 'Beijing' },
  { name: 'Bob', age: 30, city: 'Shanghai' }
];
console.table(users);              // 显示所有列
console.table(users, ['name']);    // 只显示指定列

console.dir() - 查看对象属性

以对象属性形式显示，查看 DOM 元素时特别有用。

const element = document.querySelector('.box');
console.log(element);  // 显示 HTML 结构：<div class="box">...</div>
console.dir(element);  // 显示对象属性：className, children, style 等

console.group() - 分组输出

将多条日志分组折叠显示，便于组织复杂的调试信息。

console.group('用户信息');
  console.log('姓名:', 'Alice');
  console.log('年龄:', 25);
console.groupEnd();

console.groupCollapsed('详细信息');  // 默认折叠
  console.log('数据1');
  console.log('数据2');
console.groupEnd();

console.assert() - 断言

仅当条件为 false 时输出错误信息，用于验证参数或数据完整性。

const age = 15;
console.assert(age >= 18, '年龄必须大于等于 18');
// 输出: Assertion failed: 年龄必须大于等于 18

console.count() - 计数器

统计代码执行次数。

for (let i = 0; i < 3; i++) {
  console.count('循环');
}
// 输出: 循环: 1、循环: 2、循环: 3

console.countReset('循环');  // 重置计数器

console.time() - 计时器

测量代码执行时间，用于性能优化。

console.time('数据处理');
// ... 耗时操作
console.timeEnd('数据处理');
// 输出: 数据处理: 2.345ms

console.trace() - 堆栈跟踪

输出当前代码的调用堆栈，追踪函数调用链。

function funcA() { funcB(); }
function funcB() { funcC(); }
function funcC() { console.trace('调用堆栈'); }

funcA();
// 输出:
// funcC @ script.js:3
// funcB @ script.js:2
// funcA @ script.js:1

console.clear() - 清空

清空 Console 面板中的所有日志（快捷键：Ctrl + L / Cmd + K）。

3. 格式化输出

字符串替换符

console.log('我的名字是 %s', 'Alice');           // %s - 字符串
console.log('我今年 %d 岁', 25);                  // %d/%i - 整数
console.log('价格是 %f 元', 99.99);                // %f - 浮点数
console.log('用户: %o', { name: 'Alice' });       // %o - 对象

样式化输出

使用 %c 添加 CSS 样式。

console.log('%c 错误', 'color: red; font-size: 20px; font-weight: bold;');

// 多段样式
console.log(
  '%c 成功 %c 数据已保存',
  'background: green; color: white; padding: 2px 5px;',
  'color: green; font-weight: bold;'
);

4. 快捷变量

$0 -$ 4：最近选中的元素

$0  // Elements 面板中最近选中的元素
$1  // 倒数第二个选中的元素
// $2、$3、$4 依次类推

// 在 Elements 面板选中元素后
$0.style.background = 'red';     // 改变背景色
$0.classList.add('active');      // 添加 class

$() 和 $$()：快捷选择器

$('.box');       // 等同于 document.querySelector('.box')
$('#header');    // 选择 id 为 header 的元素

$$('.item');     // 等同于 document.querySelectorAll('.item')，返回数组
$$('div');       // 选择所有 div 元素

// 批量操作
$$('.item').forEach(el => el.style.color = 'red');

$_ ：上一次执行的结果

1 + 2            // 返回 3
$_               // 3

$('.box')                  // 返回元素
$_.style.color = 'red'     // 使用上次结果

$x()：XPath 选择器

$x('//div[@class="box"]');           // 选择 class 为 box 的所有 div
$x('//a[contains(@href, "https")]'); // 选择包含 https 的所有链接

5. 实用工具方法

copy() - 复制到剪贴板

const data = { name: 'Alice', age: 25 };
copy(data);  // 将对象复制到剪贴板（JSON 格式）

copy($$('.item'));  // 复制元素数组

keys() / values() - 获取对象的键/值

const user = { name: 'Alice', age: 25 };
keys(user);    // ['name', 'age']
values(user);  // ['Alice', 25]

monitor() - 监控函数调用

function greet(name) {
  return `Hello, ${name}`;
}

monitor(greet);       // 开始监控
greet('Alice');       // Console 输出: function greet called with arguments: Alice
unmonitor(greet);     // 停止监控

monitorEvents() - 监控 DOM 事件

const btn = $('.btn');
monitorEvents(btn);                         // 监控所有事件
monitorEvents(btn, 'click');                // 只监控 click 事件
monitorEvents(btn, ['click', 'mouseover']); // 监控多个事件
unmonitorEvents(btn);                       // 停止监控

getEventListeners() - 获取元素的事件监听器

const btn = $('.btn');
getEventListeners(btn);
// 返回: { click: [{ listener: ƒ, useCapture: false, ... }] }

// 查看所有 click 事件
getEventListeners(btn).click.forEach(event => {
  console.log(event.listener);
});

queryObjects() - 查找特定类型的对象

queryObjects(Promise);  // 查找所有 Promise 对象
queryObjects(Array);    // 查找所有 Array 对象

// 自定义类
class User {}
queryObjects(User);  // 返回所有 User 实例

使用场景：排查内存泄漏

6. Console 设置和过滤

日志级别过滤

Console 面板左上角的下拉菜单可以过滤不同级别的日志：

Verbose：显示所有（包括 console.debug）
Info：信息及以上
Warnings：警告和错误
Errors：仅显示错误

过滤关键词

在 Console 顶部的搜索框中输入关键词过滤日志：

普通搜索：用户
正则表达式：/^用户/
排除关键词：-数据
来源过滤：url:script.js

常用选项

开启方法：点击 Console 面板右上角的 设置图标（⚙️） 打开选项菜单

选项	说明	适用场景
Preserve log	页面刷新后不清空 Console	调试页面跳转、表单提交、重定向
Group similar messages	合并相同日志并显示重复次数	减少重复日志干扰，快速查看循环输出
Show CORS errors	在 Console 中显示跨域错误	调试跨域请求问题
Log XMLHttpRequests	记录所有 XMLHttpRequest 请求	追踪 AJAX 请求
Eager evaluation	输入时实时预览表达式结果	快速查看表达式值
Autocomplete from history	从历史记录自动补全	提高输入效率

7. Console 快捷键

快捷键	功能
`Ctrl + L` (Win) / `Cmd + K` (Mac)	清空 Console
`Ctrl + Shift + J` (Win)	打开开发者工具并聚焦到 Console
`Cmd + Option + J` (Mac)	打开开发者工具并聚焦到 Console
`↑` / `↓`	浏览历史命令
`Tab`	自动补全
`Shift + Enter`	多行输入（不执行）
`Enter`	执行代码
`Esc`	清空当前输入

8. Live Expression（实时表达式）

点击 Console 面板左上角的 眼睛图标，添加实时表达式，值会自动更新。

document.querySelectorAll('.item').length  // 实时显示元素数量
Date.now()                                 // 实时显示当前时间戳
performance.memory.usedJSHeapSize         // 实时显示内存使用

使用场景：监控页面实时数据、调试动态变化的值

总结

Console 面板是前端开发中最强大的调试工具，掌握核心功能可以显著提升开发效率。

核心功能：

基础输出：log、warn、error、info
高级输出：table、group、time、trace、assert
快捷变量： $0-$ 4、 $()、$$()、$ _、$x()
工具方法：copy、monitor、getEventListeners、queryObjects

实用技巧：

使用 console.table() 查看结构化数据
使用 console.time() 进行性能分析
使用 console.group() 组织复杂日志
善用快捷变量快速操作 DOM 元素
开启 Live Expression 监控实时数据

Console 面板