调试使用 ES6 模块的 JavaScript 代码答案

【问题标题】：Debugging JavaScript code that uses ES6 Modules调试使用 ES6 模块的 JavaScript 代码
【发布时间】：2020-07-06 20:07:58
【问题描述】：

TL;DR：如何从调试器访问 ES 模块中定义的变量/函数/名称？

更多背景信息：我是一位经验相对丰富的 JavaScript 程序员，但对模块很陌生。我在这里遵循了 MDN 上的教程：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules。他们在这里有一组很好的例子：https://github.com/mdn/js-examples/tree/master/modules

在该集合中，例如“基本模块”示例（此处为实时代码：https://mdn.github.io/js-examples/modules/basic-modules/），例如，文件modules/square.js 中有一个名为random 的函数。假设我想在调试器中执行该函数，只是为了尝试一下，或者因为它是我的代码并且我想测试/调试它，或者我想向另一个编码人员演示该函数的作用。您希望在 REPL 或调试器中做的所有事情。有没有办法做到这一点？我已经尝试了 Firefox 调试器和 Chrome 调试器，但都没有成功。

回到模块之前的时代，该代码将被放入全局命名空间（使访问变得容易）或者被锁定在 IIFE 中（使访问变得不可能）或者可能在一些自制的模块系统中（访问依靠）。我希望新的模块系统仍然允许调试器访问模块内的名称。

谢谢。

【问题讨论】：

你尝试过 VsCode 中的marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug 扩展吗？无需编写“调试器；”在你的代码中，只需设置你的 launch.json 文件，像任何常用的 IDE 一样在旁边放置一个断点，你应该能够调试 javascript 模块

标签： javascript debugging module names inspect

【解决方案1】：

上面写着in the docs:

最后但同样重要的是，让我们明确一点——模块功能被导入到单个脚本的范围内——它们在全局范围内不可用。因此，您将只能在导入它们的脚本中访问导入的功能，而不能从 JavaScript 控制台访问它们。您仍然会在 DevTools 中看到语法错误，但您将无法使用您可能希望使用的一些调试技术。

以你之前的例子为例，你需要从一个可见的范围内调用该函数，即它被导入的地方：

import { random } from 'path/to/square.js'

debugger; // you should be able to invoke random() from here

【讨论】：

列出了替代品here
谢谢@Renaud。我在文档中读过，但我希望能更好。您列出的替代方案很有帮助。