JS模块作用域疑问：控制台无法访问模块变量的调试方法咨询

问题原因 #

ES模块（通过type="module"加载的脚本）拥有独立的模块作用域，和传统全局脚本不同，模块内的变量、函数默认不会挂载到window对象上，所以在控制台直接输入变量名会抛出ReferenceError——这是ES模块的设计特性，目的是避免全局命名空间污染。

无需挂载window的调试方法 #

1. 利用浏览器断点调试 #

• 打开浏览器开发者工具（F12），切换到Sources面板
• 在左侧文件树中找到你的模块文件（比如app.js或variables.js）
• 在需要调试的代码行号处点击添加断点；或者直接在模块代码中插入debugger;语句
• 当代码执行到断点时，控制台会自动进入当前模块的作用域，此时直接输入变量名（比如var1）就能查看其值

2. 控制台切换模块作用域（Chrome支持） #

• 打开控制台，找到顶部的下拉菜单（默认显示top，代表全局作用域）
• 在下拉列表中选择对应的模块文件（比如app.js）
• 切换后控制台就处于该模块的作用域中，直接输入变量名即可访问

3. 规范的临时调试对象（仅开发环境使用） #

如果需要在无断点的情况下访问变量，可以创建一个仅用于开发的全局对象，避免零散挂载变量：

// app.js
import { var1 } from "./variables.js";

console.log(var1);

// 仅本地开发环境暴露调试对象
if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') {
  window.__DEV_DEBUG__ = {
    var1
    // 可以添加其他需要调试的变量、函数
  };
}

之后在控制台通过window.__DEV_DEBUG__.var1即可访问，上线前记得删除这段代码。

内容的提问来源于stack exchange，提问作者Gabriel Pozzi