如何通过浏览器控制台调试JavaScript模块并访问模块内对象？

ES模块（通过<script type="module">引入的脚本）拥有独立的模块作用域，内部定义的变量不会自动挂载到全局window对象上，这就是你直接在控制台访问MyVar提示未定义的原因。以下是几种可行的解决方法：

方法1：手动挂载到全局对象（调试快速方案） #

在main.js中将变量主动赋值给window的属性，让它成为全局变量，控制台即可直接访问：

var MyVar = 10;
// 挂载到window对象
window.MyVar = MyVar;

这种方式简单直接，但会造成全局污染，仅推荐用于临时调试场景。

方法2：通过模块导出+控制台动态导入（规范方案） #

遵循ES模块规范导出变量，再在控制台通过动态导入获取：

1. 修改main.js导出变量：

export var MyVar = 10;

2. 在控制台执行动态导入：

// 方式1：使用then回调
import('./main.js').then(module => {
  console.log(module.MyVar); // 输出10
  // 也可挂载到全局方便后续操作
  window.MyVar = module.MyVar;
});

// 方式2：使用top-level await（现代浏览器控制台支持）
const module = await import('./main.js');
console.log(module.MyVar);

方法3：切换控制台的模块上下文（无需修改代码） #

Chrome、Firefox等现代浏览器的开发者工具支持切换控制台执行上下文：

• 打开开发者工具的Sources面板，找到并打开main.js文件
• 查看控制台顶部的上下文选择下拉框（默认是top），选择当前的main.js模块
• 此时在控制台直接输入MyVar就能访问到模块内的变量

内容的提问来源于stack exchange，提问作者Bart Friederichs