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

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