Chrome 高阶调试技巧

在日常前端开发中，console.log 往往是我们排查问题的首选工具。虽然它能解决大部分基础问题，但在面对复杂逻辑或异步场景时，不仅效率低下，还可能因为频繁修改代码而引入新的 Bug。本文将系统梳理断点调试的核心用法与高阶技巧，帮助你在不同的前端场景下精准定位问题，让调试效率实现质的飞跃。

---

1. 常用断点方式：精准定位代码执行流

1.1 条件断点（Conditional Breakpoint）

并非每次都需要暂停执行，我们可以设置仅在特定条件下触发断点，从而过滤掉无关的执行路径：

0. 在 Sources 面板中，点击行号设置普通断点。

1. 右键断点 → 选择 Edit breakpoint（编辑断点）。

2. 输入条件表达式，例如：

   • id > 100：只有当 id 大于 100 时才触发断点。
   • user.name === 'admin'：仅针对特定用户触发断点。
   • list.length > 10：数组长度超过 10 时才触发断点。

1.2 日志断点（Logpoint）

不暂停代码执行，仅打印日志信息，是替代临时 console.log 的最佳实践：

0. 右键行号 → 选择 Add logpoint。
1. 输入要打印的内容，如 '当前值:', x, y。
2. 代码执行到这里时会自动在控制台打印，但不会暂停运行。

核心优势 ：比手动添加 console.log 更方便，且无需修改源代码，避免了调试代码被误提交的风险！

1.3 网络请求断点（XHR/fetch Breakpoints）

用于追踪 API 请求的调用来源，快速锁定发起请求的代码位置：

0. 切换到 Sources 面板 → 右侧找到 XHR/fetch Breakpoints。
1. 点击 + 号，输入 URL 关键词（如 api/user）。
2. 当页面发起匹配该关键词的请求时，会自动触发断点。
3. 查看 Call Stack （调用堆栈），即可精准追溯到是哪里发起的请求。

1.4 事件监听器断点（Event Listener Breakpoints）

用于追踪用户交互（点击、鼠标移动、键盘输入等）触发的代码执行入口：

0. 切换到 Sources 面板 → 右侧找到 Event Listener Breakpoints。
1. 展开事件类别（如 Mouse）→ 勾选 click。
2. 当页面上触发该事件（例如点击按钮）时，会自动暂停执行。
3. 查看 Call Stack 面板，找到事件处理函数被调用的位置以及完整的调用链。

典型场景 ：不确定某个按钮的点击逻辑写在哪里时，开启 click 断点后点击按钮，就能直接停在对应的处理函数代码行。

2. Overrides（本地替换）

2.1 痛点场景

你有没有经历过这种绝望时刻？

• 线上出了 Bug，但在本地环境无法复现。
• 想快速验证一个 CSS 修复方案，但不想走繁琐的发布流程。
• 接口数据有问题，前端逻辑卡住，只能自己造假数据先顶着。
• 线上代码全是混淆后的，想插一句日志定位问题，简直比登天还难

Overrides 可以完美解决这些问题！

2.2 什么是 Overrides？

Overrides（本地替换）允许你在浏览器中 持久化修改 网页的 CSS、JS、HTML 等资源。最关键的是只要控制台保持开启，刷新页面后你的修改依然保留，一旦关闭控制台，网页将恢复为线上原始状态。这简直堪称完美的调试利器！

2.3 配置步骤

打开 DevTools 并设置文件夹

0. 按 F12 或 Cmd + Option + I（Mac）打开开发者工具。
1. 切换到 Sources（源代码/来源）面板。
2. 点击左侧的 Overrides（替换）标签。
3. 点击 + Select folder for overrides ，选择一个本地空文件夹（建议专门建一个 chrome-overrides 文件夹）。
4. 在弹出的提示框中点击 允许 ，授权 Chrome 访问该文件夹。

2.4 三种核心使用方式

方式一：修改 CSS

场景：快速验证样式修改方案。

0. 切换到 Elements（元素）面板。
1. 选中要修改的元素。
2. 在右侧 Styles（样式）面板中修改 CSS。
3. 找到来自 .css 文件的规则文件。
4. 刷新页面，修改仍然生效！

当你经常浏览的网站没有护眼模式 这时候可以手搓一个了

方式二：修改 JS 文件

场景 ：在线上代码中加 console.log 定位问题。

0. 在 Sources 面板的 Page（网页）标签中找到目标 JS 文件。
1. 右键点击该文件 → 选择 Override content（替换内容）。
2. 直接在编辑器中修改代码，加入调试语句。
3. 按 Cmd + S（Mac）或 Ctrl + S（Windows）保存。
4. 刷新页面，你的修改即刻生效。

方式三：Mock API 响应

场景：后端接口有问题，想用假数据测试前端逻辑。

