Вход
Регистрация
инструкция

Как пользоваться консолью браузера

Если платформа Mailganer грузится медленно или что-то не отображается. Пошаговая инструкция и шаблон обращения в поддержку

Оглавление

1.
Что такое DevTools и чем поможет ›
2.
Диагностика и подготовка данных для поддержки ›
3.
Дополнительные инструменты для самостоятельного анализа ›
4.
Особые ситуации и что проверить ›
5.
Резюмируем ›
Иногда кажется, что «всё висит» именно на одном шаге: открытие редактора, переход к отправке рассылки, подгрузка изображений. На практике причина может быть где угодно — сеть, браузер, расширения, кэш/куки, корпоративный прокси, конкретный внешний ресурс или сам сайт.

Разберём, как найти причину самостоятельно с помощью консоли разработчика (DevTools) и подготовить данные для поддержки, чтобы ускорить решение.

Что такое 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
Откройте вкладки Network (Сеть) и Console (Консоль) — они нам понадобятся в первую очередь.

Диагностика и подготовка данных для поддержки

Ниже — рекомендованный порядок действий. На всё уходит 5–10 минут.

Шаг 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 — долго скачивается большой файл (картинки/шрифты).

Частые симптомы и быстрые шаги
Симптом в Network/Console
Что это
Что попробовать
net::ERR_BLOCKED_BY_CLIENT
Блокировка расширением (adblock/безопасность)
Инкогнито / выключить расширения / добавить домены в исключения
Mixed content
HTTP-ресурс на HTTPS-странице
Заменить http:// на https:// в ссылках
CORS error
Запрос из другого домена без разрешений
Использовать прямые HTTPS-ссылки/допустимые источники
CSP violation
Политика безопасности запретила ресурс
Убрать инъекции/виджеты/скрипты из неразрешённых доменов
401/403
Неавторизован/нет доступа
Перелогиниться, очистить cookies сайта, проверить время ОС
404
Ресурс не найден
Жёсткая перезагрузка, очистка кэша, проверить URL
429
Слишком много запросов
Закрыть лишние вкладки/скрипты, подождать
5xx
Ошибка на стороне сервера/шлюза
Приложить HAR и время, повторить в другой сети
ERR_CONNECTION_RESET/TIMEOUT
Обрыв/фильтрация трафика
Проверить VPN/прокси/фаервол; попробовать мобильную сеть

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 помогут точно назвать источник.

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.
  • Приложите в тикет — это помогает воспроизвести запрос вне браузера.

Особые ситуации и что проверить

Работает только с VPN или в другой сети

  • Сравните 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). В большинстве случаев этого достаточно, чтобы быстро выявить узкое место или сразу решить проблему.
Если нужна помощь — напишите в поддержку через «Мои обращения» или на почту support@mailganer.ru
Пишет для глоссария, Разъяснительной и внешних площадок. Подписана на все рассылки на свете, чтобы брать примеры для статей из личного ящика.
Дарья Журавлёва
Редактор Mailganer
10.04.2025
дата публикации
10.04.2025
дата последнего обновления