Консоль браузера: как владельцу увидеть ошибки сайта за две минуты

Клиент пишет: «Нажимаю „Отправить“ — ничего не происходит». Вы открываете сайт, нажимаете — всё работает. Программист отвечает: «У меня тоже нормально». Заявки падают, причину никто не видит. А сайт в этот момент уже сам рассказывает, что у него болит: в браузере есть встроенное окно, куда страница пишет свои ошибки. Это консоль разработчика браузера, и открыть её может любой человек без технических знаний — ничего устанавливать не нужно, она уже есть в Chrome, Яндекс.Браузере, Firefox и Safari.

Я работаю с сайтами с 2005 года и вижу: владелец, который умеет снять ошибки из консоли, экономит дни переписки. Вместо «форма не работает» он присылает конкретную строку — и правка занимает полчаса вместо недели.

Зачем владельцу открывать консоль

Сайт собирается слоями. Сервер отдаёт страницу, браузер её строит, потом подгружает стили, шрифты, картинки, скрипты аналитики, чат, калькулятор, карту. Любой из этих кусков может не приехать. Если не приехала картинка — вы увидите это глазами. Если не приехал скрипт, который отправляет форму, страница будет выглядеть идеально, а кнопка станет мёртвой.

Второй смысл — доказательство. «У меня не работает» не значит ничего: у подрядчика другой браузер и другие расширения. Текст ошибки — факт, в нём есть имя файла и номер строки, то есть адрес проблемы. Третий смысл — контроль после правок. Я и в технических и SEO-проверках сайта начинаю с неё — она за минуту отсекает половину гипотез.

Как открыть консоль: в общих чертах

Во всех браузерах на компьютере это называется «инструменты разработчика» и лежит в меню браузера, в разделе служебных инструментов. Быстрее так: щёлкните правой кнопкой мыши по странице и выберите пункт про исследование или проверку элемента. Откроется панель сбоку или снизу, с рядом вкладок. Названия бывают на русском и на английском — ориентируйтесь по смыслу, интерфейсы меняются от версии к версии.

Момент, который экономит много нервов: консоль показывает то, что произошло после открытия панели. Если вы потыкали кнопки, а потом открыли панель, там будет пусто. Правильный порядок: открыть панель, обновить страницу, повторить сломанное действие.

На телефоне встроенной консоли нет. Если проблема только на мобильном, в панели на компьютере есть переключатель показа страницы в узком мобильном виде — этого обычно хватает. Полная проверка с подключением телефона кабелем — уже задача исполнителя.

Вкладки: что за что отвечает

Из всей панели владельцу нужны две вкладки. Остальные — рабочие инструменты верстальщика.

Вкладка	Что показывает	Нужна ли владельцу
Консоль (Console)	Сообщения страницы: ошибки скриптов, предупреждения, отладочные записи	Да, главная
Сеть (Network)	Все файлы, которые браузер запросил, и ответ сервера на каждый	Да, вторая по важности
Элементы (Elements)	Код страницы, можно временно менять текст у себя в браузере	Иногда
Источники (Sources)	Файлы скриптов, точки останова	Нет
Производительность	Куда уходит время при загрузке	Нет, для скорости есть отдельные сервисы
Приложение (Application)	Cookies, хранилище, кэш	Редко — очистить данные сайта

Внутри «Консоли» есть фильтры: всё, только предупреждения, только ошибки. По умолчанию показано всё, и там много мусора. Сразу включайте фильтр по ошибкам — строк станет в разы меньше.

Красные ошибки: с них начинаем

Красный цвет означает: скрипт не выполнился. Не «сработал плохо», а остановился, и всё, что он должен был делать дальше, не произошло. Поэтому одна красная строка иногда ломает сразу и форму, и меню, и слайдер: они висят на файле, который упал в начале. В строке три части: тип ошибки, описание и справа имя файла с номером строки.

Что видите	Что это значит	Срочность
ReferenceError: … is not defined	Скрипт зовёт то, чего на странице нет: библиотека не загрузилась или загрузилась позже, чем нужно	Срочно, обычная причина мёртвой кнопки
TypeError: cannot read properties of null	Скрипт ищет блок на странице и не находит — часто после правки шаблона	Срочно
Failed to load resource: 404	Файла нет на сервере	Скрипт или стиль — срочно, старая картинка — нет
Failed to load resource: 500	Сервер сломался на запросе. Браузер и расширения тут ни при чём	Очень срочно, писать хостеру
Mixed Content	Защищённая страница тянет файл по незащищённому адресу	Срочно, ломает замок в адресной строке
Blocked by CORS policy	Страница обращается на чужой адрес, а тот не разрешает	Срочно, если это ваш сервис отправки форм
net::ERR_BLOCKED_BY_CLIENT	Запрос заблокировал не сайт, а расширение в вашем браузере	Не срочно, это ваш блокировщик

404 на файлы: безобидно на вид

404 в консоли — «браузер попросил файл, сервер сказал, что такого нет». Дальше всё зависит от файла. Пропал файл стилей — страница поедет, блоки разъедутся. Пропал скрипт — выглядит нормально, но часть кнопок мертва. Пропал шрифт — текст станет чужим, но читаемым.

Хуже, когда битый файл подключён на всех страницах: сайт не падает, но каждый посетитель делает лишний запрос и получает отказ. Такие хвосты остаются после удаления плагина или смены темы — код подключения вычистили не весь.

Важное различие: 404 на файл в консоли и 404 на страницу сайта — разные вещи. Первое — мелочь в загрузке, второе видят поисковики. Со вторым разбираются через проверку карты сайта и ошибок sitemap, а не через консоль.

Смешанный контент: почему пропал замок

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

