浏览器开发者工具隐藏技巧，你可能只用了一成

Chrome DevTools是每个前端开发天天在用的工具，但大部分人只用了Elements看DOM、Console打日志、Network看请求。

其实DevTools的功能远不止这些。今天分享一些你可能不知道的实用技巧。

Console的高级用法

javascript 复制代码

// 表格形式展示数组/对象
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变化时自动断点：

csharp 复制代码

右键元素 → Break on →
  subtree modifications（子节点变化时断点）
  attribute modifications（属性变化时断点）
  node removal（节点被删除时断点）

排查"谁改了DOM"特别好用。

Sources面板的断点技巧

javascript 复制代码

// 条件断点：右键行号 → Add conditional breakpoint
// 输入条件：user.id === 123
// 只有条件为true时才暂停

// 日志断点：右键行号 → Add logpoint
// 输入：'当前用户:', user.name
// 不暂停执行，只在Console打印

// DOM断点：在Elements面板右键 → Break on
// 和前面一样

// XHR/Fetch断点：Sources面板右侧 → XHR/fetch Breakpoints
// 输入URL关键字，匹配的请求会自动断点

Performance面板：性能分析

录制一段操作，分析每一帧的耗时：

markdown 复制代码

1. 点击Performance面板的录制按钮
2. 执行你的操作
3. 点击停止
4. 分析火焰图

关键指标：

指标	含义	目标
FCP	首次内容绘制	< 1.8s
LCP	最大内容绘制	< 2.5s
TBT	总阻塞时间	< 200ms
CLS	累积布局偏移	< 0.1

Memory面板：内存分析

markdown 复制代码

三种分析模式：
1. Heap Snapshot ------ 堆快照，看对象占用情况
2. Allocation instrumentation ------ 实时追踪内存分配
3. Sampling ------ 采样分析

排查内存泄漏的步骤：

markdown 复制代码

1. 操作前拍一次Heap Snapshot
2. 执行操作（比如反复打开关闭弹窗）
3. 再拍一次Heap Snapshot
4. 选Comparison视图，对比两次快照
5. 找到增长最多的对象类型
6. 查看引用链，定位泄漏源

Network面板的实用功能

markdown 复制代码

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面板

css 复制代码

功能：
├── Storage ------ 清除所有存储（一键清空）
├── Local Storage ------ 查看/编辑LocalStorage
├── Session Storage ------ 查看/编辑SessionStorage
├── Cookies ------ 查看/编辑Cookie
├── Service Workers ------ 调试SW
└── Background Services ------ 后台任务

Lighthouse：一键审计

markdown 复制代码

1. 打开Lighthouse面板
2. 选择要审计的类别（Performance/SEO/Accessibility等）
3. 点击"Analyze page load"
4. 等待生成报告

报告包含：性能评分、SEO检查、无障碍检查、最佳实践检查，每项都有具体优化建议。

设备模拟

markdown 复制代码

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的隐藏技巧？分享一下。