我有一个用webpack编译的ES6模块。为了调试它，我必须手动将某些对象附加到window，以便我可以通过Chrome/Safari中的调试工具引用它们：
window
export class Dialog { ... } window.debugdialog = Dialog;
这是非常麻烦的，肯定不是最好的方法。有没有一种方法可以在不修改源代码的情况下引用模块？是的，我知道断点，而且我使用它们。但有时我想加载所有的代码，并通过内联JavaScript控制它来调整UI。
eqqqjvef1#
如果您在开发环境或自己的机器上运行服务器，则可以利用sourcemap，以便可以在devtools中打开原始JavaScript文件，而不是bundle.js（或等效工具）。有很多很棒的资源可以让你开始使用Sourcemaps并设置它们，无论是Chrome还是Webpack。在Webpack中设置源Map可以通过添加以下配置来完成：
bundle.js
devtool: 'source-map'
（See also）此外，如果使用webpack cli命令，则可以使用webpack -d在开发模式下编译以启用源Map。对于Chrome，there's a great guide here for using source maps。
webpack
webpack -d
启用sourcemap后，只需打开模块的JavaScript文件，并在需要的地方设置断点即可。当代码的编译版本执行时，sourcemap应该在模块的源版本中启动并中断，允许您使用原始源文件逐步执行。您可以使用Ctrl+P打开特定的源文件。此外，在“源”面板中聚焦时，可以使用Ctrl+Shift+O跳转到特定的class或成员声明。
class
1条答案
按热度按时间eqqqjvef1#
源Map
如果您在开发环境或自己的机器上运行服务器，则可以利用sourcemap，以便可以在devtools中打开原始JavaScript文件，而不是
bundle.js（或等效工具）。有很多很棒的资源可以让你开始使用Sourcemaps并设置它们，无论是Chrome还是Webpack。
在Webpack中设置源Map可以通过添加以下配置来完成：
（See also）
此外，如果使用
webpackcli命令，则可以使用webpack -d在开发模式下编译以启用源Map。对于Chrome，there's a great guide here for using source maps。
调试模块
启用sourcemap后，只需打开模块的JavaScript文件，并在需要的地方设置断点即可。当代码的编译版本执行时，sourcemap应该在模块的源版本中启动并中断，允许您使用原始源文件逐步执行。
您可以使用Ctrl+P打开特定的源文件。
此外，在“源”面板中聚焦时，可以使用Ctrl+Shift+O跳转到特定的
class或成员声明。