Как вывести JavaScript объект в консоль и на страницу: полное руководство

Проблема и её причина

Когда вы пытаетесь вывести объект через console.log() или вставить его в HTML, JavaScript автоматически вызывает метод toString() для объекта. Стандартная реализация этого метода возвращает строку [object Object], что совершенно бесполезно для отладки. К счастью, есть несколько способов получить читаемое представление объекта.

Решение 1: Использование JSON.stringify()

Самый универсальный метод — преобразовать объект в JSON-строку с помощью JSON.stringify(). Это работает и в консоли, и на странице:

let user = {
  name: "Анна",
  age: 25,
  isAdmin: true,
  hobbies: ["чтение", "программирование"]
};

// В консоли
console.log(JSON.stringify(user));
// Вывод: {"name":"Анна","age":25,"isAdmin":true,"hobbies":["чтение","программирование"]}

// На странице
document.getElementById('output').innerHTML = JSON.stringify(user);

// С форматированием (отступы)
console.log(JSON.stringify(user, null, 2));
// Вывод с отступами:
// {
//   "name": "Анна",
//   "age": 25,
//   "isAdmin": true,
//   "hobbies": ["чтение", "программирование"]
// }

Решение 2: Использование console.table()

Для массивов объектов console.table() — это лучший выбор. Он отображает данные в виде таблицы прямо в консоли:

let users = [
  { name: "Анна", age: 25 },
  { name: "Иван", age: 30 },
  { name: "Мария", age: 28 }
];

console.table(users);
// В консоли появится таблица с колонками: (index), name, age

Решение 3: Рекурсивный обход объекта

Если вам нужно вывести объект на страницу в более читаемом виде, можно написать функцию для рекурсивного обхода:

function displayObject(obj, container) {
  let html = '<ul>';
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (typeof obj[key] === 'object' && obj[key] !== null) {
        html += `<li><strong>${key}:</strong> ${displayObject(obj[key])}</li>`;
      } else {
        html += `<li><strong>${key}:</strong> ${obj[key]}</li>`;
      }
    }
  }
  html += '</ul>';
  return html;
}

let user = {
  name: "Анна",
  age: 25,
  address: {
    city: "Москва",
    street: "Тверская"
  }
};

document.getElementById('output').innerHTML = displayObject(user);

Решение 4: Использование Object.entries()

Современный ES6 способ — преобразовать объект в массив пар ключ-значение:

let user = { name: "Анна", age: 25, isAdmin: true };

// В консоли
console.log(Object.entries(user));
// Вывод: [["name", "Анна"], ["age", 25], ["isAdmin", true]]

// На странице
let output = '';
for (let [key, value] of Object.entries(user)) {
  output += `${key}: ${value}<br>`;
}
document.getElementById('output').innerHTML = output;

Важные замечания

• В современных браузерах (Chrome, Firefox, Edge) console.log(object) показывает интерактивное дерево объекта, которое можно развернуть. Попробуйте просто console.log(user) — возможно, вы увидите не [object Object], а кликабельный объект.
• JSON.stringify() не работает с циклическими ссылками и некоторыми специальными типами (Date, Map, Set). Для них нужно писать дополнительные обработчики.
• Для отладки в браузере используйте debugger; — это остановит выполнение и покажет все переменные в инструментах разработчика.

Выберите подходящий метод в зависимости от задачи: JSON.stringify() для быстрой отладки, console.table() для массивов, рекурсивный обход для красивого вывода на страницу.

let user = { name: "Анна", age: 25 };
console.log({...user}); // В консоли Chrome покажет объект как разворачиваемое дерево

let user = { name: "Анна", age: 25, role: "admin" };

// Простой вывод
document.getElementById('output').innerHTML = `
  <pre>${JSON.stringify(user, null, 2)}</pre>
`;

// Или с кастомным стилем
let html = Object.keys(user).map(key => 
  `<p><b>${key}:</b> ${user[key]}</p>`
).join('');
document.getElementById('output').innerHTML = html;