Chrome Developer Tools Invoke Property Getter

Question

All of my property values require me to click them in order to see them. How can I fix this?

The object I'm trying to view is this Query Object. It seems to do this with most Arcgis objects I'm trying to view.

Glaab

Was you able to make it show up automatically? – Concertgoer

Answer 1

You can try putting it through JSON stringify which will call all the getters:

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

Strata

Hi @Patrick64, Thanks it worked. But do you know why it appears like this? – Windowshop

Answer 2

The issue is, calling a getter can have side effects e.g.

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

Every getter can alter the state of the app or break it while you are trying to debug it. That's why DevTools ask you to invoke these getters manually. Even if your getter returns a static value, DevTools have no way of knowing that.

If you really want to invoke all getters and have a quick overview of the values, you can create yourself a helper:

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

This will add a new getter that will invoke all other getters for you and give you their values with a single click (instead of n clicks).

Warrington

I'm not able to add a getter to these objects though. They are not classes/objects that I have created myself. – Glaab

Interesting. It seems that VSCode's debugger does call all getters automatically, regardless of side effects – Vallo

Full Visual Studio also calls getters regardless. It's much nicer. You can murder the debugger if something goes wrong, but it's worth it IMO. – Silk

Answer 3

You can work-around this, by running a script to auto-invoke the getters. To do this:

1. Open DevTools in a separate window.
2. Press CTRL+SHIFT+I
3. Switch to the console tab (of the devtools inspecting devtools)
4. Evaluate the below, and close the window

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

This will search for the invoke property button every 500ms. and click it for you.

Weiman