Show values ​​instead of getter / setter functions in Firefox variable view DevTools

Question

When validating a JavaScript object that uses the getter / setter functions for properties (defined using Object.defineProperties ) in Firefox DevTools , it shows the specific getter and setter functions for this particular property:

Is there a way to show actual content instead of functions in this view?

Edit: as nils commented, looking at the actual content means technically invoking the recipient.

Answer 1

Starting with Firefox 65, you can call the getter using the button next to it in the registered object.

This was implemented in bug 820878 respectively. release 6140 on github .

In versions prior to Firefox 65, you could display the return value of the recipient simply by calling it directly from the command line.

Answer 2

An alternative is to use this workaround - instead of registering the object:

console.log(objectVar) 

You can assign the current state to an empty object, and then register it:

 console.log(Object.assign({}, objectVar)) // works on all browsers // OR console.log({...objectVar}) // es6 only 

---

Note: writing this is fast and tedious, so if you use the code editor (Atom / VScode), you can add it as a snippet

Here is an example snippet where you can simply type 'l' and press tab:

 '.source.js': 'console.log object': 'prefix': 'l' 'body': "console.log('${1:variable}', Object.assign({}, ${1:variable}))" 

OR for ES6:

 '.source.js': 'console.log object': 'prefix': 'l' 'body': "console.log('${1:variable}', {...${1:variable}})" 

Answer 3

Firefox will not correctly display object properties obtained, for example, from the API, but values ​​created instantly in context are displayed correctly. I found a workaround with the lodash library ( https://lodash.com/ ). Or, in the end, this can be done using another js infrastructure that is able to fully clone an object.

  console.dir(_.cloneDeep(objectToShowInConsole)) 

Hope it helps.