通用定位思路

遇到任何前端报错,先把这套流程在脑子里跑一遍,再去查具体章节。

五步定位法

1. 看报错来源

   • 浏览器控制台 → 运行时(JS / 渲染 / 网络)
   • Vite 终端 → 编译 / 依赖解析 / HMR
   • TS 编译器(tsc -b)→ 类型错误
   • ESLint / Prettier → 代码风格 / 静态规则

2. 看报错阶段

   • 依赖安装 → 见 01-依赖安装.md
   • dev 启动 → 见 02-Vite-启动与dev.md
   • 编译时(TS / Vite import-analysis) → 见 03-TypeScript编译.md
   • 运行时 → 见 04-React运行时.md
   • 打包 / 部署 → 见 06-构建打包与部署.md

3. 看堆栈第一行

   • 点开 sourcemap 跳到源码位置,而不是 dist 产物
   • 浏览器堆栈展开 at Component (xxx.tsx:42) 这一行,直接打开
   • 如果指向 node_modules,继续往下找第一个属于自己代码的栈帧

4. 最小复现

   • 删除最近一次新增/修改,看是否复现 → 二分法定位到一行
   • 关闭无关 feature flag、把异步改成同步、把动态数据换成 mock

5. 清缓存重试

   rm -rf frontend/node_modules/.vite frontend/dist
   # 仍不行再重装
   rm -rf frontend/node_modules frontend/package-lock.json
   cd frontend && npm install
   

常见误区

• ❌ 看到红字直接复制粘贴报错搜 Google,不看上下文
• ❌ 在崩溃点加 ?. / try-catch 兜底,不追上游为什么是 undefined
• ❌ 用 @ts-ignore 压住类型错,把问题推到运行时
• ❌ npm i --force / --legacy-peer-deps 当默认习惯
• ❌ 改完不清 .vite 缓存,以为没生效就改其它地方

工具准备