Как пользоваться консолью браузера
Если платформа Mailganer грузится медленно или что-то не отображается. Пошаговая инструкция и шаблон обращения в поддержку
Оглавление
Иногда кажется, что «всё висит» именно на одном шаге: открытие редактора, переход к отправке рассылки, подгрузка изображений. На практике причина может быть где угодно — сеть, браузер, расширения, кэш/куки, корпоративный прокси, конкретный внешний ресурс или сам сайт.
Разберём, как найти причину самостоятельно с помощью консоли разработчика (DevTools) и подготовить данные для поддержки, чтобы ускорить решение.
Что такое DevTools и чем поможет
- увидеть все запросы страницы и скорость загрузки (вкладка Network);
- зафиксировать ошибки браузера и скриптов (Console);
- сохранить технический лог загрузки — HAR-файл;
- очистить кэш/локальное хранилище только для нужного сайта (Application → Clear storage);
- проверить SSL/«смешанный контент» (Security);
- записать профиль производительности (Performance) и сценарий действий (Recorder);
- временно имитировать медленную сеть или блокировку конкретного домена.
HAR (HTTP Archive) — «чёрный ящик» загрузки страницы: адреса запросов, коды, размеры, тайминги (DNS, TLS, ожидание ответа), тела ответов. Именно он чаще всего помогает понять, где теряется время или что блокируется.
Как открыть DevTools
- Chrome / Edge (Windows/Linux) — F12 или Ctrl + Shift + I
- Chrome / Edge (macOS) — ⌥ Option + ⌘ Command + I
- Firefox — F12 или Ctrl + Shift + I / ⌥⌘I
- Safari (macOS) — Safari → Settings → Advanced → Show Develop menu, затем Develop → Show Web Inspector
Диагностика и подготовка данных для поддержки
Шаг 1. Откройте браузер в режиме инкогнито. Так вы исключите влияние расширений и кэша других вкладок.
Шаг 2. Включите запись сети.
- DevTools → Network
- Отметьте Preserve log (сохранять лог при переходах) и Disable cache (отключить кэш — работает, пока открыт DevTools)
- В Chrome/Edge кликните правой кнопкой мыши по кнопке «Перезагрузить страницу» и выберите Empty cache and hard reload («Очистить кэш и жёсткая перезагрузка»)
Шаг 3. Воспроизведите проблему.
Зайдите в раздел, где тормозит/не открывается (например, «Рассылки → Создать рассылку»), повторите действия до момента сбоя. Убедитесь, что в Network появились запросы.
Шаг 4. Сохраните HAR-файл.
- В списке запросов (вкладка Network) щёлкните правой кнопкой и выберите Save all as HAR with content.
- Сохраните файл, например, mailganer-YYYY-MM-DD-hhmm.har.
Важно: В HAR попадают куки/токены — это ваши персональные данные. Чтобы защитить себя, записывайте HAR-файлы в приватном окне и отправляйте только в доверенную поддержку. Если переживаете — закройте лишние вкладки, перелогиньтесь, запишите короткую сессию.
Шаг 5. Сделайте скриншот Console. Для этого перейдите во вкладку Console и сделайте скриншот с ошибками (красные) и предупреждениями (жёлтые). Если сообщений много — в Chrome/Edge можно сохранить лог в файл через контекстное меню.
Шаблон сообщения в поддержку
Что делал(а): Рассылки → Создать рассылку → Открыть редактор → Вставить изображение → Сохранить
Что произошло: колесо загрузки крутится 30–40 сек, изображение не появляется
Когда: 21.08.2025, 14:35 (Европа/Амстердам)
Где: https://mailganer.com/app/campaigns/new
ОС/браузер: Windows 11, Chrome 127.0, инкогнито — да
Сеть: Мегафон (Екатеринбург), VPN — нет, прокси — нет, антивирус — стандартный
Повторяемость: в Firefox работает быстрее; в офисной сети так же медленно
Приложения: HAR + скриншот Console
Логин в Mailganer: name@example.com
Дополнительные инструменты для самостоятельного анализа
Ниже — приёмы, которые помогут понять причину. Некоторые из них помогут решить проблему без привлечения поддержки.
Анализ вкладки Network
- Ошибки: status-code:400-599
- Медленные: larger-than:1s
- Только Mailganer: domain:mailganer.com
- Скрыть preflight: -method:OPTIONS
- Кладка типов: Doc, Fetch/XHR, JS, CSS, Img, WS
Как читать Timing у проблемного запроса
- Queueing / Stalled — очередь в браузере (часто расширения/лимит соединений).
- DNS Lookup — долгое разрешение домена (проверьте DNS/провайдера).
- Initial connection / SSL — медленное соединение/TLS (часто сеть/прокси/антивирус).
- TTFB (ожидание ответа) — долго отвечает сервер/промежуточный шлюз.
- Content Download — долго скачивается большой файл (картинки/шрифты).
Частые симптомы и быстрые шаги
ERR_CONNECTION_RESET/TIMEOUT
Обрыв/фильтрация трафика
Проверить VPN/прокси/фаервол; попробовать мобильную сеть
net::ERR_BLOCKED_BY_CLIENT
Блокировка расширением (adblock/безопасность)
Инкогнито / выключить расширения / добавить домены в исключения
401/403
Неавторизован/нет доступа
Перелогиниться, очистить cookies сайта, проверить время ОС
429
Слишком много запросов
Закрыть лишние вкладки/скрипты, подождать
5xx
Ошибка на стороне сервера/шлюза
Приложить HAR и время, повторить в другой сети
Mixed content
HTTP-ресурс на HTTPS-странице
Заменить http:// на https:// в ссылках
CORS error
Запрос из другого домена без разрешений
Использовать прямые HTTPS-ссылки/допустимые источники
CSP violation
Политика безопасности запретила ресурс
Убрать инъекции/виджеты/скрипты из неразрешённых доменов
404
Ресурс не найден
Жёсткая перезагрузка, очистка кэша, проверить URL
WebSocket/SSE (живые данные)
Во вкладке WS соединение должно иметь код 101 и состояние Open. Частые разрывы — признак фильтрации корпоративным прокси/фаерволом.
Вкладка Console
- Зафиксируйте с помощью скриншота красные ошибки и жёлтые предупреждения.
- В Chrome/Edge можно сохранить консоль в файл (контекстное меню).
- Ошибки расширений часто видны по названию расширения в стеке.
Вкладка Security
- Проверяет SSL-сертификаты и «смешанный контент».
- Если видите ERR_CERT_* — убедитесь, что время/дата ОС корректны.
Вкладка Application → Clear storage
- Точечная очистка кэша/IndexedDB/LocalStorage/Service Worker только для текущего сайта.
- Помогает при «залипших» версиях фронтенда после обновлений.
Network Conditions (имитация сети) и смена User-Agent
- Проверьте поведение на Slow 3G/Offline — это выявляет зависимость от кэша/повторных запросов.
- Временно смените User-Agent, чтобы исключить артефакт конкретного движка.
Request Blocking (временная блокировка запросов)
- Заблокируйте сторонний домен (шрифты, виджеты, аналитика) и посмотрите, исчезла ли задержка.
- Скрины «до/после» + HAR помогут точно назвать источник.
Coverage (неиспользуемый CSS/JS)
- Показывает долю «лишнего» кода, который грузится, но не используется.
- Полезно как индикатор «тяжёлого» бандла или конфликтов.
Performance (профилирование)
- Start profiling and reload page — запишите загрузку с таймингами.
- Обратите внимание на Long tasks (>50 мс) на потоке Main — частая причина «лагов» UI (иногда из-за расширений/антивируса).
Lighthouse (быстрый отчёт)
- Запустите аудит в режиме Desktop.
- Сфокусируйтесь на LCP/TTI/CLS и подсказках: крупные изображения, блокирующие скрипты, нестабильный макет.
Recorder (Запись сценария)
- Запишите шаги: «Рассылки → Создать → Открыть редактор → Сохранить шаблон».
- Экспорт сценария приложите к обращению — видно, на каком шаге накапливается задержка.
Copy as cURL / Fetch
- У проблемного XHR/Fetch запроса в Network выберите Copy → Copy as cURL.
- Приложите в тикет — это помогает воспроизвести запрос вне браузера.
Особые ситуации и что проверить
- Сравните HAR из домашней и офисной сети.
- В Timing ищите длинные Initial connection/SSL/TTFB.
- Запишите провайдера/регион в сообщение.
Работает только на одном ПК
- Проверьте версию браузера, профиль, расширения, антивирус.
- Сравните Console и Security, очистите кэш сайта (Application → Clear storage).
Корпоративная сеть/прокси
- В Headers/ответах могут быть заголовки Via, X-… прокси.
- Возможны подмены скриптов/инъекции → срабатывает CSP.
- Сравните с мобильной сетью — если там всё нормально, укажите это в обращении.
Резюмируем
- DevTools помогают объективно понять, что мешает загрузке: сеть, кэш, расширения, внешние ресурсы или сам сайт.
- Лучший набор для поддержки — HAR + скриншот Console + краткие шаги + контекст среды (e-mail логина, URL, время, браузер/ОС, сеть).
- Дополнительные инструменты (Security, Application, Performance, Recorder, Lighthouse, Request Blocking, Network Conditions) ускоряют самостоятельную диагностику и повышают точность обращения.
- Если хотите, начните с базового чек-листа (приватное окно → Network с Preserve log/Disable cache → жёсткая перезагрузка → воспроизведение → HAR + Console). В большинстве случаев этого достаточно, чтобы быстро выявить узкое место или сразу решить проблему.
Помогает перевести клиентские запросы на язык, понятный команде разработки. Отслеживает баги и тестирует новые фичи. Собирает идеи по улучшению продукта — и следит, чтобы они доехали до прода.
Стать автором блога Mailganer ›
Технический специалист поддержки Mailganer
