在Firefox DevTools变量视图中显示值而不是getter / setter函数

Question

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:

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.

Answer 1

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

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.

Answer 2

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

Answer 3

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

Hope it helps.