后端使用 AI 开发前端速成：第九期：调试排错与性能优化

第九期调试排错与性能优化本期目标遇到 bug 不慌张能用 DevTools AI 定位并解决问题核心理念调试是编程的一部分AI 可以辅助定位但最终决策必须是你目录第一章Chrome DevTools 核心面板第二章Vue 常见错误诊断第三章React 常见错误诊断第四章性能优化第五章内存泄漏排查第六章AI 辅助调试第七章课后作业第一章Chrome DevTools 核心面板1.1 四大核心面板面板快捷键用途后端工程师类比ElementsCtrlShiftC看 DOM 结构、临时改样式查看页面 HTMLConsoleEsc看报错、console.log 调试日志输出NetworkCtrlShiftE看接口请求/响应API 调用追踪Application-看 LocalStorage、Cookie缓存/会话存储1.2 Network 面板使用技巧1. 过滤接口点击 XHR/Fetch 只看接口请求 2. 查看请求点击请求 → Headers请求头→ Payload参数→ Response响应 3. 重发请求右键请求 → Replay XHR 4. 复制请求右键 → Copy → Copy as cURL1.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 或改用 refwatch 监听不到深层变化默认只监听引用加 { deep: true }onMounted 执行两次开发环境严格模式生产环境正常忽略即可ref 解构失去响应式解构 ref 对象不要解构直接用 .value2.2 Vue 调试技巧使用 Vue DevTools 插件查看组件树查看组件状态ref/reactive 的值查看事件触发时间旅行调试Pinia第三章React 常见错误诊断3.1 错误速查表错误现象原因解决方案useEffect 无限循环依赖数组写错用 useCallback 缓存函数闭包陷阱事件回调读取旧 state用函数式更新 setState(prev …)Context 性能问题小更新导致大量重渲染拆分 Context或用 Zustandkey 使用索引列表项状态错乱用数据唯一 ID 作为 key状态不更新直接修改对象/数组使用展开运算符创建新引用3.2 React 调试技巧使用 React DevTools查看组件树和 Props查看 Hooks 状态Profiler 面板分析性能高亮更新Highlight updates第四章性能优化4.1 列表页性能优化问题解决方案实现方式大数据列表卡顿虚拟滚动vue-virtual-scroller / react-window频繁搜索请求防抖/节流lodash debounce / throttle不必要的重渲染组件拆分 memoVue: v-memo / React: React.memo大图片加载慢图片懒加载loading“lazy”资源加载慢路由懒加载() import(‘./page’)4.2 防抖与节流// 防抖输入停止后 300ms 再搜索import{debounce}fromlodash-esconstdebouncedSearchdebounce((keyword:string){fetchData(keyword)},300)// 节流每 500ms 最多执行一次import{throttle}fromlodash-esconstthrottledScrollthrottle((){console.log(scroll)},500)4.3 虚拟滚动!-- Vue vue-virtual-scroller -- template RecycleScroller classscroller :itemslist :item-size50 key-fieldid template #default{ item } div classitem{{ item.name }}/div /template /RecycleScroller /template第五章内存泄漏排查5.1 常见内存泄漏原因原因Vue 解决React 解决定时器未清理onUnmounted 中 clearIntervaluseEffect return 中清理事件监听未移除onUnmounted 中 removeEventListeneruseEffect return 中移除WebSocket 未关闭onUnmounted 中 closeuseEffect return 中 close订阅未取消onUnmounted 中 unsubscribeuseEffect return 中取消闭包引用大对象及时释放引用及时释放引用5.2 使用 Chrome DevTools 排查1. 打开 Performance 面板 2. 点击录制按钮 3. 操作页面如反复打开/关闭弹窗 4. 停止录制 5. 查看 Memory 图表如果内存只增不减 → 有泄漏 6. 使用 Memory 面板的 Heap Snapshot 对比前后差异第六章AI 辅助调试6.1 给 AI 提供调试信息的 Prompt 模板我的代码出现以下问题 问题描述[具体现象如点击搜索后页面卡死] 错误信息[粘贴控制台报错]相关代码[粘贴相关代码]环境信息 - 框架版本[版本号] - 浏览器[浏览器及版本] - 已尝试[已尝试的解法] 请帮我定位原因并给出修复方案。6.2 AI 调试的最佳实践提供足够信息错误信息 相关代码 环境缩小范围先确定是哪个组件/哪个函数的问题逐步排查先检查数据流再检查渲染逻辑验证修复AI 给出的方案先在本地验证再应用第七章实战7.1 必做实战实战 1编写《常见错误速查手册》整理你在学习过程中遇到的所有错误按以下格式| 错误现象 | 原因 | 解决方案 |实战 2优化列表页性能在你的用户列表页中实现搜索输入防抖300ms路由懒加载表格行使用唯一 ID 作为 key7.2 FAQQDevTools 看 Network 请求返回 200但页面显示错误检查响应拦截器是否正确处理了数据结构。可能后端返回了 200 但 code 不是 200。Q页面白屏怎么排查Console 看报错Network 看接口是否返回数据检查是否有空值导致的 .map() 报错检查路由配置是否正确下一期预告综合项目实战与结业 —— 独立完成一个完整业务模块