Посмотрите, ссылаются ли переменные на один и тот же объект в 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)}`);