Chrome开发者工具控制台API完全指南

原创于 2025-06-24 09:37:35 发布 · 360 阅读

7 ·

CC 4.0 BY-SA版权

Chrome开发者工具控制台API完全指南

前言

作为前端开发者，控制台(console)是我们日常调试不可或缺的工具。Chrome开发者工具提供了一套强大的控制台API，可以帮助我们更高效地进行代码调试、性能分析和问题排查。本文将全面介绍这些API的使用方法和实际应用场景。

基础日志输出

console.log() - 基础日志

console.log()是最常用的控制台输出方法，支持多种格式：

// 基础用法
console.log("普通日志信息");

// 使用占位符
const user = "张三";
const points = 100;
console.log("用户 %s 有 %d 积分", user, points);

// 带样式的输出
console.log("%c这是带样式的文本", "color: red; font-size: 20px;");

占位符类型说明：

%s - 字符串
%d/%i - 整数
%f - 浮点数
%o - DOM元素
%O - JavaScript对象
%c - CSS样式

其他日志级别

除了log()，控制台还提供了不同级别的日志方法：

console.debug("调试信息");  // 等同于log()
console.info("提示信息");   // 等同于log()
console.warn("警告信息");   // 带黄色警告图标
console.error("错误信息");  // 带红色错误图标和堆栈跟踪

调试辅助方法

console.assert() - 断言

当表达式为false时输出错误信息：

const list = document.querySelector('#myList');
console.assert(list.childNodes.length < 10, "列表项过多");

console.trace() - 堆栈跟踪

打印调用堆栈，帮助理解代码执行流程：

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

性能分析工具

console.time() & console.timeEnd() - 计时器

测量代码执行时间：

console.time("数组初始化");
const arr = new Array(1000000).fill().map((_, i) => i);
console.timeEnd("数组初始化");

console.profile() & console.profileEnd() - CPU分析

记录JavaScript CPU使用情况：

function heavyCalculation() {
  console.profile("复杂计算");
  // 执行复杂计算
  console.profileEnd();
}

结构化输出

console.dir() - 对象结构

以可展开的树形结构显示对象：

console.dir(document.body);

console.table() - 表格输出

以表格形式显示数组或对象：

const users = [
  {name: "张三", age: 25},
  {name: "李四", age: 30}
];
console.table(users);

日志分组

console.group() - 日志分组

将相关日志分组显示：

console.group("用户认证");
console.log("验证用户名");
console.log("验证密码");
console.groupEnd();

console.groupCollapsed("折叠分组"); // 默认折叠的分组
console.log("分组内容");
console.groupEnd();