Chrome 开发者工具调用属性获取器答案

【问题标题】：Chrome Developer Tools Invoke Property GetterChrome 开发者工具调用属性获取器
【发布时间】：2018-02-08 15:38:59
【问题描述】：

我的所有属性值都要求我单击它们才能看到它们。我该如何解决这个问题？

我要查看的对象是 Query Object。它似乎对我试图查看的大多数 Arcgis 对象执行此操作。

【问题讨论】：

标签： google-chrome google-chrome-devtools arcgis esri

【解决方案1】：

问题是，调用 getter 可能会产生副作用，例如

class Dog {
  get paws() {
    console.log('paws!'); //side effect
    this.paws++; // side effect
    if(this.paws > 4) {
     throw Error('oh no'); // side effect
    }

    return this.paws;
  }
}

每个 getter 都可以在您尝试调试应用程序时更改或破坏应用程序的状态。这就是为什么 DevTools 要求您手动调用这些 getter。即使你的 getter 返回一个静态值，DevTools 也无法知道这一点。

如果您真的想调用所有 getter 并快速了解这些值，您可以自己创建一个 helper：

class Dog {
 get _debug() {
  return {
    paws: this.paws,
    //...
  };
 }
}

这将添加一个新的 getter，它将为您调用所有其他 getter，并通过单击（而不是 n 次点击）为您提供它们的值。

【讨论】：

我无法为这些对象添加吸气剂。它们不是我自己创建的类/对象。
有趣。似乎 VSCode 的调试器确实会自动调用所有 getter，而不管副作用如何
无论如何，完整的 Visual Studio 也会调用 getter。它好多了。如果出现问题，您可以杀死调试器，但 IMO 值得这样做。

【解决方案2】：

你可以尝试通过 JSON stringify 来调用所有的 getter：

console.log(JSON.parse(JSON.stringify(myObj)));

【讨论】：

【解决方案3】：

您可以通过运行脚本自动调用 getter 来解决此问题。为此：

在单独的窗口中打开 DevTools。
按 CTRL+SHIFT+I
切换到控制台选项卡（检查开发工具的开发工具）
评估以下内容，然后关闭窗口

setInterval(() => {
  [...document.querySelectorAll(".source-code")]
    .map(s => [
      ...(s.shadowRoot?.querySelectorAll(
        ".object-value-calculate-value-button"
      ) || [])
    ])
    .flat()
    .forEach(s => s.click());
}, 500);

这将每 500 毫秒搜索一次调用属性按钮。并为您单击它。

【讨论】：