Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome Developer Tools Invoke Property Getter

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

enter image description here

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.

like image 303
ddschmitz Avatar asked Aug 30 '17 19:08

ddschmitz


People also ask

What is $$ in Chrome console?

jQuery style DOM queries in the console The most popular API jQuery provides is the $ , used for selecting DOM elements. The Chrome dev tools console allows you to make use of that $ selector, and more. Under the hood, $ is an alias to document.

How do I request a payload in Chrome?

# New Payload tab in the Network panelUse the new Payload tab in the Network panel when you inspect a network request with payload. Previously, the payload information is available under the Headers tab.

How do I send a Chrome console request?

Navigate to the site in Chrome, then find the request on the Network tab of DevTools. Right click the request and Copy, but Copy as fetch instead of cURL. You can paste the fetch code directly into the DevTools console and edit it, instead of using the command line. – Urosh T.


2 Answers

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

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

like image 53
Patrick64 Avatar answered Nov 13 '22 22:11

Patrick64


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

like image 42
Konrad Dzwinel Avatar answered Nov 13 '22 21:11

Konrad Dzwinel