Next.js 有官方插件支持开箱即用调试，UmiJS 需手动对齐启动方式；JavaScript Debug 配置仅连接已运行服务，不启动应用，故不能直接套用。
UmiJS 和 Next.js 都是基于 React 的服务端渲染/SSG 框架，但 WebStorm 对它们的调试支持机制不同：**Next.js 有官方插件和开箱即用的调试配置，UmiJS 则需手动对齐其启动方式**。直接配错类型（比如把 Umi 当成 Next 用 JavaScript Debug）会导致断点不命中、热更新失效或 URL 打不开。
为什么不能统一用 JavaScript Debug 配置？
WebStorm 的 JavaScript Debug 配置本质是「反向代理 + 浏览器 DevTools 连接」，它不启动应用，只连接已运行的服务。如果你的 package.json 里没有真正跑起来的开发服务器（比如 "dev": "umi dev" 或 "dev": "next dev"），这个配置就只是个空壳。
-
Next.js项目默认带next dev，且 WebStorm 的Next.js Support插件能识别next.config.js和pages/或app/目录结构，自动补全和类型推导更准 -
UmiJS没有对应插件，WebStorm 不知道umi dev启的是什么端口、是否启用了 webpack HMR、是否开了webpack-dev-server的hot模式——这些全靠你手动确认 - 两者都依赖 Chrome（或 Edge）+
JetBrains IDE Support插件，缺一不可；否则断点会灰掉，控制台报Failed to load source map
Next.js 项目：用 JavaScript Debug + 确保 tsconfig.json 正确
只要项目是 npx create-next-app 初始化的，WebStorm 通常会自动生成 npm start 和 JavaScript Debug 配置。但常见问题出在 TypeScript 类型上：
- 必须有
tsconfig.json，且包含"types": ["next"]（Next.js 12）或"extends": "next/env"（Next.js 13+） - 若用了
paths别名（如@/components），tsconfig.json必须配"baseUrl": "."和"paths"，否则 WebStorm 找不到模块，跳转失效 -
getServerSideProps等函数需显式 import 类型：import { GetServerSideProps } from 'next'，不能只靠全局声明 - 调试时若页面白屏或断点不触发，先检查浏览器地址栏是否为
http://localhost:3000（不是about:blank）；如果是后者，说明JavaScript Debug配置里的 URL 填错了，或者 Chrome 启动参数没加--remote-allow-origins=*
UmiJS 项目：先确认 dev server 端口，再配 npm 脚本
UmiJS 没有专用插件，最稳的方式是绕过 JavaScript Debug，改用 npm 类型配置来启动服务本身：
- 先在终端跑一次
npm run dev（或yarn dev），看控制台输出的真实端口——Umi 默认是8000，但可能被PORT环境变量或config.ts中的devServer.port覆盖 - 在 WebStorm 中新建
Run Configuration→npm→Command填run，Scripts填dev，勾选Run npm script in new terminal - 别急着点 Debug：Umi 的断点调试依赖 Chrome 连接，所以你要另开一个
JavaScript Debug配置，URL 填你刚确认的地址（如http://localhost:8000），然后先运行 npm 配置，等页面加载完成，再点这个 JavaScript Debug 启动连接 - 如果热更新卡住，检查
config.ts是否关了fastRefresh（Umi 4 默认开启），或webpackChain是否误删了HMR相关 plugin
Chrome 启动参数和 JetBrains IDE Support 是共性前提
无论 Next.js 还是 UmiJS，只要想在 WebStorm 里打断点并实时看变量值，就必须满足两个硬条件：
- Chrome 安装了
JetBrains IDE Support插件（Chrome 应用商店搜得到，2026 年仍有效） - WebStorm 设置中，
Build, Execution, Deployment → Debugger → JavaScript → Chrome下的Use custom Chrome executable要指向你本地 Chrome 的路径，并在Additional arguments里填--remote-allow-origins=*（这是 Chromium 119+ 强制要求的跨域开关） - 如果用了 Webpack 5+，Umi 或 Next 的
devtool必须设为eval-source-map或source-map，否则断点会落在打包后的webpack://路径，无法映射回源码
Next.js 的支持是“框架感知”的，而对 UmiJS 是“进程感知”的——前者靠插件理解语义，后者只认命令行输出。所以配 Umi 时，别纠结 WebStorm 能不能自动识别 src/pages，盯紧终端里那一行 Compiled successfully 和真实端口就行。 
