如何通过浏览器开发者工具控制台访问JS模块内声明的变量？

index.js 代码 #

import { Player } from "./Players.js"
const player1 = new Player;
player1.getCharacter()

我从Players.js中导入了通过export class Player {}定义的Player类到主JavaScript文件中。随后初始化player1对象为Player类的实例，并调用了该实例的getCharacter()方法，该方法可正常运行。

但问题是：在浏览器控制台中输入player1或执行console.log(player1)时，会提示player1未定义，无法访问player的属性。

更新补充：

• 无法访问player的属性
• 实例化操作在全局作用域中进行（非嵌套）

因为使用ES模块（通过import/export）时，模块内的变量默认属于模块作用域，不会自动挂载到全局对象（如window）上，所以控制台无法直接访问。

推荐两种实用解决方式：

1. 将实例挂载到全局对象
   修改代码，把player1赋值给window的属性，让它成为全局变量：

   import { Player } from "./Players.js"
   window.player1 = new Player;
   player1.getCharacter()
   

   之后在控制台输入player1就能直接访问这个实例。

2. 用断点调试访问变量
   在代码中添加debugger语句触发断点：

   import { Player } from "./Players.js"
   const player1 = new Player;
   player1.getCharacter()
   debugger; // 代码执行到此处会暂停
   

   打开浏览器开发者工具，代码暂停后，控制台就能访问当前作用域下的player1变量。这种方式不会污染全局环境，适合临时调试。

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