如何通过Chrome、Edge等DevTools查看JavaScript内存中的指定变量

你搜索不到变量的核心原因 #

直接搜索变量名找不到，是因为用let/const在全局作用域声明的变量不会挂载到window对象上，而堆快照的默认搜索逻辑不会直接索引这类全局非挂载属性的变量名，不是操作流程错误。

验证操作步骤 #

方式1：修改代码方便直接搜索（推荐，适合调试阶段） #

把要验证的变量挂载到可被快照索引到的全局对象（比如window）上，修改后代码如下：

// 挂载到window后，堆快照可直接索引变量名
window.myBoolean = undefined;

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

document.getElementById('remove').addEventListener('click', () => {
    // 仅赋值为null时，变量本身还存在，指向的布尔值会被GC回收
    window.myBoolean = null;
    // 完全移除变量用这行：delete window.myBoolean
});

方式2：不改代码临时验证 #

如果不想修改业务代码，在拍快照前，先在开发者工具的控制台执行：
window.testTemp = myBoolean
手动给变量加一个全局引用，再拍快照即可搜索到。

堆快照具体操作流程 #

• 打开Chrome/Edge开发者工具，切换到「内存」标签页，profiling类型选择「堆快照」
• 执行前置操作（比如还没点击添加按钮），点击「拍摄快照」，生成后在顶部过滤器搜索框输入变量名，此时无对应结果/结果值为undefined，说明变量未存入有效内容
• 点击添加按钮完成赋值后，再次拍摄快照，搜索变量名即可看到值为true的条目，证明变量已存在于内存中
• 点击移除按钮后，先点开发者工具顶部的垃圾桶图标手动触发垃圾回收，再拍摄第三份快照：如果是赋值为null，搜索结果会显示值为null；如果是执行了delete操作，将搜索不到对应条目，证明变量已从内存中移除

参考操作截图 #

内容的提问来源于stack exchange，提问作者Grizzly