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

Question

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

export class Dialog {
  ...
}

window.debugdialog = Dialog;

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

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

Answer 1

源地图

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

有许多令人敬畏的资源可用于开始使用Sourcemaps并设置它们，包括Chrome和Webpack。

Setting up Source Maps in Webpack可以通过添加以下配置来完成：

devtool: 'source-map'

（See also）

此外，如果您正在使用webpack cli命令，you can utilize webpack -d to compile in development mode to enable your sourcemaps。

对于Chrome，there's a great guide here for using source maps。

调试模块

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

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

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