可在浏览器控制台调试ES Modules：1. 用debugger语句配合Source Maps；2. 动态import()探索导出内容；3. 挂载变量到window（仅开发）；4. 利用断点时控制台的作用域继承能力。
在浏览器控制台中直接调试 ES Modules 代码不能像普通脚本那样用 console.log 或断点后立即执行模块顶层代码，因为模块是异步加载、有作用域隔离且需通过 import 显式引入的。但你可以通过几种实用方式高效调试：
1. 使用 debugger 语句配合源码映射
在模块文件中插入 debugger;，确保已启用源码映射（Source Maps）并正确加载了 .map 文件：
- 构建工具（如 Vite、Webpack、Rollup）默认开启开发模式下的 Source Maps
- 浏览器开发者工具 → Settings → “Enable JavaScript source maps” 必须勾选
- 刷新页面，触发模块加载后，
debugger会停在原始 .ts/.js 源码行，而非打包后代码
2. 在控制台中动态导入并检查导出内容
浏览器支持顶层 await（在模块上下文中），你可以在控制台中直接 import() 模块进行探索：
- 输入
await import('./utils.js')（路径需为相对或绝对 URL，且同源） - 回车后返回一个 Promise，解析后得到命名导出对象，例如：
{ default: ..., formatTime: ..., logError: ... } - 可进一步调用：
(await import('./api.js')).fetchUser(123) - 注意：不能在普通 HTML 页面的非模块脚本控制台中使用（需页面以
<script type="module"></script>启动）
3. 给模块变量挂载到全局便于控制台访问
临时调试时，可在模块内部将关键对象赋值给 window（仅限开发环境）：
Java 接口排错助手
下载
在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。
立即学习“Java免费学习笔记（深入）”；
- 在模块末尾加：
window.MyModule = { ...exportedObj };或window.debugUtils = utils; - 刷新后，在控制台直接输入
debugUtils.formatDate(...)调用 - 上线前务必删除或用
if (import.meta.env.DEV) { window.xxx = ... }包裹
4. 利用 “Console” 面板的“自动补全 + 上下文感知”能力
现代浏览器（Chrome / Edge / Firefox）在模块脚本断点暂停时，控制台会自动继承当前模块作用域：
- 在模块内设断点并触发暂停后，在控制台里输入变量名可直接读取局部/导入的绑定
- 输入
import.meta.url可查看当前模块地址；import.meta.resolve（实验性）可用于解析模块路径 - 用
console.dir(moduleVar)查看带原型链的对象结构，比console.log更清晰
不复杂但容易忽略的是：确保 HTML 中入口模块用 <script type="module" src="./main.js"></script> 加载，否则控制台的模块上下文不可用。调试时优先依赖 debugger + 源码映射，辅以动态 import() 探查，既安全又贴近真实运行环境。
