浏览器开发者工具：看懂你的应用在干什么

完成时间：约 30 分钟。读完后你能用 Chrome DevTools 检查页面、调试网络请求、定位错误。

AI 帮你写了前端代码，你在浏览器里打开——页面白屏了、按钮点了没反应、数据加载不出来。怎么办？

答案是打开开发者工具（DevTools）。它是你验证 AI 工作成果的最重要窗口。

---

打开 DevTools

操作系统	快捷键	备选方式
macOS	Cmd + Option + I	右键页面 → 检查
Windows	F12 或 Ctrl + Shift + I	右键页面 → 检查

打开后你会看到一个面板，有好几个标签页。你只需要掌握 4 个。

---

Tab 1：Elements — 看页面结构

是什么

Elements 面板显示当前页面的 HTML 结构和 CSS 样式。你可以实时查看、甚至修改页面上的任何元素。

你什么时候需要它

• AI 生成的页面布局不对，想看是哪个元素出了问题
• 想临时改一下文字/颜色，看看效果好不好
• 确认 AI 写的 Tailwind 类名是否正确

怎么用

1. 定位页面元素

点击 DevTools 左上角的「选择元素」按钮（箭头图标），然后在页面上点击任意元素——右侧面板会自动定位到对应的 HTML 代码。

快捷键：Cmd + Shift + C（macOS）/ Ctrl + Shift + C（Windows）

2. 查看和修改样式

选中元素后，右侧的 Styles 面板显示所有生效的 CSS。你可以：

• 直接点击数值修改（即时预览，刷新后恢复）
• 取消勾选某条样式看看效果
• 看到哪些样式被覆盖了（有删除线的）

3. 实战：检查一个按钮为什么看不见

1. 打开 Elements
2. 选中那个按钮元素
3. 检查 Styles 面板：
   - display: none?  → 被隐藏了
   - opacity: 0?     → 透明了
   - width/height: 0? → 尺寸为零
   - 被其他元素遮挡？ → 检查 z-index

---

Tab 2：Console — 看错误信息

是什么

Console 是 JavaScript 的”终端”。所有的报错、警告、调试信息都在这里显示。

你什么时候需要它

• 页面白屏或功能异常，先看 Console 有没有红色错误
• AI 的代码运行出了问题，错误信息在这里
• 想快速测试一行 JavaScript

怎么用

1. 看错误（红色）

打开 Console 标签，红色的就是错误。最常见的几种：

错误信息	含义	可能原因
Uncaught TypeError: xxx is not a function	调用了不存在的函数	AI 写错了函数名，或忘了导入
Uncaught ReferenceError: xxx is not defined	变量不存在	变量名拼写错误
SyntaxError: Unexpected token	语法错误	代码格式有问题（括号没配对等）
Failed to fetch	网络请求失败	后端没启动，或接口地址写错了
CORS error	跨域错误	前端和后端不在同一个域名/端口

2. 复制错误信息给 AI

看到红色错误后，最有效的做法：

我的页面报了这个错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at UserList (UserList.jsx:12)

帮我分析原因并修复

AI 能从错误信息 + 文件名 + 行号直接定位问题。

3. 在 Console 里直接运行代码

你可以在 Console 底部的输入框里直接输入 JavaScript：

// 查看当前页面的 URL
window.location.href

// 查看本地存储的数据
localStorage.getItem('token')

// 检查某个变量
document.querySelectorAll('.btn').length

---

Tab 3：Network — 看网络请求

是什么

Network 面板记录了页面发出的所有网络请求：API 调用、图片加载、脚本下载等。这是你检查”前端和后端通信是否正常”的核心工具。

你什么时候需要它

• 点击按钮后没反应——是前端没发请求，还是后端返回了错误？
• 数据显示不对——看看后端到底返回了什么
• 页面加载很慢——找到耗时最长的请求

怎么用

1. 基本操作

1. 打开 Network 标签
2. 刷新页面（或触发操作）
3. 看到一行行请求列表

每行显示：

列	含义
Name	请求的 URL（接口地址）
Status	HTTP 状态码（200 成功、404 找不到、500 服务器错误）
Type	请求类型（fetch/xhr 是 API 调用）
Time	耗时
Size	数据大小

2. 筛选只看 API 请求

点击 Network 面板顶部的 Fetch/XHR 过滤按钮，只显示 API 请求，过滤掉图片、CSS 等资源文件。

3. 查看请求详情

点击某一行请求，右侧会显示详情面板：

• Headers — 请求头和响应头（看请求方法、URL、Content-Type）
• Payload — 你发送给后端的数据（POST/PUT 请求的 body）
• Response / Preview — 后端返回的数据（最重要！）

4. 实战：调试”提交表单没反应”

