浏览器开发者工具：前端的 IDE + JVisualVM

为什么这节对 Java 开发者重要

后端出问题，你有一整套成熟的武器：IntelliJ 的 Debug、JVisualVM 看内存、Arthas 抓线程、Postman 发请求。到了前端，这些东西全部整合在一个工具里——Chrome DevTools。

一句话类比：

DevTools ≈ IntelliJ Debugger + JVisualVM + Postman + Fiddler + javap

下面按面板拆开，每块都给 Java 对照物。

打开方式：Windows 下 F12 或 Ctrl + Shift + I，Mac 下 Cmd + Option + I。

1. Elements：看 DOM 和 CSS

功能：查看/编辑页面的 HTML 结构和 CSS 样式
Java 对照：没有完全对应物，勉强像 Swing 里直接看组件树

核心用法：

• 选中元素：点左上角箭头图标，然后点页面任意位置，对应 DOM 节点会在面板里高亮
• 实时改样式：右侧 Styles 面板里直接改 CSS，页面立刻刷新。改错了也没事，刷新页面就回来了
• 盒模型：右下角的方框显示 margin / border / padding / content 的实际像素值，布局对不齐时第一个要看的地方
• Computed：看最终生效的样式。Styles 里可能有十条 color 规则互相覆盖，Computed 直接告诉你赢的是哪条

Vue 场景：发现某个按钮颜色不对，先在 Elements 里改 Tailwind 类名试出正确样式，再回代码里改。比"改代码 → 保存 → 刷新"快一个数量级。

2. Console：日志 + 交互式 REPL

功能：看 console.log 输出、跑任意 JS 代码
Java 对照：System.out + Groovy Console + Arthas 的 exec

最常用的三件事：

// 1) 打日志
console.log('user', user)
console.table(users)        // 数组/对象以表格展示，看字段多的对象特别爽
console.warn('deprecated')  // 黄色
console.error('boom')       // 红色 + 堆栈

// 2) 分组与计时
console.group('fetchUser')
console.time('db')
// ... 代码 ...
console.timeEnd('db')       // 输出：db: 12.34 ms
console.groupEnd()

// 3) 断言
console.assert(list.length > 0, 'list should not be empty')

交互式求值：Console 本身就是个 JS REPL。随便敲 document.querySelectorAll('a').length 能直接返回页面上的链接数。类比 Arthas 里 getstatic 一个字段那种"活体检查"。

隐藏技巧：

• $0 代表 Elements 面板里当前选中的 DOM 节点，$1 ~ $4 是历史选中
• $('div.foo') 是 document.querySelector 的缩写
• $('div.foo') 是 document.querySelectorAll 的缩写
• copy(obj) 把对象 JSON 化后复制到剪贴板，懒得在日志里滚屏时贼好用

3. Sources：断点调试

功能：在源代码上打断点、单步执行、看变量
Java 对照：IntelliJ 的 Debugger，几乎一一对应

面板结构：

• 左侧：文件树（Page 标签页下能看到当前页面加载的所有脚本）
• 中间：源码区，点行号即可打断点
• 右侧：调用栈、作用域变量、Watch 表达式、断点列表

Java 开发者熟悉的按钮全在：

断点类型（比 IntelliJ 还细）：

• 行断点：点行号
• 条件断点：右键行号 → Add conditional breakpoint，输入布尔表达式，满足才停
• 日志点 Logpoint：打一个"断点"但不真的停，只输出日志。写 user.id = {user.id}，等效于临时加了条 console.log 又不用改源码
• DOM 断点：Elements 面板右键节点 → Break on → subtree modifications，DOM 一变动就停，定位"谁改了这个元素"的神器
• XHR 断点：Sources 右侧 XHR/fetch Breakpoints，某个 URL 发请求时停下，定位"谁发的这个请求"

Vue 场景：Vite dev 下源码带 source map，能直接在 .vue 文件的 <script> 里打断点，不是在编译后的混乱 JS 里。这点非常舒服。

4. Network：抓包

功能：看每个 HTTP / WebSocket 请求的请求头、响应体、耗时
Java 对照：Postman + Fiddler + Spring Boot Actuator 的 /httptrace

核心字段：

• Status：200 / 304 / 404 / 500 颜色不同，一眼看出谁挂了
• Type：document / xhr / fetch / script / stylesheet / img / ws，快速过滤想看的类型
• Size：实际下载大小，有 disk cache / memory cache 标注时代表走了缓存
• Time：耗时，点进去能看 Queueing / DNS / SSL / Waiting (TTFB) / Content Download 分段

