用於JavaScript代理的Chrome Devtools格式化程序

Question

我最近開始在我的一個項目中使用代理。 缺點之一是，當在調試器中檢查對象時，該對象現在由javascript代理proxy封裝。

見[[Handler]],[[Target]],[[isRevoked]]我更願意只看[[Target]]引用的對象。

這是一個小麻煩，但我認為可以使用Chrome Devtools自定義格式化程序解決。

似乎這種情況相當普遍，但是我找不到任何現有的格式化程序。 我只是想仔細檢查一遍，以確保在我編寫自己的書之前還沒有書。

Answer 1

因此事實證明，這很難實現。 第一個問題是，如果沒有以下條件，就無法識別代理 ：

答：將自定義符號添加到您的代理實現中（如果您控制代理初始化代碼）

B：覆蓋window.Proxy .Proxy原型並使用Weakset基本上跟蹤每個代理初始化

最重要的是，無法訪問原始的[[Target]]對象。 但是，運行JSON.parse(JSON.stringify(obj))確實可以很好地用於console.log目的。

假設您無權修改代理處理程序，那么您的解決方案將如下所示：

// 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;
  },
}];