Блок 7 · Урок 3 из 4

Читать ошибки и писать баг-репорт агенту

Где смотреть, когда что-то сломалось, и как описать проблему так, чтобы агент сразу понял.

⏱ ≈ 7 минут 🔍 ошибки, отладка, баг-репорт 🎯 цель: собирать картину сбоя самому и давать агенту то, что ускоряет починку

Зачем это вам

«Не работает» — самое дорогое, что можно написать агенту. Он начнёт угадывать, будет предлагать одно решение за другим, и каждый цикл — это ваше время. Научившись за две минуты собирать симптомы сбоя (открыть консоль, посмотреть вкладку Network, скопировать текст ошибки), вы передаёте агенту готовый диагноз вместо загадки. Это один из самых быстрых способов повысить качество работы с AI-агентом: навык занимает минуту освоения, а экономит часы починки.

Три места, где живут улики

Консоль, Network и логи сервера

Когда приложение ломается, оно почти всегда оставляет следы — нужно только знать, куда смотреть.

Консоль (Console) — первое место. Открывается клавишей F12 в любом браузере (или через меню → «Инструменты разработчика»). Вкладка Console показывает красные ошибки фронтенда (то, что сломалось в коде страницы): что именно упало, в каком файле и на какой строке. Красный текст там — не шум, это подсказка с точным адресом проблемы.

Вкладка Network («Сеть») — второе место. Там список всех запросов (обращений), которые ваш браузер отправлял на сервер или к API. Когда кнопка «Сохранить» не срабатывает, нужный запрос, скорее всего, упал — он будет выделен красным. Кликните на него: увидите статус-код1 (4xx — что-то не так на вашей стороне, 5xx — сервер не справился) и ответ сервера, который часто содержит подробное объяснение.

Логи сервера — третье место. Это записи о том, что происходило на стороне сервера во время сбоя (вы разбирали их в блоке 6). Агент нередко спрашивает именно их, если консоль браузера показывает только «500 Internal Server Error» без подробностей — подробности тогда лежат на сервере.

📌 Практическое правило: перед тем как написать агенту «сломалось», потратьте 60 секунд: F12 → Console (есть ли красное?) → Network (есть ли упавший запрос?). Скопируйте то, что увидели. Это и есть «снять показания приборами».

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

Аналогия, которую можно пересказать

У врача: симптомы и история болезни

«Снять показания приборами»— консоль, Network, логи: термометр и анализы, которые показывают, где болит
«Плохой анализ с конкретной цифрой»— текст ошибки и статус-код (4xx/5xx): точное число, а не «что-то не так»
«История болезни»— что делал, что ожидал, что случилось: врач без неё лечит наугад
«Повторяется или было один раз»— стабильный или плавающий баг: искать и чинить по-разному
«Просто плохо»— «не работает» без деталей: врач (агент) вынужден гадать и тратит ваше время

Сказать агенту «приложение болеет, почини» — как прийти к врачу только со словами «мне плохо». Чем точнее симптомы и результаты анализов (текст ошибки, статус-код, шаги), тем быстрее верный диагноз — без недели гаданий.

Запомните одно

Хороший баг-репорт — это четыре вещи плюс «повторяется ли»

Когда что-то сломалось, дайте агенту: (1) что делали («нажал Сохранить на форме заказа»), (2) что ожидали («заказ создастся»), (3) что произошло на самом деле («белый экран»), (4) доказательства — точный текст ошибки из консоли, статус из Network или скриншот. И добавьте пятое: баг воспроизводится каждый раз или только иногда? Стабильный и плавающий баг ищут совершенно по-разному.

Что это даёт на практике

Фраза агента → что он имеет в виду

«Что в консоли / в Network?»
Пришлите текст красной ошибки из Console и информацию об упавшем запросе из вкладки Network — это главные улики.
«Скинь полный текст ошибки»
Скопируйте целиком, не пересказывайте. В тексте — файл, строка и причина, которые агент не может угадать.
«Как воспроизвести?»
Перечислите шаги, которые приводят к сбою: «открыл страницу → нажал X → ввёл Y → нажал Сохранить». Агент должен повторить их сам.
«Это всегда или иногда?»
Стабильный баг (случается каждый раз) ищут иначе, чем плавающий (случайный). Ответ сразу сужает круг подозреваемых.

Консоль (Console) — место в DevTools (инструментах разработчика браузера), где видны ошибки фронтенда. Открывается клавишей F12.

Network («Сеть») — вкладка DevTools со списком запросов к серверу и их статус-кодами. Показывает, какой запрос упал и что сервер ответил.

Логи — записи о происходящем на стороне сервера (разбирались в блоке 6). Содержат подробности, которых нет в браузерной консоли.

Баг-репорт — описание проблемы: шаги воспроизведения, ожидание, фактический результат и доказательства (текст ошибки / скриншот).

Воспроизведение (repro) — последовательность действий, которая стабильно приводит к сбою. «Как воспроизвести?» — значит, как повторить баг.

Проверьте себя

Четыре вопроса с мгновенной проверкой

1. Где в браузере искать ошибки фронтенда?

2. Что делает баг-репорт полезным для агента?

3. Зачем смотреть вкладку Network при сбое?

4. Почему важно копировать текст ошибки целиком, а не пересказывать?

Куда мы идём

Программа курса — 7 блоков