При проверке объекта JavaScript, который использует функции getter/setter для свойств (определенные с помощью Object.defineProperties) в Firefox DevTools, он показывает определенные функции getter и setter для этого конкретного свойства:
Есть ли способ показать фактическое содержимое вместо функций в этом представлении?
Изменить: как прокомментировал nils, просмотр фактического содержимого означает технически вызывать получателя.
Начиная с Firefox 65, можно вызывать геттер с помощью кнопки рядом с ним в зарегистрированном объекте.
Это было реализовано в баге 820878 соотв. выпуск 6140 на GitHub.
В версиях, предшествующих Firefox 65, вы могли выводить возвращаемое значение получателя, просто вызывая его напрямую из командной строки.
Альтернативой является использование этого обходного пути - вместо регистрации объекта:
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}})"
Firefox будет некорректно отображать свойства объекта, полученные, например, из API, но значения, созданные мгновенно в контексте, отображаются правильно. Я нашел обходной путь с библиотекой lodash (https://lodash.com/). Или, в конце концов, это можно сделать с помощью другой инфраструктуры js, которая способна полностью клонировать объект.
console.dir(_.cloneDeep(objectToShowInConsole))
Надеюсь, поможет.