Chrome DevTools是每个前端开发天天在用的工具，但大部分人只用了Elements看DOM、Console打日志、Network看请求。
其实DevTools的功能远不止这些。今天分享一些你可能不知道的实用技巧。
Console的高级用法
// 表格形式展示数组/对象
console.table(users);
console.table(document.querySelectorAll('a'), ['href', 'textContent']);
// 计时
console.time('操作耗时');
// ... 执行一些操作
console.timeEnd('操作耗时'); // 输出：操作耗时: 12.345ms
// 分组
console.group('用户信息');
console.log('姓名:', user.name);
console.log('年龄:', user.age);
console.groupEnd();
// 按样式输出
console.log('%c重要提示', 'color: red; font-size: 20px; font-weight: bold;');
// 复制数据到剪贴板
copy(JSON.stringify(largeData, null, 2));
// 监控函数调用
monitor(functionName); // 每次调用都会在Console打印参数
Elements面板的断点调试
不只是看DOM——可以在DOM变化时自动断点：
右键元素 → Break on →
subtree modifications（子节点变化时断点）
attribute modifications（属性变化时断点）
node removal（节点被删除时断点）
排查"谁改了DOM"特别好用。
Sources面板的断点技巧
// 条件断点：右键行号 → Add conditional breakpoint
// 输入条件：user.id === 123
// 只有条件为true时才暂停
// 日志断点：右键行号 → Add logpoint
// 输入：'当前用户:', user.name
// 不暂停执行，只在Console打印
// DOM断点：在Elements面板右键 → Break on
// 和前面一样
// XHR/Fetch断点：Sources面板右侧 → XHR/fetch Breakpoints
// 输入URL关键字，匹配的请求会自动断点
Performance面板：性能分析
录制一段操作，分析每一帧的耗时：
1. 点击Performance面板的录制按钮
2. 执行你的操作
3. 点击停止
4. 分析火焰图
关键指标：
| 指标 | 含义 | 目标 |
|---|---|---|
| FCP | 首次内容绘制 | < 1.8s |
| LCP | 最大内容绘制 | < 2.5s |
| TBT | 总阻塞时间 | < 200ms |
| CLS | 累积布局偏移 | < 0.1 |
Memory面板：内存分析
三种分析模式：
1. Heap Snapshot —— 堆快照，看对象占用情况
2. Allocation instrumentation —— 实时追踪内存分配
3. Sampling —— 采样分析
排查内存泄漏的步骤：
1. 操作前拍一次Heap Snapshot
2. 执行操作（比如反复打开关闭弹窗）
3. 再拍一次Heap Snapshot
4. 选Comparison视图，对比两次快照
5. 找到增长最多的对象类型
6. 查看引用链，定位泄漏源
Network面板的实用功能
1. 模拟弱网：Network conditions → Slow 3G
2. 模拟离线：Offline
3. 拦截请求：右键请求 → Block request URL
4. 修改响应：右键请求 → Override content
5. 复制为cURL：右键请求 → Copy → Copy as cURL
6. 重发请求：右键请求 → Replay XHR
7. 按时间线过滤：用瀑布图定位加载瓶颈
Application面板
功能：
├── Storage —— 清除所有存储（一键清空）
├── Local Storage —— 查看/编辑LocalStorage
├── Session Storage —— 查看/编辑SessionStorage
├── Cookies —— 查看/编辑Cookie
├── Service Workers —— 调试SW
└── Background Services —— 后台任务
Lighthouse：一键审计
1. 打开Lighthouse面板
2. 选择要审计的类别（Performance/SEO/Accessibility等）
3. 点击"Analyze page load"
4. 等待生成报告
报告包含：性能评分、SEO检查、无障碍检查、最佳实践检查，每项都有具体优化建议。
设备模拟
1. 点击Toggle device toolbar（Ctrl+Shift+M）
2. 选择设备型号（iPhone 14、Pixel 5等）
3. 模拟触摸事件
4. 自定义分辨率和DPR
实用快捷键
| 快捷键 | 功能 |
|---|---|
| Ctrl+Shift+P | 命令面板（搜功能） |
| Ctrl+O | 快速打开文件 |
| Ctrl+G | 跳转到行号 |
| Ctrl+F | 在文件中搜索 |
| Ctrl+Shift+F | 全局搜索 |
| F8 | 继续执行 |
| F10 | 单步跳过 |
| F11 | 单步进入 |
DevTools是前端开发最重要的工具，用好它能大幅提升效率。建议花一个小时把每个面板都点一遍，你会发现很多之前不知道的功能。
你们还有哪些DevTools的隐藏技巧？分享一下。
