WebStorm 不介入 JavaScript 模块加载，仅转发断点与变量视图；import 语句为静态声明不可打断点；模块加载失败需依赖浏览器 DevTools 或 Node.js 原生调试器排查。
WebStorm 本身不介入 JavaScript 模块加载过程，调试模块加载失败（如 import 报错、undefined 导出、ERR_MODULE_NOT_FOUND）必须靠浏览器 DevTools 或 Node.js 的原生调试器，WebStorm 只负责转发断点和变量视图——它不解析 ESM 重写规则、不模拟模块解析算法、也不拦截 import.meta.resolve 调用。
为什么在 WebStorm 里打断点却进不去 import 语句？
ES 模块的 import 是声明式、静态解析的，不是可执行语句。你在 import 行左侧点红点，WebStorm 会忽略——V8 引擎根本不把这行当“可暂停位置”，它只在模块实例化后执行 top-level 代码时才触发调试器。常见现象包括：
- 断点打在
import { foo } from './utils.js';上，调试运行后直接跳过 - 控制台报
Failed to load module script，但 WebStorm Debug 工具窗口空着，没任何报错上下文 - 用了动态
import()却在回调里看不到then执行，因为 Promise resolve 是异步微任务，断点需设在.then内部而非import()调用行
Chrome DevTools 中检查模块加载链的关键操作
WebStorm 的 JavaScript Debug 配置只是启动 Chrome 并打开指定 URL，真正查模块路径得切到 Chrome 的 Network 和 Console 面板：
- 打开 Chrome DevTools → Network 面板 → 切换到
JS或All标签 → 刷新页面，观察哪些.js请求返回 404 或 MIME 错误（如text/plain而非application/javascript） - 在 Console 里复制报错信息（如
Uncaught TypeError: Failed to resolve module specifier "lodash"），右键 →Reveal in network tab快速定位缺失模块 - 对动态
import('./feature.js')，在 Sources → Page → 右键对应 HTML 文件 →Open in new tab，再按Ctrl+Shift+P输入 “Capture node” 启用模块捕获，可看到实际解析后的绝对 URL - 若用 Vite / Webpack，确保 WebStorm 的 JavaScript Debug 配置中 URL 指向的是开发服务器地址（如
http://localhost:5173/），而不是本地文件路径file:///—— 后者禁用 ESM 加载
Node.js 环境下调试 ESM 加载失败
WebStorm 支持 Node.js 调试，但 ESM 模块错误（如 ERR_UNSUPPORTED_DIR_IMPORT）往往发生在进程启动瞬间，等 Debugger 连上时进程已退出。必须用 --inspect-brk 强制中断在第一行：
立即学习“Java免费学习笔记（深入）”；
- 运行配置选
Node.js类型，不是JavaScript Debug - 在
Node parameters字段填--experimental-specifier-resolution=node --inspect-brk（适配 Node 20+ 的 ESM 解析行为） -
JavaScript file填入口文件（如index.mjs），确保文件扩展名是.mjs或package.json里有"type": "module" - 启动后立即暂停在第一行，此时可在 Console 面板输入
process.argv或require('module').createRequire检查当前模块解析上下文 - 注意：WebStorm 不支持
node --loader自定义加载器调试，所有 loader 逻辑都会绕过 Debugger
Source map 错误导致模块路径映射失效
Webpack/Vite 构建后，浏览器加载的是 bundle.js，但你希望断点打在原始 src/index.ts 上——这依赖 source map 正确生成并被浏览器识别。WebStorm 不校验 map 文件内容，只做路径映射：
- 检查构建输出目录下是否存在
bundle.js.map，且bundle.js末尾有//# sourceMappingURL=bundle.js.map - 在 Chrome DevTools → Settings → Preferences →
Enable JavaScript source maps和Enable CSS source maps必须开启 - 如果用了
output.publicPath（如/static/），source map 里的sources字段路径必须匹配浏览器实际请求路径；WebStorm 的Local files/remote URL映射只在 JavaScript Debug 配置里生效，对构建产物无效 - 动态
import()加载的 chunk 如果没生成独立 source map（如 Webpack 的devtool: 'source-map'默认不处理 lazy chunk），断点会落在压缩后代码上，变量名显示为a、t等
模块加载问题的本质是运行时环境行为，WebStorm 的角色始终是“桥梁”而非“解释器”。最常被忽略的一点：它不会重放模块解析过程，也不会模拟 import.meta.url 的计算逻辑——所有路径推导、条件导出（exports 字段）、package.json 查找，都由 Node 或浏览器原生完成，WebStorm 只能展示最终结果。
