Кук-бук. Firefox для разработчика

Практически у всех, кто постоянно путешествует по Сети, рано или поздно возникает необходимость в создании своего ресурса в Паутине. Один создает сайт на Юкозе, другому хватает дневника в Livejournal, третий вообще довольствуется сотней символов в Twitter. Однако есть и такие, кому мало стандартных возможностей популярных сервисов. Они садятся за учебники, пробуют, ошибаются, находят решения задач и со временем становятся профессионалами.

Вступив на стезю постижения интернет-строительства, вы со временем обзаведетесь своим инструментарием, и главным экземпляром в вашем «сетевом чемоданчике» будет, конечно, браузер. Как бы ни старались авторы сделать его удобнее и совершеннее, угодить всем нельзя, поэтому ориентируются, в основном, на массового пользователя, к которому web-разработчика отнести никак нельзя. У такого потребителя совсем иные запросы, и браузер «из коробки» его никак не устроит. Осмелюсь порекомендовать то, что выбрал сам – Firefox, который, конечно, не очень впечатляет своими возможностями в начальной конфигурации, зато позволяет «собрать» из кубиков-дополнений любой комбайн, удовлетворяющий самые требовательные вкусы.

Сегодня я не стану подробно описывать процедуру установки дополнений: если вы занимаетесь web-разработкой, то изучение таких мелочей вы уже давно оставили в прошлом. Я расскажу о некоторых полезных аддонах, которые помогут в создании и отладке ваших интернет-ресурсов.

Во-первых, изменим облик нашего браузера. Тема оформления по умолчанию отбирает немало места на экране, а лишние пиксели еще никому не помешали. Для изменения вида панелей и табов я рекомендую Total Rechrome, добавляющий поддержку «стеклянной» прозрачности в современных ОС. Кроме того, сильно экономят место на экране расширения FaviconizeTab (обратите внимание на маленькие закладки в браузере) и PersonalMenu (для превращения громоздкого меню в компактную иконку). В результате их совместного применения получается браузер, внешне очень похожий на Goggle Chrome. На мой взгляд, это сейчас оптимальная версия интерфейса браузера.

Для тех энтузиастов, которые используют несколько дисплеев или даже компьютеров при разработке, пригодится простенькое расширение ReloadEvery. Оно выполняет одну-единственную задачу: перегружает web-страницу через заданные промежутки времени. Как выяснилось на практике, очень удобно на одном дисплее открыть браузер с создаваемой страницей и указать ей перезагрузку 3-5 раз в минуту, а на другом мониторе заниматься написанием кода. Достаточно изредка посматривать на вспомогательный дисплей, чтобы контролировать результаты работы и не отвлекаться на ручные перезагрузки. Маленький нюанс - если вы решите воспользоваться этим аддоном, то можете поначалу (как это произошло со мной) подумать, что расширение не работает, так как визуально следы его установки обнаружить сложно. Оно выдает себя крохотной стрелочкой возле кнопки перезагрузки страницы. Признаю, такое размещение очень логично, хотя и не очевидно. При нажатии на этот значок вы увидите меню опций – лаконичное и эффективное.

Включена тема оформления Total Rechrome
FaviconizeTab сворачивает заголовки «табов»
Personal Menu настраивает вид и содержание меню браузера
ReloadEvery контролирует перезагрузку страницы

Закончив с обликом браузера, переходим к действительно важным вещам. Для того чтобы вид web-страницы в другом браузере не был для вас неожиданным, ее придется просматривать и в другой программе. Если вам не хочется лишний раз запускать Internet Explorer и перенабирать URL в строке адреса, установите расширение IEtab – с его помощью вы сможете одним щелчком мыши переключать рендеринг страницы на движки Firefox и MSIE, не переключаясь между программами. При желании, можно вообще указать расширению, что оно должно использовать альтернативный движок для посещения того или иного адреса (например, сайта Microsoft Update). При переключении на рендеринг MSIE браузер заменит иконку в закладке браузера и высветит ее же в статусной строке.

После того, как вы оптимизируете страницу для всех браузеров, у вас возникнет необходимость проследить обмен данными между браузером и сервером. Здесь на помощь придет расширение HttpFox. Оно способно просматривать все соединения, их параметры, содержимое переданных запросов и принятых ответов сервера. Подобные возможности незаменимы, особенно при отладке Ajax- и Flash-приложений, работающих в браузере. Ведь их обращения (например, для подгрузки видео и картинок) также извлекаются и могут просматриваться пользователем. Вы хотите выкачать видеоролик, но не знаете, откуда он берется? Запустите просмотр в браузере и посмотрите с помощью HttpFox, с какого адреса закачивается flv-файл.

Последний штрих – это расширение FireBug, позволяющее просматривать код любого элемента, на лету изменять его свойства, редактировать CSS, DOM и множество других параметров. C этим инструментом, в случае крайней необходимости, можно работать и не использовать никакой среды web- разработки. О мощности и популярности данного инструмента говорит тот факт, что именно для него написано много «дополнений к дополнению» - вспомогательные инструменты, расширяющие и без того широкие возможности. Например, кому-то могут пригодиться Firecookie, CSS Usage, CodeBurner, позволяющие еще более комфортно работать при отладке с Cookie, таблицами стилей и исходным текстом страницы. Для FireBug даже написаны аддоны, интегрирующие их с некоторыми CMS, такие, например, как Drupal for Firebug, позволяющие работать отладчику со специфичными для Drupal статусными и отладочными сообщениями.

Как видите, Firefox – это не только неплохой браузер. В первую очередь, это каркас для построения приложения, нужного вам. Надеюсь, приведенные рецепты «браузера для разработчика» пригодятся вам в построении вашего собственного, персонального инструмента. До новых встреч.
Поляков Александр, Lecosson@mail.ru