如何从浏览器开发工具访问Webpack模块？

Question

我有一个用webpack编译的ES6模块。 要调试它，我必须手动将某些对象附加到window以便我可以通过Chrome / Safari中的调试工具引用它们：

export class Dialog {
  ...
}

window.debugdialog = Dialog;

这非常麻烦，肯定不是最好的方法。 有没有办法在不必修改源代码的情况下引用模块？

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

Answer 1

来源地图

如果您在开发环境或自己的计算机上运行服务器，则可以利用源映射，以便可以在devtools中打开原始JavaScript文件，而不是bundle.js （或等效文件）。

有许多非常棒的资源可供开始使用Sourcemaps并设置它们，包括Chrome和Webpack。

在Webpack中设置源映射可以通过添加以下配置来完成：

devtool: 'source-map'

（ 另见 ）

此外，如果您正在使用webpack cli命令，则可以使用webpack -d在开发模式下进行编译以启用源映射 。

对于Chrome， 这里有一个很好的指南来使用源地图 。

调试模块

启用源映射后，您只需打开模块的JavaScript文件，并在必要时设置断点。 当代码的编译版本执行时，源映射应该在模块的源版本中启动并中断，允许您逐步使用原始源文件。

您可以使用Ctrl + P打开您的特定源文件。

此外，在“源”面板中聚焦时，您可以使用Ctrl + Shift + O跳转到特定的class或成员声明。