Поиск ошибок
Умение находить ошибки в коде не менее важно, чем умение писать код. И ошибка может оказаться, например, не вашей ошибкой, а особенностью браузера, но в любом случае, прежде чем что-то чинить, нужно как следует разобраться в проблеме.
Находить ошибки поможет пара простых приёмов.
-
Локализуйте проблему
Бывает, что на странице что-то пошло не так, но совершенно непонятно что вызывает эту проблему. Например, появляется горизонтальная прокрутка или одна из колонок падает вниз.
Дело в каком-то из элементов на странице, но как понять в каком? Для поиска виновника просто удаляйте все элементы по одному, пока не обнаружите нужный. Это удобнее всего делать в веб-инспекторе браузера во вкладке Elements. Выбранный элемент можно удалить нажав Backspace или Delete, а вернуть обратно — нажав Ctrl + Z.
Ошибки в CSS ищутся аналогично: в том же веб-инспекторе можно включать и выключать правила, пробовать разные комбинации, пока не обнаружится то, что вызывает проблему.
Также можно делать и в файлах с разметкой и стилями, пряча в комментарии отдельные строки или целые куски кода, можно спрятать хоть все элементы на странице. Когда виновник будет найден, просто вернёте всё на место.
Главная цель этих действий — найти проблемный элемент, чтобы понять какую часть соответствующего кода вам нужно рассмотреть повнимательней. Не нужно прочесывать весь код — просто скройте то, что точно работает, и сосредоточьтесь на той части, где спряталась ошибка.
-
Используйте цветные обводки
Чтобы видеть границы элементов и лучше понимать как они взаимодействуют друг с другом, добавьте им цветные обводки (
outline). Результат может выглядеть как-то так:Это позволит лучше представлять себе структуру документа, а ещё так удобно искать причины появления лишних прокруток на странице: может оказаться, что какие-то элементы получились шире, чем вы ожидали — с помощью разноцветных обводок вы легко сможете их обнаружить.
Аутлайны можно добавлять как в веб-инспекторе браузера, так и в файлы со стилями. Если на странице получилась разноцветная мешанина, обводки, которые временно не нужны, можно закомментировать или просто удалить.
Аутлайны можно оставлять на всё время разработки, главное перед публикацией финального результата не забыть убрать из кода всё лишнее.