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

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.

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}})"

Related