Javascript 如何在浏览器中使用模块，同时也引用DevTools中的变量和函数？

我的HTML设置如下所示：

所有ES6模块都工作正常。唯一的问题是我现在无法从DevTools中引用任何内容（比如使用控制台并键入变量以查看其值或手动使用函数）。

---

如何在能够使用DevTools的同时导入模块？谢谢

使变量在DevTools中可访问的一种方法是在window对象上创建它：

//模块中的变量
var importantNumber=1；
window.importantNumber=importantNumber；

---

如果您只有几个变量，那么这个方法就可以了，但是如果您需要在DevTools中访问更多的变量，我建议您转到DevTools中的sources选项卡，搜索您的模块并添加一个断点。当执行暂停时，您可以在DevTools控制台上访问该模块内的所有变量。

如果您希望能够从控制台的全局范围引用模块内创建的变量，则必须故意公开希望从控制台可见的每个此类变量。要么将每个变量分配给

窗口

（可能不是一个好主意-模块的全部目的是使事情更加模块化，而不会造成全局污染），要么将单个对象分配给

窗口

，您可以将模块变量分配给该窗口。例如：

//在控制台中：
设置超时（（）=>{
window.myModule.foo（）；
log（window.myModule.bar）；
});

函数foo（）{
log（'doing foo'）；
}
常量条='字符串条'；
常量thisModule={foo，bar}；
window.myModule=thisModule；
//如果您曾经重新分配变量，您也必须在此模块上重新分配它们
//或者，仅引用并重新分配此模块的属性，而不是创建独立变量
对于其他感兴趣的人，如果您对它感到满意，请使用像Webpack一样的捆绑包。我不相信（至少在这一点上）浏览器本身能够在模块上使用DevTools（其他的解决方案非常简陋，使用起来也不是很好）

希望将来，当所有主流浏览器都能够在没有捆绑包的情况下支持ES6模块时，我们将能够使用DevTools。
您能用您遇到的问题的示例演示一些示例代码吗？不是代码，一切正常。问题是当代码类型为模块时，无法使用DevTools调试代码。但是如果您尝试调试长文件，这不是很困难吗？取决于您的需要。如果您只需要调试一个大文件的一小部分，我会使用“window”方法，但是如果您需要调试所有代码，我会在一个断点处进行调试，您知道所有变量都可用，并从那里进行调试。