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

Question

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

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

这是特定文件中导入语句的一个示例（顺便说一句，每个导入的模块都导入一个对象）：

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

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

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

Answer 1

webpack.config.js中的

：

• 将debug flag设置为true
• 表示一个devtool

像这样：

.contains(...)

如果您习惯从命令行启动babel，可以在命令行上设置相同的选项，如下所示：

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

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

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

然后您可以从命令行轻松启动它，而不必记住所有选项和标志：

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

脚本中的代码与您在控制台上键入的内容完全相同（至少在大多数情况下）。 npm run test（或者你称之为脚本的任何东西）是你可以使用的快捷方式。

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

Answer 2

Webpack的Github上有一个未解决的问题。对我来说最好的答案是第二点here。

记住webpack的命名约定。如果您处于断点，并且您的导入类似于从“ xxx”导入UserModel。然后，Webpack绑定通常称为 WEBPACK_IMPORTED_MODULE_0__UserModel 。如果您开始输入__然后从那里开始，devtools通常足够友好，可以为您自动完成。