Chrome javascript 代理的 Devtools 格式化程序

Question

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

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

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

这似乎很常见，但我找不到任何现有的格式化程序。只是想在我自己写之前仔细检查一下是否已经没有了。

Answer 1

原来这是很难实现的。第一个问题是 impossible to identify a Proxy 没有：

A: 将自定义交易品种添加到您的代理实施（如果您控制代理初始化代码）

B: 覆盖 window.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;
  },
}];

Chrome javascript 代理的 Devtools 格式化程序

Chrome Devtools formatter for javascript proxy

javascript

google-chrome-devtools