Вывод структуры объектов в JavaScript: аналог var_dump PHP

Быстрый ответ

В JavaScript быстро отладить код можно с помощью аналогов функций var_dump или print_r из PHP — console.log() и console.dir():

console.dir({ name: "Alice", age: 25 }); // Представьтесь, пожалуйста, Алиса!

Если вам требуется просматривать объект в форматированном виде, можно использовать JSON.stringify():

console.log(JSON.stringify({ name: "Alice", age: 25 }, null, 2)); // Показывайте карты, Алиса.

Глубокая отладка с использованием пользовательских и продвинутых методов

Если стандартный console.log() не способен пролить свет на мрачные глубины вашего объекта JavaScript, на помощь придут более мощные и специализированные инструменты:

function debug(obj) {
    return JSON.stringify(obj, (key, value) =>
        typeof value === 'function' ? '' + value : value, 2
    );
}
console.log(debug({ name: "Alice", age: 25, greet: () => "Hello!" })); // Функции замаскированы, но их суть видна.

Отладка в браузере и отладка в Node.js

Нельзя забывать про средства разработки в браузере, которые подобны увеличительному стеклу Эркюля Пуаро. Но если вам предстоит работать вне браузера, доступны и другие возможности:

util.inspect в Node.js:

const util = require('util');
console.log(util.inspect(obj, { showHidden: false, depth: null, colors: true }));

Алгоритм структурированного клонирования:

console.log(structuredClone(obj)); // Функция детектора лжи в действии.

Добавляем в арсенал средства для различия типов

В JavaScript не всегда просто отличить типы данных: например, typeof не различает null и object. Но для этого есть решение:

function typeVisualization(obj) {
    for (const [key, value] of Object.entries(obj)) {
        console.log(`${key} (${typeof value}):`, value);
    }
}
typeVisualization({ id: 1, name: null, isDeveloper: true }); // Теперь здесь нет места для скрытий!

Визуализация

Вы преуспеваете в роли детектива JavaScript, раскрывая скрытые истины, как это делают var_dump или print_r в PHP:

Под прицелом аналитика:

console.log(obj);  // Фронтальная беседа.
console.dir(obj);  // Секреты раскрываются с помощью увеличительного стекла.
JSON.stringify(obj, null, 2);  // Все подано четко и понятно.

Так вы раскрываете тайны объекта, одну за одной.

Совместимость и особые случаи

Создать универсальный инструмент, подобный кубику Рубика, требует определенных навыков. Циклические ссылки, например, могут "сломать" JSON.stringify(). В этом случае на помощь приходят flatted.js или специальные функции замены.

Создание гибких и высокоэффективных отладчиков

Будьте реалистами: не все проблемы решаются с помощью одного console.log(). Применяйте ленивую загрузку и пагинацию для ускорения процесса отладки и чтобы браузер не "зависал".

Изучение документации

Владение инструментами отладки — это не только знание их функций, но и умение эффективного их использования. Прочитайте подробную документацию по таким инструментам, как console.log(), console.dir() и JSON.stringify(), чтобы улучшить свои навыки.