Отличия console.dir и console.log в JavaScript: анализ функций

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

console.log выводит объекты в простом и удобном для восприятия виде. При этом, данная функция дает возможность интерактивно исследовать содержимое объектов в консоли браузера. Это идеальный выбор для быстрой диагностики проблем!

const obj = { a: 1, b: { c: 2 } };

console.log(obj);  // "Я позволяю вам ознакомиться с содержимым объекта просто и наглядно."
console.dir(obj);  // "Я DIR. Хочешь подробности? Я раскрою абсолютно все уголки вашего объекта."

С другой стороны, console.dir представляет детальный обзор иерархии свойств объекта, что существенно помогает при тщательном анализе объектов — все аспекты будут видны без пропусков!

В зависимости от задачи, вы можете использовать console.log для 일женой диагностики, а console.dir для глубокого анализа свойств объектов.

Подробное сравнение

Реализация в браузерах

Интересная особенность: разные браузеры реализуют в своем интерфейсе console.log и console.dir по-разному. Например, Firefox обычно показывает сокращенное представление toString при использовании console.log, скрывая множество подробностей, в то время как console.dir открывает всеобъемлющую иерархическую структуру, позволяя увидеть объект в его истинном виде.

Подробнее об этом расскажет наш спикер на видео

Массивы и DOM

console.dir проявляет себя наилучшим образом, работая с массивами и DOM-объектами. Например, Chrome возвращает полное JavaScript-описание DOM-дерева в формате JSON при использовании этого метода. Тогда как console.log склонен отображать HTML-дерево со всеми его иерархиями и сложностями, что, хоть и наглядно, но не всегда информативно.

Обработка изменений и сложности

console.dir выступает как детектив в функциях логирования. Он показывает изменения в объектах в реальном времени, что бесценно для разработчиков, сталкивающихся с несоответствиями состояний объектов.

console.dir(yourObject);  // "О, изменили объект? Мы подробно рассмотрим все изменения."

При работе со сложными объектами, напоминающими многослойные луковицы, рекомендуется использовать console.dir с опцией depth, позволяющей настроить глубину отображения данных.

console.dir(yourObject, { depth: null });  // "Погружаемся на максимальную глубину! Все уровни будут засвещены."

Альтернативы

Методы консоли имеют свои ограничения. Например, при работе с объектами Mongoose, метод util.inspect из Node.js может оказаться наиболее эффективным решением.

util.inspect(yourObject, { showHidden: false, depth: null }) // "Я проникаю в твою структуру Mongoose благодаря util.inspect"

Нельзя забывать и про JSON.stringify(o), который создает снимок текущего состояния объекта в формате строки JSON. Однако, этот метод может упустить некоторые методы и символы объекта.

JSON.stringify(o)  // "Остановите, время! Вот снимок текущего состояния объекта, зафиксированный в формате JSON."

Документация

Разработчики браузеров объясняют свои аспекты работы с консолью в документации. Постарайтесь ознакомиться с документацией API консоли Chrome или Firebug Firefox для более глубокого понимания функций консоли.

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

Представьте, что console.log и console.dir – это два разных прибора для изучения объектов. console.log можно сравнить с окном в мир JavaScript-объектов (📦):

Сквозь призму `console.log`: 👓

Это дает нам прекрасное представление о содержимом объекта.

📦: "Содержит: {name: 'Foo', contents: [...]}"

В отличие от этого, console.dir дает подробный обзор всех аспектов объекта:

При использовании `console.dir`: 🧐

Разоблачая каждую деталь объекта.

📦:
  – name: 'Foo'
  – contents:
    – элемент 1: { detail: 'info' }
    – элемент 2: { detail: 'info' }

Завершение

Интерактивное исследование

Замечательно, что современные браузеры, такие как Chrome или Edge, позволяют вам взаимодействовать с результатами console.log, для углубленного исследования объектов.

Улучшение вывода console.log

Разработчики браузеров сделали возможным настройку внешнего вида логов с помощью специального форматирования. Дайте своим логам выразительности при помощи визуальных средств!

Форматирование символов

Chrome поддерживает форматирование при помощи заполнителей типа %o или %s. Настройте вывод вашего лога, как вам нравится.

Опасности изменяемости объектов

Учтите, работа с изменяемыми объектами может привести к искаженным результатам, если изменения произошли после выполнения команды вывода. Это может запутать, но в то же время, это повышает интерес к процессу разработки!

Полезные материалы

1. console: dir() static method – Web APIs | MDN — Описание документации MDN о console.dir.
2. console: log() static method – Web APIs | MDN — Подробная информация о console.log и примеры его использования.
3. Console | Node.js v21.6.1 Documentation — Официальная документация Node.js для серверного JavaScript.
4. Объект console — Понятный пособие по использованию методов консоли JavaScript.
5. Консоль разработчика — Подробный курс по инструментам разработчика для работы с JavaScript в браузерах.
6. За пределами Console Log за 100 секунд – YouTube — Обзор усложненных методов работы с console.log().
7. Как использовать JavaScript Console разработчика | DigitalOcean — Инструкция по эффективному использованию консоли JavaScript для разработчиков.