Люди, занятые в сфере веб-разработки, по большей части занимаются рутинными операциями: написание многострочных CSS-файлов, создание однообразных (хотя и не всегда) Java-скриптов, их отладка, редактирование и прочее. Каждый из вас наверняка задумывался о том, какими средствами можно снизить эту самую рутинность. Сейчас мы рассмотрим дополнения к небезызвестному браузеру Firefox, позволяющие упростить работу:

1. Firebug

Веб-разработчики, ориентирующиеся на Firefox, давно уже знают об этом дополнении. Firebug - это своего рода швейцарский армейский нож в арсенале профессионала. Наверняка вы слышали о нем раньше.

Дополнение позволяет редактировать, выполнять отладку и просматривать код CSS, HTML и JavaScript в режиме реального времени на любой странице. Очень полезными в Firebug являются следующие закладки:

• - HTML- работа в реальном времени с CSS-атрибутами элементов, редактирование CSS-кода и добавление/удаление/редактирование элементов HTML.

• - Console - отладка JavaScript.

• - Net - отладка настроек с сервером (отображаются все запросы браузера к серверу) и проверка синтаксиса (например, вы забыли поставить слеш в ссылке на картинку).
• 
  

2. YSlow (Дополнение к Firebug)

Firebug настолько полезное и часто используемое дополнение, что имеет свои собственные дополнения! Одно из них - YSlow, разработанное небезызвестной компанией Yahoo. Оно предназначено для измерения скорости загрузки сайта. Обычно YSlow используется для определения возможностей оптимизации/ускорения работы сайта или для нахождения ошибок.

3. Web Developer Toolbar (Панель веб-разработчика)

Панель содержит в себе множество очень полезных инструментов, без которых невозможно жить, так же, как и без Firebug. Самые интересные инструменты:

• - Линейка: определяет ширину и высоту любого элемента на странице

• - Направляющие: позволяют выравнивать элементы по горизонтали или вертикали

• - Изменение размеров (масштабирование): позволяет оценить вид страницы на различных экранных разрешениях
  

• - Локальная HTML и CSS-валидация (с подключением к центру валидации W3C)

• - Отключение CSS и JavaScript
• 
  

4. Dust-me Selectors (Чистильщик селекторов)

При работе с серьёзными и крупными заказами зачастую появляются огромные CSS-файлы, в которых невозможно запомнить все проделанные изменения. Всегда присутствует вероятность того, что в файле есть неиспользуемые селекторы. Dust-me Selectors проверяет все селекторы CSS на применяемость - если какие-то из них не используются на странице, то вы сможете их удалить, сократив тем самым размер CSS файла.

Предупреждение: если вы используете сброс CSS стилей (в стиле Эрика Майера), то множество селекторов будут выглядеть, как неиспользуемые. Во избежание удаления необходимых селекторов просто закомментируйте их при использовании Dust-me Selectors.

5. CollorZilla

CollorZilla - дополнение для работы с палитрами. В наличии имеется пипетка, позволяющая вам определить цвет любого элемента на странице. Вы можете подумать, что ничего полезного в этом дополнении нет, однако вот несколько плюсов:

• - Возможность работы как в RGB, так и в палитре HEX

• - Палитра для настройки/корректировки цветов

• - Масштабирование (для упрощения работы с мелкими элементами, к примеру, с текстом)

Ещё одним дополнением, не входящим в список, является ReCSS (JavaScipt для перезагрузки CSS)

Если страница, с которой вы работаете, большая, то ее перезагрузка занимает много времени. Однако при помощи данного скрипта вы сможете перезагружать только отредактированный CSS-файл, без перезагрузки всей страницы.

Источник: The Css Blog

Метки: firefox, технологии

Эта запись опубликована в Воскресенье, 17/10/2010 , 12:19 и размещена в рубрике Технологии. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете оставить отзыв, или обратную ссылку с вашего сайта.