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

Question

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

不想看到，[[Handler]],[[Target]],[[isRevoked]]我宁愿只看到[[Target]].

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

似乎这很常见，但我找不到任何现有的格式化程序。只是想仔细检查一下，在我开始编写自己的道路之前，那里还没有一个。

标签： javascriptgoogle-chrome-devtools

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