Chrome DevTools 高级调试技巧：从入门到真香

作为前端开发者，Chrome DevTools 是我们每天都在用的工具。但你真的用到位了吗？本文将分享一些实用的调试技巧，特别是 Overrides（本地替换） 功能，让你调试线上问题时不再抓瞎。

一、Overrides（本地替换）------ 调试线上代码的神器

1.1 痛点场景

你是否遇到过这些情况：

线上出 bug 了，但本地复现不了
想快速验证一个 CSS 修复方案，但不想走发布流程
后端接口返回的数据有问题，想 mock 一下测试前端逻辑
想在线上环境加几行 console.log 定位问题

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

1.2 什么是 Overrides

Overrides（本地替换）允许你在浏览器中 持久化修改 网页的 CSS、JS、HTML 等资源。关键是：刷新页面后修改仍然保留。

1.3 配置步骤

Step 1：打开 DevTools 并设置文件夹

按 F12 或 Cmd+Option+I（Mac）打开 DevTools
切换到 Sources（源代码/来源） 面板
点击 Overrides（替换） 标签
点击 「+ Select folder for overrides」
选择一个本地空文件夹（建议专门建一个 chrome-overrides 文件夹）
点击 「允许」 授权 Chrome 访问

Step 2：启用本地替换

确保 「Enable Local Overrides」 复选框已勾选 ✅

1.4 三种使用方式

方式一：修改 CSS（最常用）

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

切换到 Elements（元素） 面板
选中要修改的元素
在右侧 Styles（样式） 面板中修改 CSS
找到来自 .css 文件的规则（会显示文件名如 style.css:123）
右键点击 CSS 规则 → 选择 「Save for overrides」
刷新页面，修改仍然生效！

css 复制代码

/* 修改前 */
.button {
  background: #ccc;
}

/* 修改后 - 刷新页面依然是红色 */
.button {
  background: red;
}

方式二：修改 JS 文件

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

在 Sources 面板的 Page（网页） 标签中找到 JS 文件
右键点击文件 → 选择 「Override content（替换内容）」
直接编辑代码，加入调试语句
按 Cmd+S 保存
刷新页面，你的修改生效了

javascript 复制代码

// 在关键位置加入调试代码
function handleClick(data) {
  console.log('🔥 handleClick 被调用，参数:', data)  // 新增
  // 原有逻辑...
}

方式三：Mock API 响应（超实用！）

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

切换到 Network（网络） 面板
刷新页面，找到要拦截的 API 请求
右键点击请求 → 选择 「Override content（替换内容）」
修改返回的 JSON 数据
Cmd+S 保存
刷新页面，该接口会返回你修改的假数据！

json 复制代码

// 原始响应
{
  "code": 200,
  "data": []
}

// 修改后 - 模拟有数据的情况
{
  "code": 200,
  "data": [
    {"id": 1, "name": "测试数据1"},
    {"id": 2, "name": "测试数据2"}
  ]
}

1.5 文件夹结构

Overrides 会按域名自动组织文件：

bash 复制代码

chrome-overrides/
├── www.example.com/
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── app.js
└── api.example.com/
    └── v1/
        └── users    ← API 响应也能保存

1.6 注意事项

要点	说明
仅本地生效	修改只在你的浏览器生效，不影响其他人
刷新保留	关闭浏览器再打开，修改仍在
禁用方法	取消勾选「Enable Local Overrides」即可恢复原始内容
清理方法	右键 Overrides 文件夹 → 「Clear」删除所有覆盖
识别标志	被覆盖的文件旁边会有紫色圆点 🟣

二、控制台魔法命令

2.1 `$0` - 快速访问选中元素

在 Elements 面板选中任意元素后，控制台直接输入：

javascript 复制代码

$0              // 当前选中的元素
$0.innerText    // 获取文字
$0.style.color = 'red'  // 修改样式
$0.click()      // 触发点击
$1              // 上一个选中的元素
$2              // 上上个...以此类推到 $4

2.2 `copy()` - 复制任意数据到剪贴板

javascript 复制代码

// 复制元素的 HTML
copy($0.outerHTML)

// 复制格式化的 JSON
copy(JSON.stringify(data, null, 2))

// 复制所有 Cookie
copy(document.cookie)

// 复制页面所有图片链接
copy([...document.images].map(img => img.src).join('\n'))

2.3 `$$()` - 简化版 querySelectorAll

javascript 复制代码

// 获取所有按钮
$$('button')

// 获取所有链接的 href
$$('a').map(a => a.href)

// 获取所有图片的 src
$$('img').map(img => img.src)

// 批量操作
$$('.ad-banner').forEach(el => el.remove())  // 删除所有广告

2.4 `console.table()` - 表格展示数据

