JS 模块 - 在 devtools 中的哪里可以看到我当前实例化的变量的当前状态？

Question

现在已经寻找了几个小时的相关 SO 线程或其他信息，但没有找到任何信息。

我的 webtool 使用 JS 模块作为其脚本，以防万一。 在我的 index.js 中，我有几个顶级函数、变量等。我希望能够从 devtools 控制台手动引用和 console.log() 它们，但是我不确定实际该怎么做那。即使在搜索我的函数名称时，我也无法在 devtools 的“内存”选项卡中的任何位置找到我的变量和其他声明的内容。

例如，我在 index.js 文件中声明了一个名为“currentInstantiatedKeybinds”的数组。所有将其或其内容记录到控制台的尝试都失败了。 此外，我有一个顶级函数，当我在控制台中按名称调用它时，它不会执行；我收到“ReferenceError：functionName not defined at :1:1”。 我如何实际引用它而不必将调试器或断点放入程序中，然后手动重新加载工具以便重新评估我想要查看的变量/函数？您不能只查看变量的当前状态吗？

在内存选项卡中，Window 对象实际存储您在脚本中声明的内容？就像所有这些都保存在哪里？我看到了一些我已声明的内容，例如我在拍摄快照时创建的类对象实例，但无法找到我的任何变量或函数。

谢谢！

Answer 1

块语句

确保您的变量位于范围的顶部（或将其分配给窗口），然后它就可以从 devtools 访问。此外，请确保对函数执行相同的操作。我会遇到的一个问题是我无法从window.onload 内部访问这些函数。例如，

let jack = 'I am jack!';
{
    let jill = 'I am jill!';
}
console.log(jack); //=> 'I am jack!'
console.log(jill); //=> Uncaught ReferenceError: jill is not defined

或

window.onload = function() {
    let jack = 'I am jack!'
    let jill = 'I am jill!'
}

console.log(jack); //=> Uncaught ReferenceError: jack is not defined
console.log(jill); //=> Uncaught ReferenceError: jill is not defined

但是，如果我想在区块外访问jack 或jill 怎么办？

let jill;
let jack = 'I am jack!';
{
    jill = 'I am jill!';
}
console.log(jack); //=> 'I am jack!'
console.log(jill); //=> 'I am jill!'

或

let jack = 'I am jack!';
{
    window.jill = 'I am jill!';
}
console.log(jack); //=> 'I am jack!'
console.log(jill); //=> 'I am jill!'

当然，上面的将jill 词法绑定到字符串'I am jill!'，而下面的只是将其分配为window 的属性。

其他疑难解答

确保您的脚本文件index.js 正确包含在文件index.html 中也很重要。例如，

<script src='index.js'></script>

或

<script src='./index.js'></script>

确保type 属性等于module 或text/javascript 或根本不包括在内。如果您想在执行脚本之前等待页面加载，请将defer 添加到标签中：

<!-- Deferred Script -->
<script src='./index.js' defer></script>

<!-- Module Script -->
<script src='./index.js' type='module'></script>

<!-- Normal Script -->
<script src='./index.js' type='text/javascript'></script>

<!-- Incorrect Script -->
<script src='./index.js' type='text/plain'></script>

<!-- Incorrect Script -->
<script src='./index.js' type='blah'></script>

旁注

希望我的回答对您有所帮助，从而解决问题。