DVkToolkit
← 返回博客
·前端工具

浏览器开发者工具高级用法：从 Console 到 Performance

浏览器开发者工具不只是 console.log。本文深入讲解 Console、Elements、Network、Sources、Performance 等面板的高级技巧，帮你成为调试高手。

#DevTools#浏览器#前端开发#调试

为什么 DevTools 值得单独写一篇

很多人用 DevTools 只会 console.log 和看 Network，功能其实深得多。

下面这些是我实际调试中每天在用的，不是官方文档抄一遍。

Console 不只是 console.log

console.table() 打印表格数据

数组对象用 console.log 展开很累，console.table() 直接渲染成表格：

const users = [

{ id: 1, name: '张三', role: 'admin' },

{ id: 2, name: '李四', role: 'user' },

];

console.table(users);

// 还能指定显示的列：

console.table(users, ['name', 'role']);

console.time() / console.timeEnd() 测性能

比在代码里算时间戳优雅得多：

console.time('fetchData');

await fetchData();

console.timeEnd('fetchData'); // 输出：fetchData: 234ms

console.trace() 看调用栈

不知道某个函数是谁调用的？在函数里加一句 console.trace()，调用链直接打出来。

$_ 引用上一次求值结果

在 Console 面板里，$_ 是上一次执行结果的引用：

document.querySelector('.btn') // 返回 <button>

$_.click() // 直接操作上一步的结果

类似地，$0 到 $4 是最近五次在 Elements 面板选中的元素引用。

Elements 面板高级技巧

拖拽调整布局

在 Elements 里可以直接拖拽 DOM 节点调整顺序，比在代码里改快得多——调整好之后再同步回代码。

强制改变状态（:hover / :active）

看按钮的 hover 样式，但鼠标一移开样式就消失——在 Elements 面板里点 :hov，可以强制让元素保持 :hover / :active / :focus 状态。

查看实际计算样式

Styles 面板里满是你的 CSS 和继承来的样式，找最终生效的值很累。切到 Computed 面板，搜属性名，直接显示最终计算值，以及是哪个规则覆盖的。

临时改样式实时预览

在 Styles 面板里直接编辑 CSS，页面实时更新。调试好之后再复制到代码里。比改代码 → 刷新 → 再看效果快得多。

Network 面板

按耗时排序找慢请求

默认按请求顺序排，找最慢的请求要点很多次。点 Time 列头按耗时排序，最慢的排最前面。

过滤请求类型

工具栏有一排按钮：XHR、JS、CSS、Img、Media……点 XHR 就只看接口请求，调接口时非常有用。

禁用缓存（DevTools 打开时默认禁用）

开发时 Network 面板打开的情况下，Disable cache 是勾选状态——这就是为什么有些人说"打开 DevTools 之后问题就消失了"，就是缓存的原因。

右键请求 → Copy → Copy as cURL

这个功能太好用了：选中一个请求，右键 → Copy → Copy as cURL，直接生成对应的 cURL 命令，可以用来在终端里复现请求（比如 Cookie、Header 都带上了）。

Sources 面板（调试 JS）

断点不只能用 click 事件

在 Sources 面板打开 JS 文件，点行号设断点。但更实用的是：

  • 条件断点：右键行号 → Add conditional breakpoint，只有条件满足时才停下来。比如 `userId === 123`，只有这个用户时才断住，不然每次都停下很烦。
  • 日志断点（Chrome 106+）：右键行号 → Add logpoint，输入 `User ID: {userId}`，不用改代码就能打印变量，而且不会打断执行。

    • XHR/Fetch 断点

    在 Sources 右侧的 XHR/Fetch Breakpoints 里加一个 URL 包含的关键词（比如 /api/login），只要发出匹配的请求，自动断住，不用手动去 Sources 里找对应的 JS 文件。

    调试压缩后的代码

    线上代码都是压缩过的，变量名全变成了 a、b。在 Sources 面板里点 {}（Pretty print），浏览器会把压缩代码格式化，方便调试。

    更高级的：用 source map。如果构建工具（Vite/Webpack）配了 source map，DevTools 可以直接映射到源码，断点打在源码上也能命中。

    Performance 面板（性能分析）

    录一段操作找卡顿

  • 打开 Performance 面板

    • 2. 点圆形录制按钮（或 Ctrl+Shift+E）

    3. 操作页面（比如滚动、点击按钮）

    4. 停止录制

    看 Main 那条时间线，哪个任务长了（超过 50ms 就有可能掉帧），点进去看详情。

    LCP 和 CLS 直接在报告里看

    Web Vitals 扩展能测，但 DevTools 的 Lighthouse 面板（Audits 面板改的名字）也能跑一份完整的性能报告，包含 LCP、CLS、FCP 等指标，还有优化建议。

    Application 面板（存储相关）

    LocalStorage / SessionStorage 直接编辑

    在 Application → Storage 里可以查看、编辑、删除 LocalStorage 和 SessionStorage，不用写 JS 去 clear()。

    Cookie 查看与编辑

    Application → Cookies 里能看到所有 Cookie 的详情：Name、Value、Domain、Path、Expires、Size、HttpOnly、Secure、SameSite。

    调试登录问题时经常来这里：看看 Token 存到哪个 Cookie 里了，HttpOnly 是不是设了（设了 JS 就读不到），SameSite 是不是 Lax（跨站请求会带不上）。

    一键清存储

    Clear site data 按钮（Application 面板底部）可以一键清掉 LocalStorage、Cookie、IndexedDB——不用去浏览器设置里找"清除浏览数据"。

    移动端调试

    模拟移动设备

    Ctrl+Shift+M（或点 DevTools 左上角的设备图标）进入设备模拟模式，可以选设备型号（iPhone、iPad、Galaxy 等），调整分辨率、DPR。

    但模拟终究是模拟，真机调试还是得做。

    远程调试安卓设备

  • 安卓手机打开开发者模式 + USB 调试

    • 2. 电脑 Chrome 访问 chrome://inspect/#devices

    3. 手机同意调试授权

    4. 手机 Chrome 里打开的页面会出现在电脑 DevTools 里，点 inspect 就能调试

    iOS 的 Safari 同理，在 Mac 的 Safari → 开发菜单里能看到连接的设备。

    总结

    上面这些是我实际调试中每天在用的。DevTools 能做的事情远不止这些，但掌握这些已经能解决 80% 的调试场景了。

    > **Pro Tip**: 按 Ctrl+Shift+P（Mac: Cmd+Shift+P）打开 DevTools 的命令面板，能搜到所有功能——比如 Screenshot 可以截整个页面的长截图，不用额外装插件。