Люди, занятые в сфере веб-разработки, по большей части занимаются рутинными операциями: написание многострочных 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