Вывод сообщений отладки в JavaScript Console Chrome

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

Для того, чтобы выводить сообщения отладки в консоль JavaScript в Google Chrome, используйте метод console.log():

console.log("Отладочное сообщение: вставьте здесь ваш текст");

Для определения разного типа сообщений используйте console.error() для ошибок, console.warn() для предупреждений, а console.info() для информационных сообщений. Для логирования с применением условий задействуйте console.assert(условие, "Сообщение"). Для группировки сообщений используйте console.group() и console.groupEnd(). Методы console.time("Название") и console.timeEnd("Название") помогут замерить время выполнения задач и обнаружить участки, вызывающие задержки.

А вот примеры использования методов с предложениями и замером времени:

console.assert(variable === expected, "Ошибка: значение переменной не равно ожидаемому");
console.time("Время выполнения someFunction");
someFunction();
console.timeEnd("Время выполнения someFunction"); // Это похоже на секундомер, но для программистов

Продвинутое использование консоли

Исследование объектов и трассировка стека вызовов

Для исследования объектов используйте %o:

console.log('Вот объект: %o', complexObject); // "Объективно" сложный объект

Чтобы отобразить стек вызовов, есть console.trace():

console.trace('В этой точке начинается трассировка стека вызовов');

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

Восстановление функционала консоли

Есть вероятность, что веб-приложения переопределили методы console. В таком случае вы можете обновить страницу или сохранить ссылки на оригинальные методы:

const originalConsoleLog = console.log.bind(console);

Проверка наличия консоли

В случае когда обьект console отсутствует в некоторых браузерах, обязательно проверять его наличие или создать "заглушку":

if (!window.console) {
  window.console = { log: function() {} /* по необходимости можно добавлять дополнительные методы */ };
}

Форматированный вывод

Для форматированного вывода, аналогичного printf в C, используйте подстановки в строках:

console.log("Привет, %s. Это количество ваших проблем: %i", userName, problemCount);

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

Вот так можно представить различные методы консоли JavaScript, приводя ассоциацию с разными радиостанциями:

| Функция        | Радиостанция               | Формат передачи     |
| -------------- | ---------------------- | ------------------- |
| console.log    | 📻 LO(G)-FM                  | Обсуждение любых тем  |
| console.info   | 📻 IN-FO AM                  | Информационные сообщения |
| console.warn   | 📻 WARNING Waves          | Предупреждающих сигналов |
| console.error  | 📻 ERR-OR FM          | Сообщения о тревоге     |
| console.debug  | 📻 DE-BUG Beats      | Что происходит "за кулисами" |

Теперь вы можете выбрать подходящий метод для формирования своих сообщений:

console.log("Это FM вещание в свободном формате"); // 📻 Обсуждение любых тем
console.warn("Внимание, предупреждение! Всё скоро начнется..."); // 📻 Предупреждение о начале чего-то

Приёмы отладки в консоли

Точки измерения производительности

Применяйте console.time() и console.timeEnd() в качестве временных меток для отслеживания производительности:

console.time("Загрузка данных");
fetchData().then(() => {
  console.timeEnd("Загрузка данных"); // Время замерено, данные загружены
});

Интерактивный анализ объектов

Находите возможность изучить объекты в процессе выполнения кода, используя для вывода %o:

console.log("Давайте изучим объект: %o", someObject);

Трассировка стека вызовов

Для детализированной трассировки пути выполнения кода используйте console.trace():

console.trace("Тут начинается трассировка стека вызовов без лишнего шума");

Отладка в разных браузерах

Чтобы обеспечить однородность отладки в различных браузерах, всегда проверяйте доступность функций консоли:

function safeLog() {
  if (typeof console !== 'undefined' && console.log) {
    console.log.apply(console, arguments);
  }
}

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

1. Обзор инструментов разработчика Google Chrome — Подробное руководство по инструментам разработчика Google Chrome.
2. Веб-API: Консоль – Документация по объекту console и отладочные методы.
3. Отладка JavaScript на сайте w3schools — Руководство по использованию console.log() для отладки JavaScript.
4. Отладка JavaScript с помощью инструментов разработчика Chrome для начинающих – Уроки для начинающих по теме отладки JavaScript с использованием инструментов разработчика Google Chrome.

(Список ресурсов здесь избран из-за их актуальности, информативности и ценности для изучения заданной темы.)