Почему не работает console.log в React-компонентах и как это исправить

Вы столкнулись с ситуацией, когда console.log перестал выводить данные в React-компонентах, хотя раньше всё работало? Это частая проблема, которая может быть вызвана не только кодом, но и настройками браузера или инструментов разработчика. В этой статье мы разберём все возможные причины и дадим пошаговые инструкции для восстановления работы консоли.

Основные причины, почему не выводится console.log

Проблема может скрываться в нескольких местах. Рассмотрим каждую из них подробно.

1. Фильтры и режимы в консоли браузера

Самая частая причина - случайно включённый фильтр. В инструментах разработчика (Chrome DevTools, Firefox Developer Tools) есть возможность фильтровать сообщения по уровню (Info, Warning, Error). Если выбран только Error, то обычные console.log не будут отображаться. Проверьте вкладку Console: убедитесь, что в выпадающем списке уровней (All levels) стоит галочка напротив "Info" или выбран пункт "All".

2. Баги в React Strict Mode

Если ваш проект обёрнут в <React.StrictMode>, то в режиме разработки некоторые эффекты (useEffect) могут вызываться дважды. Это нормальное поведение для выявления побочных эффектов. Однако если вы видете двойной вывод при монтировании, но не видите обновлений - проблема не в Strict Mode, а в логике зависимостей useEffect. Убедитесь, что массив зависимостей содержит все переменные, используемые внутри эффекта.

useEffect(() => {
  console.log(selectedTags);
}, [selectedTags]); // selectedTags должен быть в массиве зависимостей

3. Ошибка в JavaScript (исключение)

Если в коде до вызова console.log происходит необработанная ошибка (например, вызов метода у undefined), выполнение скрипта прерывается, и консольный вывод не доходит до строки с логом. Проверьте вкладку Console на наличие красных ошибок. Даже если вы не видите своего лога, ошибка может быть выше по стеку.

4. Проблемы с бандлером (Webpack, Vite)

Некоторые сборщики в production-режиме удаляют console.log с помощью плагинов (например, TerserPlugin). Если вы нечаянно собрали production-версию (команда npm run build вместо npm start), все логи могут быть вырезаны. Проверьте, в каком режиме запущен ваш проект: должен быть development (NODE_ENV=development).

5. Случайное переопределение console

В коде проекта или в подключаемой библиотеке может быть строка вида console = {} или console.log = function() {}. Это полностью отключает консоль. Поищите по проекту переопределения глобального объекта console. Особенно это актуально для старых скриптов аналитики или polyfill'ов.

Пошаговая диагностика: что проверить в первую очередь

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

• Проверьте другой браузер - если в Chrome не работает, откройте Firefox или Edge. Если там тоже не работает, проблема в коде/настройках проекта.
• Откройте чистый профиль браузера - расширения (AdBlock, Privacy Badger) могут блокировать выполнение скриптов или подменять консоль. Запустите браузер в режиме инкогнито или создайте новый профиль.
• Проверьте консоль на ошибки - возможно, вы не видите логов, потому что страница падает с ошибкой раньше. Ищите красные сообщения об ошибках.
• Напишите console.log в самом верху файла - вне компонента, до любых импортов. Если он не появится - проблема глобальная (бандлер, плагин).

Пример из практики: useEffect и асинхронные запросы

В вашем коде есть два проблемных места. Первое: useEffect с зависимостью [selectedTags] выводит массив при монтировании дважды (из-за Strict Mode), но не реагирует на изменения. Это может означать, что selectedTags не меняется (ссылка на массив остаётся той же). Используйте мутабельное обновление состояния - всегда создавайте новый массив: setSelectedTags([...newTags]). Второе: в handleSubmit вы не видите лог ответа от сервера. Возможно, запрос axios.put даже не выполняется из-за ошибки выше (например, user.id равен undefined). Добавьте лог перед вызовом axios:

console.log('Данные для отправки:', updatedUserData);
axios.put('/api/editUserInfo', updatedUserData)...

Заключение

Если console.log перестал работать во всех компонентах, а откат кода не помог - проблема почти наверняка в окружении (браузер, расширения, бандлер). Начните диагностику с проверки фильтров консоли и режима разработки. Если же логи не работают только в конкретном компоненте - ищите ошибку выполнения до вызова лога или неправильную ссылку на объект состояния.