Где в DevTools увидеть сообщение об ошибке?

Где в DevTools найти сообщения об ошибках

В Chrome DevTools (аналогично в браузерах на Chromium: Edge, Opera, Brave) и Firefox Developer Tools сообщения об ошибках находятся в нескольких ключевых вкладках, каждая из которых отвечает за свой тип ошибок. Это основной инструмент для фронтенд-отладки и анализа проблем на веб-странице.

Основные вкладки для поиска ошибок

1. Консоль (Console)

Главное место для просмотра ошибок выполнения JavaScript, предупреждений (warnings) и сообщений, выведенных через console.log(). Ошибки здесь обычно имеют красный цвет и значок "ⓧ".

• Как открыть: F12 → вкладка "Console" или Ctrl+Shift+J (Cmd+Opt+J на Mac).
• Что показывает:

    *   Синтаксические и runtime-ошибки JavaScript.
    *   Ошибки загрузки ресурсов (404 для скриптов, стилей, изображений).
    *   Ошибки CORS (Cross-Origin Resource Sharing).
    *   Предупреждения о deprecated API.
    *   Сообщения от `console.error()`, `console.warn()`.

Пример ошибки в Консоли:

// В консоли может отображаться:
Uncaught TypeError: Cannot read properties of undefined (reading 'name')
    at buttonClickHandler (script.js:15)
    at HTMLButtonElement.onclick (index.html:22)

2. Сеть (Network)

Эта вкладка критически важна для отладки ошибок, связанных с HTTP-запросами (AJAX, fetch, загрузка ресурсов).

• Как открыть: F12 → вкладка "Network" или Ctrl+Shift+I (Cmd+Opt+I).
• Что показывает:

    *   Статус-коды ответов сервера: **4xx** (ошибки клиента, например, 404, 403) и **5xx** (ошибки сервера, например, 500, 502). Они подсвечиваются красным.
    *   Запросы, завершившиеся сбоем (например, при обрыве сети).
    *   Подробности запроса и ответа: заголовки, тело, время выполнения.

Как анализировать:

1. Перезагрузите страницу (F5), чтобы увидеть все запросы.
2. Отсортируйте таблицу по столбцу "Status".
3. Кликните на любой запрос с ошибкой (красный статус) → откроется панель с деталями (Headers, Preview, Response).

3. Вкладка "Issues" (Проблемы)

Сравнительно новая, но чрезвычайно полезная вкладка, которая агрегирует и объясняет проблемы, включая рекомендации по их исправлению. Это не просто список ошибок, а интеллектуальный анализатор.

• Как открыть: В Chrome DevTools: F12 → вкладка "Issues" (может быть скрыта под кнопкой >>).
• Что показывает:

    *   Проблемы с безопасностью (mixed content, устаревшие API).
    *   Проблемы с доступностью (accessibility).
    *   Предупреждения о производительности.
    *   Проблемы с cookie (SameSite атрибуты).

Другие полезные места

• Источник (Sources) / Отладчик (Debugger): Здесь можно увидеть ошибки, возникающие при выполнении кода, и установить точки останова (breakpoints) для пошаговой отладки. Ошибки отображаются прямо в коде.
• Приложение (Application): Полезно для отладки проблем с Local Storage, Session Storage, IndexedDB, Cookies (например, квоты или ошибки доступа).
• Эмуляция мобильных устройств (Toggle Device Toolbar): Ctrl+Shift+M (Cmd+Shift+M). Позволяет увидеть ошибки, специфичные для мобильных устройств или определенных размеров экрана.

Практический алгоритм для QA Engineer при поиске ошибок

1. Откройте DevTools (F12).
2. Первым делом проверьте вкладку "Console". Большинство критических ошибок отображены здесь.
3. Перейдите на вкладку "Network". Обновите страницу и отфильтруйте запросы по статусу 4xx/5xx. Проверьте тело ответа на ошибочные запросы — часто там содержится детальное описание проблемы от бэкенда.
4. Откройте вкладку "Issues" и изучите рекомендации. Часто здесь находятся проблемы, не очевидные в других вкладках.
5. Воспроизведите сценарий, ведущий к ошибке, с открытыми DevTools. Следите за появлением новых сообщений в консоли и новыми запросами (или ошибками в них) на вкладке "Network".
6. Для сложных ошибок используйте вкладку "Sources" для отладки: найдите файл и строку с ошибкой, установите breakpoint и проанализируйте состояние переменных.

Важно: Для создания качественного баг-репорта обязательно делайте скриншоты или записи (скринкасты) с открытыми DevTools, где четко видны вкладки Console и Network с ошибками. Указывайте точный текст ошибки, статус-код и URL запроса. Это в разы ускорит работу разработчика.