Средство форматирования Chrome Devtools для прокси javascript

Question

Я недавно начал использовать прокси в одном из моих проектов.Единственным недостатком этого является то, что при проверке объекта в отладчике он теперь обернут прокси javascript proxy .

Вместо просмотра [[Handler]],[[Target]],[[isRevoked]] Я бы предпочел просто увидеть объект, на который ссылается [[Target]].

Это незначительное неудобство, но я думаю, что его можно решить с помощью пользовательского форматера Chrome Devtools .

Похоже, это будет довольно распространенным явлением, но я не могу найти какие-либо существующие средства форматирования.Просто хотел перепроверить, что там уже не было ни одного, прежде чем я отправлюсь в путь написания своего собственного.

Answer 1

Получается, что этого довольно сложно достичь.Первая проблема заключается в том, что невозможно определить прокси без:

A: Добавление пользовательского символа в реализацию прокси (если вы управляете кодом инициализации прокси)

B: Переопределение прототипа window.Proxy и использование Weakset для основного отслеживания каждого инициатора прокси

Кроме того, нет никакого доступа к оригиналу [[Target]] объект.Тем не менее, выполнение JSON.parse(JSON.stringify(obj)) действительно работает хорошо только для целей console.log.

Если у вас нет контроля над изменением обработчика Proxy, ваше решение будет выглядеть так:

// track all proxies in weakset (allows GC)
const proxy_set = new WeakSet();
window.Proxy = new Proxy(Proxy, {
      construct(target, args) {
        const proxy = new target(args[0], args[1]);
        proxy_set.add(proxy);
        return proxy;
      },
});

window.devtoolsFormatters = [{
  header(obj: any) {
    try {
      if (!proxy_set.has(obj)) {
        return null;
      }
      return ['object', {object: JSON.parse(JSON.stringify(obj))}]; //hack... but seems to work
    } catch (e) {
      return null;
    }
},
  hasBody() {
      return false;
  },
}];