开发者工具控制台中未定义变量

Question

我一直在使用控制台检查变量，但它已停止为我工作，我不知道为什么。

为了说明问题，我有以下在 Apache 上本地运行的文件，因此我可以通过

localhost/path/to/index.html

访问它。

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="module" src="./javascript/main.js"></script>
    <title>Document</title>
</head>
<body>
    <h1>...</h1>
</body>
</html>

main.js:

console.log("from main.js");
let sillyName = { number: 7 };

在 Firefox 和 Chrome 开发人员工具控制台中，如果我开始输入“sillyName”，我希望它会自动完成为“sillyName”并显示该变量的值，但我收到一个错误，如以下屏幕截图所示：

显然我正在做一些与平常不同的事情，但我不知道是什么。任何帮助将不胜感激。

Answer 1

问题是

sillyName

是在 ESModule 中定义的，它有自己的上下文。

要使

sillyName

在控制台中可用，您应该在模块上下文中可用的

window

全局对象中定义变量：

// file: main.js
window.sillyName = { number: 7 };

另外，我建议使用

mjs

扩展：

main.mjs

。

如果将

type

的

<script>

属性更改为

text/javascript

，则

sillyName

将自动附加到当前

window

对象。

以下指南对于理解问题应该非常有用： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

从上述指南：

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

开发者工具控制台中未定义变量

问题描述投票：0回答：1

1个回答

最新问题

开发者工具控制台中未定义变量

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1