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

Question

检查 JavaScript 对象时，它使用 getter/setter 属性函数（使用 Object.defineProperties) in the Firefox DevTools 变量视图定义，它显示定义的 getter 和 setter 这个特定的函数属性:

有什么方法可以显示实际内容而不是此视图中的功能？

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

Answer 1

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

这是在 bug 820878 resp. issue 6140 on GitHub 中实现的。

在 Firefox 65 之前的版本中，您可以通过命令行直接调用它来输出 getter 的 return 值。

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

这是一个示例片段，您可以在其中键入 '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}})"

Answer 3

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

  console.dir(_.cloneDeep(objectToShowInConsole))

希望对您有所帮助。

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