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

Question

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

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

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

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

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

为了澄清,我webpack.config.js正在工作,我启用了源映射,这就是为什么我看到原始文件而不是乱码的bundle.js文件.具体来说,我只是想检查我导入的模块并查看其内容.

Answer 1

在 webpack.config.js 中：

• 将调试标志设置为 true
• 指示开发工具

像这样：

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 会找到它们并为您设置断点。