Причина почти всегда одна: сайт когда-то переехал на защищённый протокол, а в текстах и настройках остались старые адреса. Лечится заменой в базе данных с резервной копией: через редактор страниц всё не вычистить, часть адресов сидит в настройках темы и модулей.

На что не обращать внимания

Главная ошибка новичка — испугаться количества строк. Большая часть сообщений там норма.

Жёлтые предупреждения. Их десятки, смысл обычно «этот способ записи устарел». Сайт работает, посетители не замечают, поисковики не видят.

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

Ругань рекламных и аналитических скриптов. Пиксели и счётчики регулярно пишут в консоль своё и иногда падают. На сайт это не влияет, влияет только на данные в их отчётах.

Сообщения про cookies. Это политика браузера, а не поломка сайта. Отладочные записи серым — пометки разработчика, безвредно.

Сравнение: консоль, сервисы и специалист

Инструмент	На какой вопрос отвечает	Что не увидит	Время
Консоль браузера	Почему сломалась кнопка, форма, карта, чат на этой странице	Индексацию, дубли, тексты	2–5 минут
Вкладка «Сеть»	Что грузится, чего нет, что отвечает сервер	Логику скриптов	5–10 минут
Онлайн-сервисы проверки	Скорость, мета-теги, битые ссылки	Ошибки, возникающие только при клике	10–20 минут
Панель веб-мастера	Что видит робот: индексация, коды ответа	Всё, что происходит в браузере посетителя	Смотреть регулярно
Специалист	Причину, её устранение и связи между блоками	—	От часа до нескольких дней

Консоль — быстрая диагностика симптома, сервисы — общий срез, панель веб-мастера — взгляд робота. Про второе и третье подробнее в материале о том, как проверить SEO сайта своими силами.

Порядок действий на пять минут

1. Откройте страницу, где что-то не работает.
2. Откройте панель через правую кнопку мыши и пункт про исследование элемента.
3. Перейдите на вкладку «Консоль», включите фильтр только по ошибкам.
4. Обновите страницу, не закрывая панель. Без этого шага ошибок загрузки не увидите.
5. Посмотрите, появились ли красные строки сами, без ваших действий, — тогда проблема при загрузке.
6. Повторите сломанное действие и следите, появляется ли новая строка именно в этот момент.
7. Отсейте чужое: повторите всё в режиме инкогнито.
8. Откройте вкладку «Сеть», обновите страницу и найдите строки, где код ответа не 200 и не 304.

Если красных строк нет, а кнопка не работает — дело не в браузере. Значит, форма отправляется, но письмо не доходит либо сломана логика на сервере. Консоль тут бессильна.

Что отдать программисту

Скриншот панели — плохой вариант: текст мелкий, адреса обрезаны. Нужен текст: по строке можно щёлкнуть правой кнопкой и скопировать сообщение, в части браузеров есть сохранение всего в файл.

Хорошая заявка — восемь строк: полный адрес страницы; браузер и устройство; что вы делали по шагам; текст ошибок целиком с именами файлов; повторяется ли в инкогнито; повторяется ли на телефоне. Фотография монитора не подходит не из придирчивости — на ней не читается имя файла, а без него искать негде. Если подрядчик отвечает, что ошибки в консоли есть у всех и это ничего не значит, — повод задуматься: как проверить SEO-специалиста за пять минут, я разбирал отдельно.

Когда консоль не поможет

Сайта нет в поиске. Консоль показывает браузер, а не робота. Индексацию смотрят в панели веб-мастера.

Трафик есть, заявок нет. Технически всё работает, а люди не пишут — это вопрос предложения, цен и удобства, смотрите в сторону ошибок юзабилити, а не кода.

Письма с формы не приходят. Форма отправляется честно, консоль чистая, а письмо теряется на почтовом сервере или уходит на адрес, к которому нет доступа.

Сайт медленный. Консоль не скажет, что картинка весит восемь мегабайт.

И главное: в консоли можно вводить код — не делайте этого по подсказкам из интернета или переписки. Есть распространённая схема обмана, когда человека просят вставить строчку «для проверки» и этим уводят доступ к его аккаунтам. Консоль для вас — читать, а не писать.

Что делать с найденным

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

Коротко

• Консоль встроена в любой браузер на компьютере, ставить ничего не нужно.
• Открывается правой кнопкой мыши и пунктом про исследование элемента.
• Сначала откройте панель, потом обновите страницу — иначе ошибок не увидите.
• Нужны две вкладки: «Консоль» и «Сеть», с фильтром по ошибкам.
• Важны красные строки: упавшие скрипты, 404 на файлы, код 500, смешанный контент.
• Игнорируйте жёлтые предупреждения и ругань расширений браузера.
• Передавайте текст ошибок, а не фотографию экрана.
• Никогда не вставляйте в консоль код по чьей-то просьбе.

Частые вопросы

Можно ли сломать сайт, открыв консоль?

Нет. Панель работает только в вашем браузере и с той копией страницы, что уже загрузилась. Даже если вы измените текст во вкладке «Элементы», другие посетители этого не увидят, а после обновления всё вернётся. Навредить можно одним способом — введя в консоль чужой код.

Ошибок ноль, но сайт ведёт себя странно. Что дальше?

Смотрите вкладку «Сеть»: видно, какие запросы уходят и что отвечает сервер. Пустая консоль плюс запрос, висящий без ответа, — признак проблемы на стороне сервера. Если и там чисто, скрипт выполняется, но делает не то, что нужно.

У меня сотни ошибок, это критично?

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

Смотреть консоль регулярно или только при поломке?

После любых изменений: обновили систему, поставили модуль, подключили чат. В спокойное время — раз в месяц, на главной и там, где стоит форма.