x
 
Василий
21 июня 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Как бороться с багами? Часть шестая: изолировать


Когда баг ста­бильно вос­про­из­во­дится, его нужно изо­ли­ро­вать: опре­де­лить про­блем­ную под­си­стему, модуль или функ­цию и понять при­чину проблемы.

Этот про­цесс напо­ми­нает науч­ные экс­пе­ри­менты: выдви­гаем гипо­тезу (что может быть не так?), кон­стру­и­руем экс­пе­ри­мент, кото­рый её под­твер­дит или опро­верг­нет (как это про­ве­рить?), раз­би­ра­емся с резуль­та­тами (что дальше?)

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

Авторы жалу­ются на пере­носы, появ­ля­ю­щи­еся после зна­ков препинания:

В конце вто­рой строчки точно не должно быть пере­носа

Гипо­теза: модуль авто­ма­ти­че­ской рас­ста­новки пере­но­сов глю­чит, он ста­вит пере­носы после зна­ков пре­пи­на­ния. Экс­пе­ри­мент: убе­диться, что в раз­метке есть сим­волы мяг­кого пере­носа после зна­ков пре­пи­на­ния. Резуль­тат: непра­виль­ных пере­но­сов нет. Зна­чит, про­блема в чём‑то другом.

Гипо­теза: глюк Сафари. Экс­пе­ри­мент: убе­диться, что непра­виль­ный пере­нос появ­ля­ется только в Сафари, а в осталь­ных бра­у­зе­рах его нет. Резуль­тат: непра­виль­ный пере­нос появ­ля­ется только в Сафари.

Эксперимент
Без стилей

Гипо­теза: про­блема появ­ля­ется только в книге. Экс­пе­ри­мент: пере­не­сти ХТМЛ про­блем­ного абзаца в отдель­ную стра­ницу и посмот­реть в Сафари. Резуль­тат: непра­виль­ный пере­нос появ­ля­ется в Сафари и в слу­чае с голым ХТМЛ. Зна­чит, это систем­ная про­блема Сафари.

Эксперимент
Без стилей

Гипо­теза: про­блема свя­зана с раз­мет­кой. Экс­пе­ри­мент: уда­лить всю раз­метку из доку­мента и посмот­реть в Сафари. Резуль­тат: непра­виль­ный пере­нос исчез. Зна­чит, про­блема в разметке.

Гипо­теза: про­блема свя­зана со спа­нами внутри пара­графа. Экс­пе­ри­мент: вер­нуть спаны, убрать всё лиш­нее и посмот­реть в Сафари. Резуль­тат: непра­виль­ный пере­нос вер­нулся. Зна­чит, про­блема в спанах.

Гипо­теза: про­блема в про­бе­лах внутри спа­нов. Экс­пе­ри­мент: убрать про­белы и посмот­реть в Сафари. Резуль­тат: непра­виль­ный пере­нос исчез. Зна­чит, про­блема воз­ни­кает в том слу­чае, когда авторы исполь­зуют якоря, закан­чи­ва­ю­щи­еся про­бе­лом, внутри параграфов.

Отправ­ляем баг­ре­порт в Эпл, про­сим авто­ров не остав­лять про­белы в яко­рях в параграфах.

При работе с багами, при­чина кото­рых может быть в чём угодно, помо­гает метод деле­ния попо­лам (дво­ич­ный поиск). Чаще всего этот метод при­ме­няют к про­бле­мам в вёрстке:

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

Пре­по­да­ва­тели жалу­ются, что при выстав­ле­нии оце­нок ссылка на работу сту­дента исче­зает. Ока­зы­ва­ется, ссылку пере­кры­вает зали­па­ю­щая шапка с оцен­ками студента.

Делим стили шапки попо­лам, ком­мен­ти­руем первую поло­вину и про­ве­ряем. Про­блема оста­лась, зна­чит, дело в остав­шихся стилях.

Делим остав­ши­еся стили попо­лам, ком­мен­ти­руем первую поло­вину. Про­блема ушла, зна­чит, дело во вто­рой половине.

Про­дол­жаем так до тех пор, пока не ста­но­вится понятно, что дело в top: 100vh на одном из родителей.

В экс­пе­ри­мен­тах сове­тую опи­раться на инстру­менты отладки. Они помо­гают загля­нуть внутрь рабо­та­ю­щего при­ло­же­ния: уточ­нить состо­я­ние пере­мен­ных и дан­ных, про­ве­рить ход и логику при­ло­же­ния. Подой­дут как про­стые инстру­менты (console.log, console.trace, print), так и пол­но­цен­ные дебаг­геры (byebug, debugger).

Когда гипо­тезы закон­чи­лись, а точно объ­яс­нить баг не полу­ча­ется, стоит про­ве­рить исход­ные предположения:

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

Авторы жалу­ются, что ино­гда при пере­ходе в книгу по ссылке она «соска­ки­вает»: откры­вает не тот раз­во­рот, что был указан.

Когда ни одна из гипо­тез не под­твер­ди­лась, решили про­ве­рить исход­ные пред­по­ло­же­ния. Что если про­блема не в книге? Что если дело в бэкенде или веб‑сервере?

Когда стали про­ве­рять гипо­тезы о про­бле­мах с веб‑сер­ве­ром, ока­за­лось, что он был настроен непра­вильно, и в неко­то­рых слу­чаях прок­си­ро­вал не тот урл в книгу: в урле был трид­ца­тый раз­во­рот, а в книгу прок­си­ро­вался урл без номера раз­во­рота. Книга не видела ука­зан­ный раз­во­рот и откры­ва­лась на послед­нем про­чи­тан­ном развороте.

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

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

В гипо­те­зах помо­гает метод деле­ния попо­лам. В экс­пе­ри­мен­тах — инстру­менты отладки.

Если гипо­тезы закон­чи­лись, а при­чина всё еще не уста­нов­лена, стоит про­ве­рить исход­ные предположения.

Ещё по теме

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

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

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Как бороться с багами? Часть десятая: не утонуть в багах и глюках Как организовать процесс сдачи задачи и код-ревью в рамках спринта? Типовые решения в вёрстке. Как форматировать ХТМЛ 9 Что нужно, чтобы сайт на Айфоне выглядел также как на Андроиде, а не в два раза меньше? 1




Недавно всплыло

Как правильно защитить свою позицию перед заказчиком, который боится «потерять» клиентов 5 Инструкция к сайту бюро, единственный способ запоминать изученное, расчёт стоимости проекта 1 Продолжение совета о системной фотосъёмке пластинок, часть 4 1 6