查看变量是否引用chrome devtool中的同一对象

Question

假设我有代码：

var a = {};
var b = {};
var c = a;

显然a !== b和a === c然而很难一眼看出哪些变量指的是同一个对象。有没有办法让Chrome devtool显示类似于引用哈希或类似的内容，以便我们一眼就能确定哪些变量引用同一个对象？

我知道有关JavaScript对象平等的规则，我的问题是Chrome devtools是否在调试方面提供任何帮助，所以我们不必在控制台中编写手动a === b来确定什么等于什么，而是通过看到相等的变量手表的视觉检查或悬停在变量上时。

Answer 1

我在Chrome中没有看到任何类似的东西。

但是，如果您不介意安装简单的实用程序方法，则可以实现自己的引用系统。

您还可以轻松扩展它以显示使用Object.entries等对象的引用。

const refs = new WeakMap();
let count = 0;

function showRef(obj) {
  const g = refs.get(obj);
  if (!g) {
    count++;
    refs.set(obj, count);
    return count;
  };
  return g;
}

const a = {};
const b = {};
const c = a;

const z = {a,b,c: {}};

console.log(`a = ${showRef(a)}`);
console.log(`b = ${showRef(b)}`);
console.log(`c = ${showRef(c)}`);

console.log(`z.a = ${showRef(z.a)}`);
console.log(`z.b = ${showRef(z.b)}`);
console.log(`z.c = ${showRef(z.c)}`);