瀑布图（Waterfall）：横向时间轴上看请求先后顺序，定位"为什么首屏白屏 2 秒"时必看。

常用操作：

• Ctrl + F 全文搜索（在所有请求的请求/响应里搜关键字）
• 右键某个请求 → Copy → Copy as cURL，直接拿到命令行能跑的 cURL，粘给后端排查特别方便
• 勾选 Preserve log：页面跳转不清空记录（默认会清）
• 勾选 Disable cache：DevTools 打开时禁用缓存，避免调样式时看到旧文件
• Throttling 下拉能模拟 Slow 3G / Fast 3G，测弱网体验

Vue 场景：Axios 发的请求就在这里看，请求头里的 Authorization token、响应体的 JSON，全能可视化展开。

5. Performance：性能分析

功能：录制一段时间内的 CPU / 渲染 / 网络活动，找瓶颈
Java 对照：JProfiler / async-profiler / JVisualVM 的 Sampler

基本流程：

1. 点红色圆点 Record，操作页面，停止
2. 看火焰图：横轴时间，纵轴调用栈
3. 找又长又宽的函数块，那就是慢点

关键指标：

• FCP / LCP / CLS：Web Vitals 三大核心指标，生产环境测性能的硬通货
• Main thread：JS 主线程耗时，红色 Long task 代表超过 50ms 的长任务，会卡动画
• Frames：帧率，掉帧处会标红

对 Java 开发者来说，这是一次性把"CPU profile + GC 日志 + 渲染管线"都看完。不需要每天用，但有性能问题时它是终极工具。

6. Application：看存储

功能：看 LocalStorage / SessionStorage / Cookie / IndexedDB
Java 对照：Redis Desktop Manager + H2 Console

前端的"持久化"全在这里：

• Local Storage：键值对，永久保存，容量 5MB 左右。Pinia 持久化插件就往这里塞数据
• Session Storage：同上，但关闭标签页就清。类比 Servlet 的 HttpSession
• Cookies：后端最熟悉的，能看 HttpOnly / Secure / SameSite 等属性
• IndexedDB：浏览器里的嵌入式数据库，复杂前端应用才用

调试登录态问题时，第一步永远是"Application 面板看 token 存没存"。

7. Lighthouse：自动化体检

功能：一键生成性能 / 可访问性 / SEO / 最佳实践评分报告
Java 对照：SonarQube（但面向运行时而非静态代码）

点 Analyze page load 等 30 秒，拿到一份带具体建议的报告：

• 首屏图片是不是太大？建议用 WebP
• 有没有阻塞渲染的 JS？建议加 async / defer
• 按钮 aria-label 缺了？建议补上

项目收尾前跑一遍 Lighthouse，95 分以上基本就算合格前端。

8. Vue Devtools：框架专属外挂

Chrome / Edge 商店搜 Vue.js devtools 装一下。装完后 DevTools 多一个 Vue 面板：

• Components：组件树，点任意组件能看它的 props / data / setup 变量
• Pinia：每个 store 的 state 实时显示，还能回溯 action 调用历史（类似 Redux DevTools 的 time travel）
• Router：当前路由、历史跳转
• Events：所有 emit 的事件

Vue 场景：定位"为什么这个组件没更新"时，先在 Components 面板里看它的 props 是不是真的变了。比断点快得多。

常用快捷键汇总

最值得记的一条：Ctrl + Shift + P 打开命令面板，类似 IntelliJ 的 Find Action。忘了某个功能在哪，直接搜。

小练习：在 in4vue 里试一遍

1. pnpm dev 启动站点，访问首页
2. 打开 DevTools，在 Elements 里把某张卡片背景改成粉色
3. Console 里敲 $('article, .group').length，看页面上有多少笔记卡片
4. Sources 里打开 HomePage.vue，在 filteredNotes 的 computed 里打个断点，在搜索框里输入一个字，看断点停下来时 q 的值
5. Network 里看首次访问时加载了哪些 JS 文件（注意 Vite dev 下每个 .vue 都是独立请求）
6. Application 里看当前 Local Storage 是不是空的（还没接入 Pinia 持久化）
7. Vue Devtools 面板里选中 HomePage 组件，直接改 selectedCategory 的值，观察页面变化

跑完这 7 步，前端调试基本功就算过关了。

延伸阅读

• Chrome DevTools 官方文档（中文）
• Vue Devtools 使用指南
• Web.dev 的 DevTools 训练课
• CSS-Tricks: DevTools Tips