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

【问题标题】：How to inspect ES6 modules in chrome debugger如何在 chrome 调试器中检查 ES6 模块
【发布时间】：2017-03-11 15:54:02
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

您使用的是压缩包吗？我知道如果生成的脚本被缩小，源地图上的 Chrome 断点就不能很好地工作。即使他们不是，但它也会受到打击。通常最好将“调试器”语句放在源代码中，因为它们具有完全相同的效果！

标签： javascript google-chrome debugging webpack es6-modules

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

【讨论】：

嗯，所以我认为您误解了我的问题-我的 webpack.config.js 工作正常，并且启用了源映射，这就是为什么它映射回原始文件而不是乱码bundle.js 文件。但是，当我在 sourcemap 中设置断点并且我想专门检查导入 MODULES 的内容时，我看不到它们。
嗨@wmock，我想我理解你的问题，但它适用于我的配置 - 即使在 node_module 中设置了断点。只是试图找出 babel-loader 配置中的 'code'exclude: /node_modules/'code' 是否有所不同，但在我的情况下，它已设置并且它仍然可以工作。另一方面，发生错误（通常是在您需要调试时）有时会使原本正常工作的源映射突然冒烟，但这不仅限于模块文件。
感谢您的跟进 - 我想知道是不是因为我的 webpack.config.js 文件中缺少 debug: true 配置，因为您的配置中的其他所有内容也是我的配置。
不幸的是，添加debug: true 似乎并不能解决问题。似乎我导入的默认对象无法在 chrome 控制台中检查:(
@wmock 您是否偶然发现了这一点？我遇到了同样的问题

【解决方案2】：

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

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

【讨论】：