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)}`);

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

1 个答案: