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

Question

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

我想要查看的对象是Query Object。它似乎与我正在尝试查看的大多数Arcgis对象一起执行此操作。

Answer 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并快速浏览一下这些值，你可以自己创建一个帮手：

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

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

Answer 2

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

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

Answer 3

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

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

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

这将每500ms搜索一次invoke属性按钮。然后为您点击。