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

Question

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

export class Dialog {
  ...
}

window.debugdialog = Dialog;

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

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

Answer 1

源地图

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

有许多很棒的资源可以帮助您开始使用 Sourcemaps 并使用 Chrome 和 Webpack 设置它们。

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

devtool: 'source-map'

（也可以看看）

此外，如果您使用webpackcli 命令，您可以利用webpack -d在开发模式下编译来启用您的 sourcemaps。

对于 Chrome，这里有一个关于使用源映射的很棒的指南。

调试模块

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

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

此外，当焦点位于“源”面板时，您可以使用Ctrl+ Shift+O跳转到特定class或成员声明。