В помощь веб разработчику или незаменимые инструменты при верстке

Меня часто посещают разные идеи, чем можно было бы поделиться с читателями, но к сожалению не все идеи могут быть сразу реализованы. Недавно посетила идея написать серию статей про инструменты веб разработки. Почему именно серию, потому что под каждый этап веб разработки существует свой набор инструментов, описать которые в одной статье невозможно.

Начать серию статей решил не с навороченных интегрированных сред разработки (IDE) и не с программных комплексов по управлению реляционными базами данных, до них еще руки дойдут, а с самых простых инструментов, которыми пользуюсь на первом этапе разработке – верстке сайтов.

Сразу оговорюсь, что сам файл верстки мною пишется в среде Eclipse, это многофункциональная IDE изначально разработанная для управления проектами на языке Java. Однако по мере развития проекта Eclipse начала обрастать расширениями практически для всех возможных языков и направлений программирования. Данная IDE имеет расширения, позволяющие комфортно разрабатывать приложения на языках C, C++, Java, PHP, JS и других. Конечно в нем есть расширение для написания CSS кода, с подсветкой синтаксиса, подсказками и многими другими плюшками, которые делают разработку более комфортной. Но речь пойдет не об этом.

Для отладки (если это можно назвать отладкой) вертски сайтов мною используются два расширения FireFox, созданные чтобы существенно упростить жизнь веб разработчикам.

Про первой расширение думаю многие уже догадались, конечно это FireBug. Инструментарий этого расширения мною так до конца и не изучен, а разработчики продолжают внедрять в него новый функционал. Самый полезный лично для меня функционал FireBug это возможность выбрать на сайте любой элемент и кликнув на него правой кнопкой мыши проинспектировать его, т.е. расширением будет показаны все стили, которые действуют на данный элемент, свойства DOM и множество другой полезной информации. Помимо этого в расширение есть своя собственная консоль, используемая для отладки скриптов, свой HTTP сниффер, показывающий запросы-ответы к веб-серверу и время их выполнения, инструмент для работы с Cookies и много другое. Для веб разработки это просто незаменимый инструмент.

Кстати, аналогичные по функционалу расширения есть для других популярных браузеров, например в IE это расширение IE Developer Toolbar, в Chrome это встроенный Web Inspector. Поэтому если вам необходимо отлаживать верстку в каком-то конкретном браузере лучше всего сразу изучить наличие подобных расширений для него.

Второе, расширение для FireFox, это Web Developer, которое позволяет быстро включать/отключать кеш, JS и другие браузерные функции, работать с Cookies, CSS, формами, картинками, показывать полную информацию и выделять выбранные элементы на странице. Данное расширение я так же крайне рекомендую к использованию.