Javascript 如何从浏览器开发工具访问网页包模块？

我有一个用webpack编译的ES6模块。要调试它，我必须手动将某些对象附加到

窗口

，以便通过Chrome/Safari中的调试工具引用它们：

export class Dialog {
  ...
}

window.debugdialog = Dialog;

这很麻烦，肯定不是最好的方法。有没有一种方法可以在不修改源代码的情况下引用模块

是的，我知道断点，并且我使用它们。但有时我想加载所有代码并通过内联JavaScript控制UI来调整它。

源代码映射 如果您在开发环境中或在自己的计算机上运行服务器，则可以利用sourcemaps，以便在devtools中打开原始JavaScript文件，而不是在

bundle.js

（或等效文件）中打开

有很多很棒的资源可以帮助您开始使用Sourcemaps并通过Chrome和Webpack进行设置

可以通过添加以下配置来完成：

devtool: 'source-map'

（）

此外，如果您正在使用

webpack

cli命令

对于铬

调试模块 启用sourcemaps后，只需打开模块的JavaScript文件，并在任何需要的地方设置断点。当代码的编译版本执行时，sourcemap应该在模块的源版本中启动并中断，从而允许您使用原始源文件逐步完成

可以使用Ctrl+p打开特定的源文件

---

此外，在“源代码”面板中聚焦时，您可以使用Ctrl+Shift+O跳转到特定的

类或成员声明。
您可以在窗口中公开
\uuuuuuu webpack\uu require（moduleId）
函数，但这需要您知道webpack分配给模块的ID。至少在默认情况下，
import
语句中使用的原始语句在网页输出文件中似乎不可用。这是否提供了从浏览器控制台从模块调用函数的方法？@SilverRampart如果在输入文件或模块中设置断点，您可以将模块的实例（或模块内的函数）设置为全局变量，然后在恢复后调用它。值得一试！（我经常这样做）。