javascript - 如何在 chrome 调试器中检查 webpack ES6 模块

Question

在使用 Webpack 捆绑我的应用程序之前，我使用 IIFE 创建模块，然后将它们附加到 window 对象上，以便我可以访问它们。这使得在 chrome 浏览器中进行调试变得非常简单，因为模块都是全局可用的，我可以使用断点检查它们。

我最近转而使用 Webpack 来捆绑我的应用程序，这非常棒。但是，现在当我设置断点并想要检查导入的模块时，我无法通过引用模块名称来这样做。我很确定这是因为在幕后，Webpack 将模块重命名为其他名称。

这是一个特定文件中导入语句的示例(顺便说一句，每个导入的模块都导入了一个对象):

在同一个文件中，当我设置断点时，我希望能够像以前那样检查模块的内容。在下图中，我试图访问 CustomHelpers 模块，它只是存储在对象中的辅助函数的集合。

关于在 Chrome 控制台中调试时如何引用这些导入的模块有什么想法吗？

澄清一下，我的 webpack.config.js 正在运行并且我启用了源映射，这就是为什么我看到的是原始文件而不是乱码的 bundle.js 文件。具体来说，我只是想检查我导入的模块并查看它们的内容。

Answer 1

在 webpack.config.js 中:

• 将调试标志设置为真
• 指出一个开发工具

像这样:

module.exports = {
entry: "./index.js", //"./tryfirst/tree.js", //
output: {
    path: __dirname,
    filename: "bundle.js"
},
debug: true,
devtool: 'cheap-module-eval-source-map',
module: {
    loaders: [
    ...

如果您习惯于从命令行启动 babel，您可以像这样在命令行上设置相同的选项:

babel src -d lib --presets es2015 --sourceMaps inline; webpack --devtool eval-source-map

可以将同一行作为脚本添加到 package.json 中。只需将类似这样的内容添加到“脚本”部分:

"scripts": {
  ...,
  "test": "babel src -d lib --presets es2015 --sourceMaps inline; webpack --devtool eval-source-map"
 },

然后您可以从命令行轻松启动它，而无需牢记所有选项和标志:

npm run test

脚本中的代码与您在控制台上键入的内容完全相同(至少在大部分情况下如此)。 npm run test(或者你称之为脚本的任何东西)是你从那时起可以使用的快捷方式。

如果它仍然没有在断点处停止，请尝试添加命令“debugger;”在所需的断点处 在您实际的 javascript 代码中。看起来很有趣，但通常可以解决问题。 Chrome 会找到它们并在那里为您设置断点。