导入的变量有效但在调试器中访问时未定义（在相同的范围内）

Question

我使用webpack + es6来构建我的文件。我在Math.js中导出模块，然后在Main.js中导入。

在后者中，我使用模块进行计算，然后在调试器中设置停止。前者工作但当我试图在控制台中使用它时没有定义。

范围是相同的 - 为什么不在控制台中定义模块？

// Math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

// Main.js
import * as mathTest from "./Math.js";
console.log("2π = " + mathTest.sum(mathTest.pi, mathTest.pi));
debugger

// Output
// The statement from the file writes properly but the debugger fails (but <this> is the same)

Answer 1

虽然操作可能会迟到，但这仍然是一个有效的问题。

虽然看起来您正在调试自己编写的代码，但事实并非如此。

原因是你的代码被 webpack 压缩和丑化了（并且可能被 babel 转译了）。编译后的代码由浏览器执行，然后浏览器通过源映射将其映射到您的源代码。

浏览器尽最大努力使这种体验尽可能无缝。在大多数情况下，您甚至不会注意到这种错觉，但在其他情况下，它可能会让您感到困惑。由于变量和模块导入在 uglification 过程中被重命名，它们在控制台中不再以其原始名称可用。

因此，为了找出导入模块的值，您必须观察编译后的变量。

自 2021 年起，您的浏览器将为此提供大量帮助。正如您在下图中所见，虽然 Thing 将是 undefined，但 _Thing 会为您提供预期结果，甚至是自动完成建议的结果。

另外，请注意[sm]中的App.js[sm]，它表示您正在观察源地图版本而不是执行的代码。

或者，我们可以观察编译/执行的代码，并验证 Thing 是否已作为 _Thing 导入。

相关且经常遇到的问题：

• 调试器无法在所需的断点处停止。
• 调试器中的断点行不可用。
• 以及指向丑化代码的控制台错误。

如果您想了解原因，请深入研究源映射： How do source maps work?