模块加载失败应回溯请求-解析-执行全链路：先用Console识别错误类型（如404、MIME不匹配、import路径非法），再在Sources设断点拦截import调用，结合Network验证HTTP响应与Content-Type，对动态import加catch+debugger捕获Promise拒绝详情。
模块加载失败时，单步调试的关键不是从报错行开始，而是回溯到模块请求发起、解析、执行的完整链路。浏览器开发者工具能帮你定位是网络问题、路径错误、语法异常，还是动态导入逻辑出错。
先确认错误类型和源头
打开开发者工具（F12），切换到 Console 面板，查看完整错误信息：
- 出现
Failed to load module script：说明模块 URL 404 或 MIME 类型不匹配（如返回了 HTML 而非 JavaScript） - 出现
Cannot use import statement outside a module：脚本未声明type="module"，或被当作普通脚本加载 - 出现
TypeError: Failed to resolve module specifier：import 路径不合法（如缺少./或/开头，或用了 Node.js 风格的 bare specifier） - 动态
import()报错且带catch：错误被捕获，需在catch块里加debugger或断点
在 Sources 面板中定位并暂停加载过程
模块加载本身不可直接“单步”，但你可以拦截关键节点：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 在 Sources 面板中按
Ctrl + P（Windows）或Cmd + P（macOS），搜索主入口 HTML 文件，打开它 - 找到
<script type="module">或import()调用所在行，在其前一行设断点；若为动态导入，断点设在import(...)行本身 - 刷新页面，代码会在 import 执行前暂停；此时可在控制台手动运行
import('./xxx.js')测试路径是否可达 - 若使用构建工具（如 Vite、Webpack），检查生成的 chunk 名称是否与 import 路径一致，Sources 中可能显示
webpack://或vite://虚拟路径
借助 Network 面板验证资源获取
模块加载本质是 HTTP 请求，Network 是第一道排查关卡：
立即学习“Java免费学习笔记（深入）”；
- 刷新前，先在 Network 面板勾选 JS 过滤器，并勾选 Preserve log
- 刷新后，查找目标模块文件名，观察其状态码、响应头
Content-Type（应为application/javascript）、预览内容（是否为空或返回 404 页面） - 右键该请求 → Copy → Copy request headers，粘贴到终端用
curl -v复现，确认服务端行为 - 若模块由
import.meta.url拼接路径，可在 Console 中直接执行该表达式，验证拼出的 URL 是否合理
对动态 import 加 debugger 并观察 Promise 状态
动态导入返回 Promise，失败时不会中断执行，必须主动干预：
- 在
import('./feature.js')后立即接.catch(err => { debugger; })，让浏览器在拒绝时暂停 - 或在
async函数中用try/catch包裹，catch块首行写debugger - 暂停后，展开 Scope 面板查看
err的完整堆栈；展开 Call Stack 可看到是从哪个事件（如按钮点击）触发的导入 - 在 Console 中输入
err.toString()和err.stack，常能暴露真实路径或 CORS 问题
