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

Answer 1

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.

Answer 2

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

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

Answer 3

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).