Question

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

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

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

Answer 1

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

在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）那么你可以add this as a snippet

以下是一个示例代码段，您只需键入＆＃39; l＆＃39;然后按标签：

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

OR为ES6：

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

Answer 3

Firefox将显示从示例API收集的错误对象属性，但正确显示在上下文中立即创建的值。我找到了lodash库（https://lodash.com/）的解决方法或者最终可以使用另一个能够完全克隆对象的js框架。

  console.dir(_.cloneDeep(objectToShowInConsole))

希望它有所帮助。