Ошибки в консоли браузера: как понять, что сломалось на сайте

Сайт открывается, всё вроде на месте, но форма не отправляется. Или калькулятор не считает. Или кнопка нажимается, а ничего не происходит. Владелец сайта звонит подрядчику и говорит: «Что-то сломалось». Подрядчик спрашивает: «А что именно?» И начинается долгий обмен скриншотами. Между тем браузер обычно сам рассказывает, что не так, — нужно только знать, где посмотреть. Разберём, как открыть консоль браузера, что там читать и как это помогает не терять заявки.

Зачем это владельцу сайта

Может показаться, что это дело программистов. Отчасти так и есть — чинить будут они. Но есть три причины разобраться самому хотя бы на базовом уровне.

Вы быстрее поймёте, что сломалось. Вместо «не работает» вы скажете «форма не отправляется, в консоли ошибка про такой-то файл». Это сокращает время починки в разы.

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

Вы заметите проблему раньше. Многие поломки не видны глазом. Форма визуально работает, кнопка нажимается, «спасибо» показывается — а заявка не уходит. В консоли это видно сразу.

Последний пункт самый ценный. Тихие поломки форм — одна из самых дорогих проблем на сайтах, и консоль — самый быстрый способ их обнаружить.

Как открыть консоль

Одинаково почти во всех браузерах на компьютере — способ на выбор:

- Нажать клавишу Ф12 — верхний ряд клавиатуры, двенадцатая функциональная клавиша. - Или щёлкнуть правой кнопкой мыши по странице и выбрать «Просмотреть код» или «Исследовать элемент». - Или через меню браузера: «Дополнительные инструменты» → «Инструменты разработчика».

Откроется панель, разделённая на вкладки. Вам нужна вкладка «Консоль».

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

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

Как читать сообщения

Сообщения бывают трёх основных типов, и они окрашены по-разному.

Красные — ошибки. Что-то сломалось и не выполнилось. Именно на них надо смотреть.

Жёлтые — предупреждения. Что-то работает, но неправильно или устарело. Обычно не критично, но накопление предупреждений — признак запущенности.

Серые или белые — информационные сообщения. Обычно это отладочная информация, которую оставили разработчики или которую выводят сторонние скрипты. Безвредно.

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

Ошибки, которые чаще всего встречаются

Не претендуя на исчерпывающий список, разберём то, что попадается постоянно.

«Не найдено» для файла. Браузер пытался загрузить картинку, стиль или скрипт, а его нет на сервере. Причины: файл удалили, переименовали, перенесли при переносе сайта. Последствия зависят от того, что за файл: пропавшая картинка — мелочь, пропавший скрипт формы — потерянные заявки.

«Не определено» или «не является функцией». Скрипт обратился к чему-то, чего нет. Чаще всего это означает, что один скрипт не загрузился, а второй на него рассчитывал. Типичная причина неработающих кнопок, слайдеров и форм.

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

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

Ошибки сторонних скриптов. Чат, счётчик, виджет обратного звонка, реклама. Сами по себе часто безобидны, но могут ломать другие скрипты на странице.

Блокировка расширениями браузера. Некоторые сообщения появляются из-за блокировщиков рекламы у самого посетителя. Это не ваша ошибка, но полезно знать: у части посетителей ваш чат или счётчик может просто не загружаться.

Вкладка «Сеть»: где видно, дошла ли заявка

Консоль показывает ошибки скриптов. Но есть вопрос важнее: ушла ли заявка на сервер и что сервер ответил. Это видно на соседней вкладке — «Сеть».

Как проверить форму:

1. Открыть панель разработчика, перейти на вкладку «Сеть». 2. Обновить страницу. 3. Заполнить и отправить форму. 4. Посмотреть на список запросов — там появится обращение к обработчику формы. 5. Щёлкнуть по нему и посмотреть код ответа.

Что означают коды:

- 200 — сервер принял и ответил нормально. Это хорошо, но ещё не значит, что письмо ушло. - 404 — обработчик не найден. Форма отправляет данные в никуда. - 403 — доступ запрещён. Часто из-за защиты или неверных настроек. - 500 — ошибка на сервере. Скрипт упал. - 502 или 504 — сервер не ответил вовремя, обычно из-за перегрузки. - Запроса вообще нет — значит, скрипт формы не сработал, и данные никуда не ушли. Самый частый случай тихой поломки.

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

Как проверять сайт после изменений

Разумная привычка — заглядывать в консоль после каждого изменения на сайте. Особенно после:

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

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

Отдельно — проверить отправку формы через вкладку «Сеть» и убедиться, что заявка действительно ушла и дошла.

Проверка на телефоне

Значительная часть посетителей приходит с телефонов, и там ломается своё: скрипты, которые не поддерживаются, вёрстка, которая разъезжается, кнопки, которые не нажимаются.

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

Более надёжный способ — подключить телефон к компьютеру кабелем и открыть консоль удалённо. Это уже работа для специалиста, но стоит знать, что такая возможность есть.

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

Что делать с найденной ошибкой

Найти — половина дела. Дальше:

Скопировать текст ошибки целиком. Вместе с именем файла и номером строки.

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

Проверить, повторяется ли в другом браузере и на другом устройстве. Ошибка, которая есть только у вас, может быть связана с расширениями браузера.

Оценить последствия. Ошибка в скрипте галереи — неприятно. Ошибка в скрипте формы — критично, чинить немедленно.

Передать подрядчику с деталями. Текст ошибки, адрес страницы, действия, браузер, устройство. Такое обращение решается за часы, а не за дни.

Как это связано с продвижением «3 в 1»

Ошибки в скриптах кажутся мелочью, но они бьют по всем трём каналам обращений, причём незаметно.

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

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

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

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

Контролировать это нужно цифрами: цели в Яндекс.Метрике на отправку форм и нажатия на телефон, сверка количества целей с количеством заявок в почте и в Битрикс24 или амоСРМ. Резкое расхождение — сигнал идти смотреть консоль.

Чего делать не стоит

Паниковать при виде красного. Небольшое количество ошибок есть почти на каждом сайте, особенно от сторонних виджетов. Смотреть надо на то, ломают ли они что-то важное.

Игнорировать полностью. Другая крайность. «Там всегда что-то красное» — до тех пор, пока не выясняется, что форма не работает третий месяц.

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

Проверять только на своём компьютере. У вас может стоять расширение, которое что-то блокирует, или в кеше лежать старая версия. Проверять надо на нескольких устройствах и в режиме без сохранения истории.

Забывать про кеш. Очень частая ситуация: ошибку починили, а вы видите старую версию. Помогает принудительное обновление страницы с очисткой кеша — обычно это удержание клавиши управления вместе с обновлением страницы.

Про систему управления сайтом

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

На ХостСМС есть штатные средства для части этих задач — формы, галереи, всплывающие окна, обратный звонок реализуются средствами системы, без подключения сторонних скриптов. Это снижает количество внешних зависимостей и, соответственно, количество потенциальных поломок. Плюс в системе ведётся журнал изменений, по которому можно понять, после какой правки что-то сломалось. Из распространённых альтернатив 1С-Битрикс тоже даёт большой набор встроенных механизмов; ВордПресс обычно обрастает плагинами от разных авторов, и конфликты между ними — самая частая причина ошибок в консоли.

Отдельный совет: вести список всех подключённых на сайте внешних скриптов. Кто подключил, зачем, когда. Через два года никто не помнит, зачем на сайте третий счётчик, а убирать боятся.

Короткий порядок самодиагностики

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

Коротко о главном

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

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