Chrome开发者工具调用属性Getter

Question

我需要点击属性值才能查看它们。我该怎么解决这个问题？

我想查看的对象是查询对象(Query Object)，似乎对我尝试查看的大多数Arcgis对象都是如此。

- ddschmitz

---

你能使其自动显示吗？ - James H.

Answer 1

你可以尝试使用JSON.stringify来序列化对象，这将调用所有的getter方法：

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

- Patrick64

---

嗨@Patrick64，谢谢，它起作用了。但是你知道为什么会出现这种情况吗？ - Md. Robi Ullah

Answer 2

问题在于，调用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并快速查看值的概述，则可以自己创建一个帮助程序：

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

这将添加一个新的getter，可以在单击一次后为您调用所有其他getter并给出它们的值（而不是n次单击）。

- Konrad Dzwinel

---

我无法为这些对象添加getter。它们不是我自己创建的类/对象。 - ddschmitz

有趣。看起来VSCode的调试器会自动调用所有getter，而不考虑副作用。 - Max Coplan

完整的Visual Studio也会调用getter。这很好。如果出了问题，你可以杀掉调试器，但我认为这是值得的。 - DAG

Answer 3

您可以通过运行脚本自动调用getter来解决此问题。操作步骤如下：

1. 在单独的窗口中打开DevTools。
2. 按下 CTRL+SHIFT+I
3. 切换到控制台选项卡（检查DevTools的DevTools）
4. 评估以下内容，并关闭窗口

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

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

- Sam Denty