如何在Chrome DevTools控制台提取ES6模块的导出变量用于调试？

• 临时挂载全局变量（调试专用）
  在你的app.js里添加一行代码，把导出的实例挂载到window全局对象上：

  // app.js 里的代码
  export default emmei;
  // 调试用：挂载到全局，上线记得删掉
  window.emmei = emmei;
  

  之后直接在控制台输入emmei就能访问这个实例了，注意上线前一定要移除这行，避免全局变量污染。

• 从控制台import结果中提取default导出
  你已经用await import('./app.js')拿到了模块对象，ES模块的default导出会放在模块对象的default属性里，直接解构或者取值就行：

  // 控制台执行
  const module = await import('./app.js');
  const emmei = module.default;
  // 或者简写
  const { default: emmei } = await import('./app.js');
  

  这样就能拿到emmei实例并操作了。

• 利用浏览器调试断点直接访问
  打开浏览器开发者工具的Sources面板，找到app.js文件，在定义emmei的代码行打个断点。当代码执行到断点时，在调试器的Scope区域能看到这个变量，此时直接在控制台输入emmei就能访问。

内容的提问来源于stack exchange，提问作者Imran Rafiq Rather