javascript 复制代码

// 比 console.log 清晰 100 倍
console.table([
  { name: '张三', age: 20, city: '北京' },
  { name: '李四', age: 25, city: '上海' },
  { name: '王五', age: 30, city: '广州' }
])

2.5 `console.time()` - 性能计时

javascript 复制代码

console.time('数据加载')
await fetchData()
console.timeEnd('数据加载')  
// 输出: 数据加载: 123.45ms

三、断点调试进阶

3.1 条件断点

不是每次都断，只在特定条件下断：

Sources 面板，点击行号设置断点
右键断点 → 「Edit breakpoint（编辑断点）」
输入条件表达式

javascript 复制代码

// 只有当 id 大于 100 时才断点
id > 100

// 只有特定用户才断点
user.name === 'admin'

// 数组长度超过 10 才断点
list.length > 10

3.2 日志断点（Logpoint）

不暂停执行，只打印日志：

右键行号 → 「Add logpoint」
输入要打印的内容：'当前值:', x, y
代码执行到这里时自动打印，但不会暂停

比手动加 console.log 方便，而且不用改代码！

3.3 XHR/Fetch 断点

追踪 API 请求的调用来源：

Sources 面板 → 右侧 「XHR/fetch Breakpoints」
点击 + ，输入 URL 关键词（如 api/user）
发起匹配请求时自动断点
查看 Call Stack 找到是哪里发起的请求

3.4 DOM 断点

监控元素何时被修改：

Elements 面板，右键目标元素
选择 「Break on（发生中断的条件）」 ：
- Subtree modifications：子元素变化时断点
- Attribute modifications：属性（class/style）变化时断点
- Node removal：元素被删除时断点

场景：某个元素莫名其妙消失了，用 DOM 断点找出是谁删的！

四、监控函数和事件

4.1 `monitor()` - 监控函数调用

javascript 复制代码

// 监控 fetch 的每次调用
monitor(fetch)
// 输出: function fetch called with arguments: Request...

// 取消监控
unmonitor(fetch)

4.2 `monitorEvents()` - 监控元素事件

javascript 复制代码

// 监控选中元素的点击事件
monitorEvents($0, 'click')

// 监控多个事件
monitorEvents($0, ['click', 'mouseover', 'mouseout'])

// 监控所有事件（慎用，输出很多）
monitorEvents($0)

// 取消监控
unmonitorEvents($0)

五、其他实用技巧

5.1 强制元素状态

调试 :hover、:active 等伪类样式：

Elements 面板，选中元素
点击 :hov 按钮（或右键 → 「Force state」）
勾选 :hover / :active / :focus / :visited
元素保持该状态，方便调试悬停样式

5.2 截图功能

按 Cmd+Shift+P 打开命令面板，输入：

命令	功能
`Capture screenshot`	截取当前视口
`Capture full size screenshot`	截取整个页面（长截图）
`Capture node screenshot`	截取选中元素

5.3 网络限速

模拟弱网环境：

Network 面板
点击 「No throttling」 下拉框
选择 「Slow 3G」 或 「Fast 3G」
或者自定义网速

5.4 阻止请求

测试资源加载失败的情况：

Network 面板，右键某个请求
「Block request URL」 - 阻止这个具体请求
「Block request domain」 - 阻止整个域名的请求

六、快捷键速查表

快捷键	功能
`Cmd+Shift+P`	打开命令面板
`Cmd+P`	快速打开文件
`Cmd+Shift+F`	全局搜索
`Cmd+F`	当前文件搜索
`Cmd+S`	保存修改
`Cmd+Z`	撤销
`F8`	继续执行
`F10`	单步跳过
`F11`	单步进入
`Shift+F11`	单步跳出
`Cmd+\`	暂停/继续

七、总结

技巧	适用场景	实用指数
Overrides	调试线上代码、Mock API	⭐⭐⭐⭐⭐
`$0`	快速操作选中元素	⭐⭐⭐⭐⭐
`copy()`	导出数据到剪贴板	⭐⭐⭐⭐
条件断点	精准调试特定情况	⭐⭐⭐⭐
XHR 断点	追踪 API 调用来源	⭐⭐⭐⭐
DOM 断点	找出谁修改了元素	⭐⭐⭐⭐
Logpoint	不改代码打日志	⭐⭐⭐⭐
强制状态	调试悬停样式	⭐⭐⭐

写在最后

Chrome DevTools 的功能远不止这些，但掌握以上技巧已经能覆盖 90% 的调试场景。特别是 Overrides 功能，真的是调试线上问题的神器，强烈建议大家试试！

如果这篇文章对你有帮助，欢迎点赞收藏 👍

有问题欢迎评论区交流～

Chrome DevTools 高级调试技巧：从入门到真香