javascript - 如何通过 devtools(chrome、Edge 等)查看 JavaScript 使用的内存中具体有哪些变量？

Question

这可能吗？我只想查看 x 变量是否在内存中(我不想查看总内存使用量等)，例如，我想要按下按钮时的 bool 值变量已初始化，在设置该变量之前，显然内存中没有任何内容，但按下按钮后，它现在应该在内存中(并反向执行相同操作)，我如何查看该变量是否实际上在内存中或不，在开发工具中？

我在 YouTube 上看过做同样练习的视频，只需将变量的名称放在内存选项卡的搜索过滤器中(拍摄快照后)，它就会显示它是否在内存中，但是当我这样做变量在我看来不存在。

let myBoolean; // this can be a number, string, array, etc.

document.getElementById('add').addEventListener('click', () => {
    myBoolean = true;
});

document.getElementById('remove').addEventListener('click', () => {
    myBoolean = null;
});

Answer 1

是的。为此，您需要在时间轴上打开 Devtools -> Memory -> Allocation Instrumentation。

1. 开始分配记录。
2. 在浏览器中运行您的代码，或者您可以在控制台中简单地键入如下内容:window.data = 'some value';。
3. 停止分配记录。
4. 选择时间轴上的第一个峰值。

之后您将能够在创建的快照的 (system) 部分中看到您的变量。