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

Question

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

export class Dialog {
  ...
}

window.debugdialog = Dialog;

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

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

Answer 1

来源 map

如果您在开发环境或您自己的机器上运行服务器，您可以利用 sourcemaps 以便您可以在 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 跳转到特定的 类 或成员声明。