Вкладка Console
Вкладка Console содержит ошибки и сообщения, которые выдаёт страница. Если элемент управления не реагирует, а на экране ошибка не отображается, она обычно записана здесь.
Что сюда попадает
Красные строки — ошибки: выполнение прервано. Жёлтые — предупреждения, сами по себе они редко нарушают работу. Остальные записи — сообщения, которые страница выводит через console.log. Сюда же попадают неудавшиеся запросы, что указывает на вкладку Network для разбора деталей.
Как читать ошибку
Слева — тип и текст ошибки, например TypeError: Cannot read properties of undefined, справа — файл и номер строки. Ссылка открывает соответствующую строку. При разворачивании записи отображается стек вызовов — последовательность вызовов, приведшая к ошибке, начиная с последнего. Текст ошибки и первая строка стека — то, что включают в отчёт о дефекте.
Фильтры и Preserve log
Селектор уровня ограничивает вывод категорией Errors, соседнее поле фильтрует по подстроке. Preserve log необходим, когда дефект связан с перенаправлением или отправкой формы, иначе ошибка очищается вместе с предыдущей страницей.
Не всякая ошибка относится к странице
Расширения браузера, скрипты аналитики и блокировщики рекламы пишут собственные ошибки в ту же консоль. До оформления дефекта случай нужно воспроизвести в окне инкогнито с отключёнными расширениями. Пустая консоль — тоже результат: страница не завершилась ошибкой, поэтому некорректные значения на экране указывают на данные, а не на код, и разбор возвращается во вкладку Network.
На собеседовании
Здесь проверяют, умеете ли вы прочитать ошибку и отличить дефект страницы от постороннего шума. Попробуйте ответить сами, прежде чем открыть ответ.
juniorначальный уровень знаний
1. Что означают красные и жёлтые строки в Console?
Красные — ошибки: выполнение прервано, и на странице это обычно выглядит как неработающий элемент. Жёлтые — предупреждения, сами по себе они редко нарушают работу. Остальное — сообщения, которые страница выводит сама через console.log.
2. Что взять из ошибки для баг-репорта?
Тип и текст ошибки, например TypeError: Cannot read properties of undefined, файл и номер строки справа, а также первую строку стека вызовов — он разворачивается по клику на записи.
3. Как оставить в Console только ошибки и не потерять их при переходе?
Селектор уровня ограничивает вывод категорией Errors, соседнее поле фильтрует по подстроке. Чтобы записи не пропали, включают Preserve log: без него ошибка очищается вместе с предыдущей страницей — а это как раз тот случай, когда дефект связан с отправкой формы или перенаправлением.
middleболее продвинутый уровень
4. Кнопка не работает, и в Console есть ошибка. Значит ли это, что дефект найден?
Ошибка — факт для отчёта, но ещё не причина. Сначала нужно убедиться, что она относится именно к этому действию: очистить консоль, повторить действие и посмотреть, что записалось. Затем проверить Network — ушёл ли запрос и что вернул сервер.
5. Почему не всякая ошибка в Console относится к сайту?
Расширения браузера, скрипты аналитики и блокировщики рекламы пишут свои ошибки в ту же консоль. До оформления дефекта случай повторяют в окне инкогнито с отключёнными расширениями.
6. Console пустая, а на экране неверные данные. О чём это говорит?
О том, что страница не завершилась ошибкой: код отработал. Значит, дело скорее в данных, и разбор переходит во вкладку Network, к телу ответа.
Вопросы по остальным темам собраны на странице Вопросы на собеседовании QA по DevTools.