CODEWITHSUNDEEP
javascriptfirefoxfirefox-developer-tools
Marc
Marc

Reputation: 596

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

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

enter image description here

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

Edit: as nils commented, viewing the actual content means technically invoking the getter.

Upvotes: 16

Views: 3813

Answers (3)

hadankar
hadankar

Reputation: 1

Firefox will display incorrectly object properties gathered from for example API, but values created instantly in context are shown properly. I found a workaround with lodash library (https://lodash.com/) Or eventually it is possible to do it with another js framework, which is able to fully clone object.

  console.dir(_.cloneDeep(objectToShowInConsole));

Upvotes: 0

kiwicopple
kiwicopple

Reputation: 1577

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

console.log(objectVar)

You can assign the current state into an empty object and then log it:

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

Sidenote: writing this gets tedious fast so if you use a code editor (Atom/VScode) then you can add this as a snippet

Here is an example snippet where you can just type 'l' then 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}})"

Upvotes: 10

Sebastian Zartner
Sebastian Zartner

Reputation: 20095

Since Firefox 65 this is possible to invoke a getter via a button next to it within the logged object.

Button to invoke a getter

This was implemented in bug 820878 resp. issue 6140 on GitHub.

In versions prior to Firefox 65 you could output the getter's return value by simply calling it directly via the command line.

Upvotes: 10

Related Questions