我有一个用 webpack 编译的 ES6 模块。要调试它,我必须手动将某些对象附加到 window
,以便我可以通过 Chrome/Safari 中的调试工具引用它们:
export class Dialog {
...
}
window.debugdialog = Dialog;
这非常麻烦,而且肯定不是最好的方法。有没有一种方法可以在不修改源代码的情况下引用模块?
是的,我知道断点,而且我会使用它们。但有时我想加载所有代码并通过使用内联 JavaScript 控制它来调整 UI。
最佳答案
来源 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 跳转到特定的 类
或成员声明。
关于javascript - 如何从浏览器开发工具访问 Webpack 模块?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35473222/