Как посмотреть содержимое переменной при отладке

Короткий ответ

Оберните переменные в фигурные скобки — тогда консоль покажет их имена вместе со значениями:

const user = 'Anna';
const total = 42;
 
console.log({ user, total });

Результат:

{
  "user": "Anna",
  "total": 42
}

Вложенные объекты

JSON.stringify() с отступом показывает весь объект, включая глубокие уровни:

const order = { id: 7, customer: { name: 'Anna', address: { city: 'Rome' } } };
 
console.log(JSON.stringify(order, null, 2));

Результат:

{
  "id": 7,
  "customer": {
    "name": "Anna",
    "address": {
      "city": "Rome"
    }
  }
}

Таблица

В консоли браузера и в Node.js console.table() показывает массив объектов в виде таблицы:

console.table([
  { name: 'Anna', age: 30 },
  { name: 'Oleg', age: 25 },
]);

Точка останова

Оператор debugger останавливает код, когда открыты инструменты разработчика браузера. Там можно посмотреть все переменные:

function calculateTotal(items) {
  debugger;
  return items.reduce((sum, item) => sum + item.price, 0);
}

Частая ошибка

Консоль браузера показывает объект таким, каким он стал к моменту раскрытия, а не к моменту вывода. Если объект потом изменится, вы увидите новые значения. Выводите копию, чтобы увидеть старое состояние:

const cart = { items: 1 };
console.log(JSON.parse(JSON.stringify(cart)));
cart.items = 5;

Результат:

{
  "items": 1
}