Когда баг стабильно воспроизводится, а его причина понятна, пора исправлять код.

У этого процесса две задачи: исправить баг и не добавить новых. Чтобы проверить, что баг исправлен и исправление ничего не сломало, понадобятся автоматические или ручные тесты.

В общем виде алгоритм исправления бага выглядит так:

  1. Убедиться, что текущие тесты в чистой копии проекта проходят без ошибок.

  2. Добавить или изменить существующий тест так, чтобы он проверял отсутствие бага. В этот момент тест должен стать «красным», потому что самого исправления пока нет.

  3. Исправить код.

  4. Убедиться, что баг исчез: красный тест должен позеленеть.

  5. Убедиться, что мы не добавили новых багов: все остальные тесты также должны пройти успешно.

Иногда баг не получается исправить: например, причина бага не в коде, а в глюке браузера. В таких случаях советую заменить решение или побороть последствия.

Заменить решение

Если код опирается на технологическое решение, из‑за которого и появляется баг, можно заменить решение:

В Школьном кабинете

Преподаватели жалуются, что при выставлении оценок пропадают ссылки на работы студентов:

У Андрея Головина видны оценки, но нет ссылки на саму работу

Проблема оказывается в панели поиска, которая появляется в Сафари. Она влияет на высоту экрана, но не на стили. Из‑за этого 100vh (100% высоты экрана) равны старой высоте, а ссылка на работу залезает под оценки.

Заменяем решение: вместо 100vh используем ЦСС‑переменную --viewHeight, которую сами считаем и обновляем Яваскриптом.

На новом сайте бюро

Дизайнер нашёл баг: при ресайзе форма оплаты уезжает за границы экрана:

Проблему сначала искали в прокрутке и фиксированном позиционировании

Проблема оказывается в ЦСС‑анимации формы оплаты: при ресайзе Сафари обновляет координаты формы, но не перерисовывает её.

Заменяем решение: вместо ЦСС‑анимации берём транзишен.

Побороть последствия

Если баг никак не исправить, остаётся бороться с его последствиями:

В Издательстве бюро

Читатели жалуются на подсветку результатов поиска в Хроме: при переходе к найденному развороту Хром прокручивает его за пределы экрана.

Проблема оказывается в Хроме: браузер неправильно считает расстояние до залипающей страницы, возвращая высоту разворота вместо ноля.

Боремся с последствиями: исправляем код, прокручивающий книгу к результатам поиска. Если результат поиска находится на залипающей странице и у неё неверные координаты, берём получившуюся ошибку и вычитаем её из координаты, к которой собирались прокручивать книгу. В результате мы скроллим книгу к «неправильной» позиции, но попадаем точно в начало разворота.

На новом сайте бюро

Иногда в Сафари форма оплаты после появления перестаёт прокручиваться: не реагирует на скролл и изменение scrollTop. Проблема исчезает после ресайза.

Боремся с последствиями: заставляем браузер пересчитать и перерисовать форму оплаты. Сразу после появления формы очищаем её transform, а через 50 миллисекунд применяем transform: scale(1). Браузер перерисовывает форму и скролл начинает работать правильно, но визуально для пользователя ничего не меняется.

Что запомнить

Баг мало исправить, нужно ещё и не добавить новых исправлением. Подтвердить это помогают тесты.

Если баг не получается исправить, можно заменить решение или побороть последствия бага.

Ещё по теме

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы