Як знайти баг в коді
Як знайти баг в коді
Як часто ви витрачаєте годинник щоб зрозуміти чому ж ця ця шкідлива навігація сповзла, а це зображення відображаючись спотворює весь текст у той особливий спосіб? Цей спосіб дозволяє знайти причину практично не думаючи за 5 хвилин. Напевно майже всі користувалися цим методом пошуку багів в верстці.
Дуже багато часу у верстці йде на рішення багів, і пошуки їх причин. Якщо ви відчуваєте, що можете витратити більше 20 хвилин на пошуки причини - краще сміливо використовувати цей метод, він рідко забирає більше 5-10 хвилин. Втім, менше 5 хвилин, він теж рідко забирає. І це його єдиний недолік.
Коли "сповзла колонка", або "це гидотне меню знову відображається не так як повинно". Або ще тисячі глюків, які ви спостерігаєте і не можете зрозуміти, що змушує сайт відображатися саме так. І який рядок в коді це робить.
Метод іноді називають методом дихотомії, відома так само класична задача про упіймання лева в пустелі, а іноді його ще називають методом Ньютона.
Принцип дуже простий, щоб знайти, наприклад, точку на відрізку:
- Ділимо відрізок навпіл, визначаємо в якій половині міститься наша точка
- Повторюємо процедуру для отриманої половини відрізка з точкою
І так, поки не отримаємо потрібну точність.
А так це виглядає в завданню про упіймання лева в пустелі:
Ділимо парканом пустелю навпіл. Потім та частина, в якій залишився лев, знову перегороджується посередині, і так далі - до тих пір, поки лев не опиниться в тісному загоні.
Алгоритм в додатку до верстці мало відрізняється від класики. Львом буде шматочок коду робить глюк. Пустелею - весь код.
> Суперпупермегаалгорітм
- Видаляємо половину або просто великий шматок HTML (CSS)
- Якщо глюк залишився видно, продовжуємо процедуру для решти коду
- Якщо глюк зник, повертаємо віддалений код і повторюємо процедуру для нього (видаливши іншу половину)
В результаті залишиться тільки "глючний" HTML, зазвичай це пара блоків пов'язаних з глюком.
Теж саме повторюємо для CSS коду. Якщо в HTML ще потрібно було дотримуватися ієрархію, то в CSS можна сміливо видаляти по половині коду.
Таким чином, в кінці у вас залишиться кілька рядків CSS і тільки ті блоки в HTML, які складають глюк. При такій кількості коду вам буде важко не знайти баг, друкарської помилки.
Іноді простіше починати з CSS, але суть залишається тією ж самою. Видаляємо код, до тих пір поки не знайдемо місце в ньому викликає баг.
У той же час, звертатися за допомогою на форуми краще саме з цієї "підчищених" сторінкою, без купи зайвого коду, в якому всім розбиратися лінь.
Проробляти це все рекомендується з копією коду. Щоб можна було сміливо видаляти і не турбуватися.
В результаті ми точно визначаємо рядок коду, або шматочок HTML є тригером для бага, а це вже півсправи.
Навіть дивно чому про цей спосіб так мало написано (може тому що це занадто просто?). Сподіваюся комусь він допоможе, мене не раз і не два виручав. До того ж, такі дії допомагають початківцям веб-майстру краще розібратися і відчути як працює цей CSS. =) А при пошуку Глюка в чужому коді - це практично єдиний шлях.