第九期：调试排错与性能优化

本期目标：遇到 bug 不慌张，能用 DevTools + AI 定位并解决问题
核心理念：调试是编程的一部分，AI 可以辅助定位，但最终决策必须是你

---

目录

• 第一章：Chrome DevTools 核心面板
• 第二章：Vue 常见错误诊断
• 第三章：React 常见错误诊断
• 第四章：性能优化
• 第五章：内存泄漏排查
• 第六章：AI 辅助调试
• 第七章：课后作业

---

第一章：Chrome DevTools 核心面板

1.1 四大核心面板

面板	快捷键	用途	后端工程师类比
Elements	Ctrl+Shift+C	看 DOM 结构、临时改样式	查看页面 HTML
Console	Esc	看报错、console.log 调试	日志输出
Network	Ctrl+Shift+E	看接口请求/响应	API 调用追踪
Application	-	看 LocalStorage、Cookie	缓存/会话存储

1.2 Network 面板使用技巧

1. 过滤接口：点击 XHR/Fetch 只看接口请求
2. 查看请求：点击请求 → Headers（请求头）→ Payload（参数）→ Response（响应）
3. 重发请求：右键请求 → Replay XHR
4. 复制请求：右键 → Copy → Copy as cURL

1.3 Console 面板技巧

// 常用调试命令
console.log('普通日志', data)
console.table(array)           // 表格形式展示数组
console.dir(object)            // 展开对象所有属性
console.time('label')          // 计时开始
console.timeEnd('label')       // 计时结束
console.trace()                // 打印调用栈

---

第二章：Vue 常见错误诊断

2.1 错误速查表

错误现象	原因	解决方案
修改数组页面不更新	直接通过索引修改	用 splice 或赋值新数组
reactive 解构丢失响应式	解构会破坏代理	用 toRefs 或改用 ref
watch 监听不到深层变化	默认只监听引用	加 { deep: true }
onMounted 执行两次	开发环境严格模式	生产环境正常，忽略即可
ref 解构失去响应式	解构 ref 对象	不要解构，直接用 .value

2.2 Vue 调试技巧

使用 Vue DevTools 插件：

• 查看组件树
• 查看组件状态（ref/reactive 的值）
• 查看事件触发
• 时间旅行调试（Pinia）

---

第三章：React 常见错误诊断

3.1 错误速查表

错误现象	原因	解决方案
useEffect 无限循环	依赖数组写错	用 useCallback 缓存函数
闭包陷阱	事件回调读取旧 state	用函数式更新 setState(prev => …)
Context 性能问题	小更新导致大量重渲染	拆分 Context，或用 Zustand
key 使用索引	列表项状态错乱	用数据唯一 ID 作为 key
状态不更新	直接修改对象/数组	使用展开运算符创建新引用

3.2 React 调试技巧

使用 React DevTools：

• 查看组件树和 Props
• 查看 Hooks 状态
• Profiler 面板分析性能
• 高亮更新（Highlight updates）

---

第四章：性能优化

4.1 列表页性能优化

问题	解决方案	实现方式
大数据列表卡顿	虚拟滚动	vue-virtual-scroller / react-window
频繁搜索请求	防抖/节流	lodash debounce / throttle
不必要的重渲染	组件拆分 + memo	Vue: v-memo / React: React.memo
大图片加载慢	图片懒加载	loading=“lazy”
资源加载慢	路由懒加载	() => import(‘./page’)

4.2 防抖与节流

// 防抖：输入停止后 300ms 再搜索
import { debounce } from 'lodash-es'

const debouncedSearch = debounce((keyword: string) => {
  fetchData(keyword)
}, 300)

// 节流：每 500ms 最多执行一次
import { throttle } from 'lodash-es'

const throttledScroll = throttle(() => {
  console.log('scroll')
}, 500)

4.3 虚拟滚动

<!-- Vue + vue-virtual-scroller -->
<template>
  <RecycleScroller
    class="scroller"
    :items="list"
    :item-size="50"
    key-field="id"
  >
    <template #default="{ item }">
      <div class="item">{{ item.name }}</div>
    </template>
  </RecycleScroller>
</template>

---

第五章：内存泄漏排查

5.1 常见内存泄漏原因

原因	Vue 解决	React 解决
定时器未清理	onUnmounted 中 clearInterval	useEffect return 中清理
事件监听未移除	onUnmounted 中 removeEventListener	useEffect return 中移除
WebSocket 未关闭	onUnmounted 中 close	useEffect return 中 close
订阅未取消	onUnmounted 中 unsubscribe	useEffect return 中取消
闭包引用大对象	及时释放引用	及时释放引用

5.2 使用 Chrome DevTools 排查

1. 打开 Performance 面板
2. 点击录制按钮
3. 操作页面（如反复打开/关闭弹窗）
4. 停止录制
5. 查看 Memory 图表，如果内存只增不减 → 有泄漏
6. 使用 Memory 面板的 Heap Snapshot 对比前后差异

---

第六章：AI 辅助调试

6.1 给 AI 提供调试信息的 Prompt 模板

我的代码出现以下问题：

问题描述：[具体现象，如"点击搜索后页面卡死"]

错误信息：

[粘贴控制台报错]

相关代码：

[粘贴相关代码]

环境信息：
- 框架版本：[版本号]
- 浏览器：[浏览器及版本]
- 已尝试：[已尝试的解法]

请帮我定位原因并给出修复方案。

6.2 AI 调试的最佳实践

1. 提供足够信息：错误信息 + 相关代码 + 环境
2. 缩小范围：先确定是哪个组件/哪个函数的问题
3. 逐步排查：先检查数据流，再检查渲染逻辑
4. 验证修复：AI 给出的方案，先在本地验证再应用

---

第七章：实战

7.1 必做实战

实战 1：编写《常见错误速查手册》

整理你在学习过程中遇到的所有错误，按以下格式：

| 错误现象 | 原因 | 解决方案 |

实战 2：优化列表页性能

在你的用户列表页中实现：

1. 搜索输入防抖（300ms）
2. 路由懒加载
3. 表格行使用唯一 ID 作为 key

7.2 FAQ

Q：DevTools 看 Network 请求返回 200，但页面显示错误？

检查响应拦截器是否正确处理了数据结构。可能后端返回了 200 但 code 不是 200。

Q：页面白屏怎么排查？

1. Console 看报错
2. Network 看接口是否返回数据
3. 检查是否有空值导致的 .map() 报错
4. 检查路由配置是否正确

---

下一期预告：综合项目实战与结业 —— 独立完成一个完整业务模块