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

Question

我最近开始在我的一个项目中使用代理。这样做的一个缺点是，在调试器中检查对象时，它现在由代理javascript proxy包装。

而不是看到[[Handler]],[[Target]],[[isRevoked]]我更愿意只看到被引用的对象[[Target]]。

这是一个小小的不便，但我认为可以使用Chrome Devtools custom formatter来解决。

看起来这很常见，但我找不到任何现有的格式化程序。只是想在我开始写自己的道路之前仔细检查一下是否已经有一个。

Answer 1

所以事实证明这是很难实现的。第一个问题是如果没有以下情况就不可能识别代理：

A：向您的代理实现添加自定义符号（如果您控制代理初始化代码）

B：覆盖window.Proxy原型并使用 Wea​​kset 基本上跟踪每个代理初始化

最重要的是，无法访问原始[[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;
  },
}];