1. 打开 Network，点击 Fetch/XHR 过滤
2. 在页面上点击"提交"按钮
3. 观察 Network 面板：

   情况A：没有新请求出现
   → 前端代码有问题，按钮没有触发 API 调用
   → 去 Console 看有没有报错

   情况B：出现请求，Status 是 400 或 422
   → 点击看 Response，后端说参数不对
   → 点击看 Payload，检查前端发的数据对不对

   情况C：出现请求，Status 是 500
   → 后端炸了，看 Response 里的错误信息
   → 把错误信息发给 AI

   情况D：出现请求，Status 是 200，但页面没更新
   → 点击看 Response，数据返回了但前端没正确渲染
   → 是前端代码的问题

5. HTTP 状态码速查

状态码	含义	你该做什么
200	成功	一切正常
201	创建成功	POST 请求成功创建了资源
400	请求参数有误	检查前端发送的数据格式
401	未登录/token 过期	检查是否携带了认证信息
403	无权限	当前用户没有访问权限
404	接口/资源不存在	检查 URL 有没有拼错
500	后端内部错误	看 Response 里的错误信息，发给 AI

---

Tab 4：Application — 看本地存储

是什么

Application 面板用来查看浏览器里存储的数据：Cookies、LocalStorage、SessionStorage 等。

你什么时候需要它

• 检查 JWT token 有没有保存成功
• 调试登录状态问题——清除 token 再试
• 查看 AI 用了什么本地存储策略

怎么用

1. 查看 LocalStorage

左侧菜单选择 Local Storage → 你的域名（比如 localhost:5173）。

右侧会显示所有存储的键值对，例如：

token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
user: '{"id":1,"name":"小明","role":"admin"}'

2. 查看 Cookies

左侧菜单选择 Cookies → 你的域名。可以看到所有 Cookie 及其过期时间。

3. 清除数据（调试登录问题最常用）

右键 LocalStorage → Clear
或者 Application 面板顶部 → Clear site data

清除后刷新页面，相当于”重新开始”——用来调试登录/认证问题非常有效。

---

实用技巧

技巧 1：模拟手机屏幕

点击 DevTools 左上角的设备图标（手机+平板图标），可以模拟不同手机/平板的屏幕尺寸。

快捷键：Cmd + Shift + M（macOS）/ Ctrl + Shift + M（Windows）

用途：检查 AI 写的响应式布局在手机上是否正常。

技巧 2：禁用缓存

Network 面板顶部勾选 Disable cache。

这样每次刷新都会重新请求所有资源，避免看到旧版本的代码/样式。开发时建议一直勾选。

技巧 3：模拟慢网络

Network 面板顶部有一个下拉菜单（默认是 “No throttling”），可以切换为 Slow 3G、Fast 3G 等。

用途：测试你的应用在慢网络下的表现——加载动画有没有？请求超时会怎样？

技巧 4：保留请求日志

Network 面板顶部勾选 Preserve log。

默认情况下，页面跳转后旧的请求记录会消失。勾选后所有请求都保留，方便调试登录跳转等场景。

---

调试万能流程

遇到任何前端问题，按这个顺序排查：

graph TD
    S1["Step 1: 打开 Console"] -->|"有红色错误"| Fix1["复制错误信息给 AI"]
    S1 -->|"没有错误"| S2["Step 2: 打开 Network<br/>筛选 Fetch/XHR"]
    S2 -->|"没有请求发出"| Fix2["前端事件绑定有问题<br/>告诉 AI"]
    S2 -->|"有请求"| S3["Step 3: 检查请求详情"]
    S3 -->|"Status 200 但页面不对"| Fix3["看 Response 数据<br/>检查前端渲染"]
    S3 -->|"Status 4xx/5xx"| Fix4["看 Response 错误信息<br/>发给 AI"]
    S3 -->|"和登录/权限有关"| S4["Step 4: 检查 Application<br/>检查 token 是否存在<br/>清除后重新登录"]

把这个流程做成习惯，80% 的前端问题你都能自己定位到”是前端的问题还是后端的问题”，然后精准地告诉 AI 去修。

---

给 AI 报 Bug 的模板

定位到问题后，用这个模板让 AI 帮你修：

前端出了问题：[描述现象]

我打开 DevTools 看到：
- Console 错误：[粘贴错误信息]
- Network 请求：[接口地址] 返回 [状态码]
- Response 内容：[粘贴关键部分]

期望行为：[应该是什么样]

比传说”页面坏了”强 10 倍，AI 能直接定位和修复。

---

小结

面板	核心用途	最常用场景
Elements	看 HTML 结构和 CSS 样式	布局不对、样式不生效
Console	看 JavaScript 错误	页面白屏、功能异常
Network	看 API 请求和响应	数据加载失败、接口报错
Application	看本地存储（token等）	登录状态问题

记住：DevTools 不是用来”修代码”的，是用来”找到问题在哪”的。 找到问题后，告诉 AI 去修。

---

下一步：回到主线，开始 Step 1：思考框架。