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

Question

检查JavaScript对象时,它使用Firefox DevTools变量视图中的属性(使用Object.defineProperties定义)的getter/setter函数,它显示了此特定属性的已定义的getter和setter函数:

有没有办法显示实际内容而不是此视图中的功能？

编辑:正如nils评论的那样,查看实际内容意味着从技术上调用getter.

Answer 1

从Firefox 65开始,可以通过记录对象中旁边的按钮调用getter.

这是在bug 820878中实现的.在GitHub上发布6140.

在Firefox 65之前的版本中,只需通过命令行直接调用它即可输出getter的返回值.

Answer 2

另一种方法是使用此解决方法 - 而不是记录对象:

console.log(objectVar)

您可以将当前状态分配给空对象,然后将其记录下来:

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

旁注:写这个很快就很繁琐,所以如果你使用代码编辑器(Atom/VScode)那么你可以把它作为一个片段添加

这是一个示例代码段,您只需键入"l",然后按Tab键:

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

或ES6:

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