0. 切换到 Network（网络）面板。
1. 刷新页面，找到要拦截的 API 请求。
2. 右键点击该请求 → 选择 Override content（替换内容）。
3. 在打开的编辑器中修改返回的 JSON 数据。
4. 按 Cmd + S / Ctrl + S 保存。
5. 刷新页面，该接口将返回你修改的假数据！

3. Snippets（代码片段）

在浏览器调试中，如果有一些公共的逻辑需要经常用到，你可以把代码保存在 Snippets 中。当你在任何一个页面需要运行它的时候，可以直接执行。 示例 ：获取当前页面的所有图片链接，可以将这段代码存储起来。 使用方法 ：快捷键 Command + P (Mac) / Ctrl + P (Win)，输入 ! 字符，搜索你要执行的代码片段名称，选择后即可执行。

4. 控制台面板（Console）

控制台面板主要用于调试 JavaScript 代码，是使用频率极高的核心调试工具 。

• 运行代码：可执行任意 JS 代码，包括调用页面已有的 JS 对象和函数。
• Console 输出：代码中的 Console 日志、异常错误都会在这里输出。

4.1 常用 console 函数

函数	说明
console.log(str)	控制台输出一条消息
console.error(str)	打印一条错误信息，类似的还有 info、warn
console.table(data [, columns])	将数据以表格的形式显示，非常实用。data 为数组或对象，第二个参数（数组）可指定输出的列
console.dir(object)	以树形方式打印对象，特别是 DOM 对象时非常实用
console.assert(false, 'msg')	断言输出，仅当第一个参数为 false 时才会输出后面的信息
console.trace()	输出当前位置的执行堆栈（用断点会更实用一些）
console.time(label)	计时器，用来计算耗时（毫秒）。配合 timeLog(计时) 和 timeEnd(结束) 使用
console.clear()	清空控制台，并输出 "Console was cleared"

基础console输出示例：

console.log('log'); // 最普通的日志输出（默认黑色字体），用于常规调试信息 
console.info('info'); // 提示性信息输出（部分浏览器会带一个蓝色的 'i' 图标） 
console.warn('warn'); // 警告信息输出（通常显示为黄色字体或带黄色警告图标），提醒潜在问题 
console.error('error'); // 错误信息输出（通常显示为红色字体并带有堆栈追踪），表示出现了严重错误 
throw new Error('报错了！！！'); // 主动抛出一个运行时异常，这会立刻中断当前程序的执行，并将错误信息输出到控制台

耗时计算示例：

function sum(n) {
  let sum = 0;
  for (let i = 1; i <= n; i++) {
    let u = { name: 'sam', age: i };
    sum += i;
  }
  return sum;
}
​
// 计算一个函数的耗时
console.time('sum'); // 【开始掐表】准备跑 1 到 100,000 的马拉松 
const total = sum(100000); // 【起跑并冲线】完成 1 到 100,000 的累加计算 
console.timeLog('sum'); // 【看第一块秒表】记录跑完 1 到 100,000 花了多久 (4.43ms) 
const total2 = sum(1000); // 【继续跑】又跑了一次 1 到 1,000 的累加计算 
console.timeEnd('sum'); // 【停止掐表】记录从最开始到现在，总共花了多久 (5.04ms)

4.2 进阶日志技巧：提升可读性

在调试时，如果仅输出变量的值，往往难以快速定位其对应的变量名。此时，推荐使用 ES6 的对象简写属性（字面量对象）进行包装，这样控制台会清晰地展示键值对，可读性大幅提升。若结合 console.table 方法处理结构化数据，排查问题的效率将更上一层楼。

const name = '张三', age = '18';
console.table({ name, age }); // 表格形式展示

4.3 自定义 Log 样式：格式化占位符

console 方法内置了丰富的格式化占位符，允许开发者在输出日志时灵活控制数据类型与展示样式。以下是各占位符的详细说明及对应的执行示例：

占位符	描述
%c	CSS 样式应用。该占位符会消费后续的参数作为 CSS 规则，从而为输出的文本添加自定义样式（如颜色、字体大小等）。
%o 或 %O	对象输出。用于打印 JavaScript 对象，在浏览器控制台中点击对象名称即可展开查看其内部属性与详细信息。
%d 或 %i	整数输出。将参数格式化为整数，支持类似 C 语言的数字补零等格式化操作。
%s	字符串输出。将传入的参数强制转换为字符串形式进行打印。
%f	浮点数输出。将参数格式化为浮点数，支持指定小数点后的保留位数。

---

5. 总结：构建系统化的调试思维

掌握 Chrome DevTools 的各项功能，不仅仅是学习几个快捷键或面板操作，更是为了构建一套系统化、工程化的前端调试思维。从基础的 console.log 到精准的断点控制，再到 Overrides 的线上代码热修复，这些工具共同构成了现代前端开发者不可或缺的"武器库"。