Для того, чтобы облегчить ваши труды верстки интернет-сайта, обвешаем ваш любимый браузер модными штучками – расширениями. Среди всего бесчисленного множества дополнение для Mozilla Firefox есть несколько наиболее удачных для веб-мастеров. Именно с ними мы познакомимся в этой статье.

Настройки Firefox

Пара слов о Firefox

Он крут. Он удобен. Он безопасен. Он тормоз.
Будем говорить объективно, лучше Firefox на данный момент ( и уже на протяжении долгих лет) ничего нет.

 

У меня были безуспешные попытки отказаться от этого браузера и причин нашлось несколько. Например, зависания лисы - сколько нервов испорчено, когда вместе в браузером зависает на минуту и оконное окружение Windows, да намертво... Я понимаю, что виноват не сам браузер, а его дополнения. В чистой лисе багов мало (я не встречал) но равно как и пользы. Сила Firefox в дополнениях.

Поблуждал по другим браузерам, поигрался с их дополнениями, настройками, сервисами и передумал. Нет ничего лучше Firefox!

Итак, запускаем браузер Mozilla Firefox. У меня на данный момент стоит версия (да без разцины какая версия!). С каких-то пор с ума посходили разработчики Мозиллы и штампуют версии каждый месяц новую, погнались за Гуглевским хромом, вероятно, и это меня бесит, так как по мне так глобальных изменений нет, чтобы менять версию релиза целиком. Чушь!

Я стараюсь использовать актуальную версию, к тому же не раз замечал, что Firefox начинает тупить и нужно нажать кучу кликов, чтобы, например, закрыть вкладку. Как ни странно, после обновления данная проблема мгновенно исчезает. Таким образом нас, вероятно, подстегивают обновляться. Приучили к кормушке!

Расширения для Firefox

Разработчики этого чудесного браузера дали возможность другим разработчикам дополнять функционал своими аддонами. Теперь в этих аддонах можно заблудиться, но есть среди них некоторые, позволяющие практически отказаться от множества сторонних инструментов и иметь все под рукой в одном браузере.

В меню «Инструменты» есть пункт «Дополнения». Если у вас отключена строка меню, то в нажмите Alt и строка меню отобразится. От версии к версии разработчики меняют интерфейс, делая его похожим на другие популярные браузеры. Было что-то от оперы, теперь что-то от хрома, но сейчас не об этом. Смысл в том, что всегда есть меню.

Установка дополнений

Поиск дополнение для Mozilla FirefoxПерейдите в раздел "Получить дополнения" и найдите текстовое поле типа «Поиск среди дополнений..». Это поле нужно, если вы знаете, что искать. В других случая полистайте страницы с популярными дополнениями (они вам тут в слайдере и представлены) или перейдите на сайт дополнений и там почитайте описания, отзывы.

Здесь же рекомендую сразу выставить параметры обновления дополнений. Я выставил ручной режим, так как знаю, что одно из дополнений после обновления уже не будет русифицировано.

Настройка обновлений дополнений для Mozilla Firefox

Нам известен список дополнений, которые мы хотим установить.В строке поиска набираем firebug (или любое другое название дополнения из списка) и жмем Enter. После поиска находим строку соответствующую запросу поиска и жмем кнопку «Установить». Ждем. После установки браузер попросит его перезапустить, не отказывайте ему в таком удовольствии – вам еще долго работать вместе. Все.

Установите еще пакеты из списка дополнений для Firefox, которыми пользуюсь я:

  • Web Developer
  • RDS Bar
  • ColorZilla
  • Xinha Here
  • YSlow
  • Measureit

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

adblock-plus

Блокирующие расширения позволяют проверить, не блокируется ли что-то на вашем собственном сайте. Так в CMS Joomla папка с баннерами автоматически забанена Adblock-ом. Если какую-либо картинку назовете типа banner, reklama или даже adwords, то адблок их скроет.

 

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

На практике создания сайта вы научитесь пользоваться всеми указанными дополнениями, а пока лишь рассмотрим их назначение и общие черты.

Firebug

Не знаю, как я раньше обходился без него! Теперь это такое модное дополнение, которое уже само содержит дополнения. Я был огорчен, когда перестал работать YSlow, но теперь снова все в норме.

Firebug для Mozilla Firefox

Firebug позволяет не только просмотреть структуру веб-страницы, но и попробовать налету изменить дизайн сайта. Кликните правой кнопкой мыши по любому элементу странички и выберите в контекстном меню пункт «Анализировать элемент». В сплывшем окне справа вы видите свойства элементов из таблиц стилей (css), а слева сами элементы, где можно посмотреть вложенность, очередность и выявить косяки и накладки.

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

В современных браузерах подобный функционал уже встроен, но все равно старый добрый Firebug удобнее, быстрее и привычнее их всех. Обязательно сравните.

YSlow

YSlow - расширение firebug, позволяющее получить подробную информацию об элементах, составляющих страницу, а так же скриптах и других файлах. Управление находится среди вкладок firebug.

YSlow для Mozilla Firefox

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

Это дополнение было рекомендовано самим google к использованию, так как имеется модуль оценки эффективности загрузки, выводящий в баллах рейтинг страницы и рекомендации по повышению в рейтинге. Среди таких советов склейка фоновых изображений в спрайты, объединение таблиц стилей, перенос скриптов в нижнюю часть страницы и прочие приятные мелочи.

Web Developer

Обновление web-developer

Web Developer – очень мощный комбайн, содержащий в себе много полезных функций, которые опять же позволят отследить баги на странице или представить структуру сайта. Меню этого дополнения представлено в виде строки с иконками и подписями элементов. Каждый раздел меню содержит какое-нибудь техническое свойство. Так например отследить все внешние ссылки и подсветить их можно нажав «Инфо» — «Показать параметры ссылок».

Web-developer

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

Среди инструментов утилиты по работе с формами, изображениями, лупа, линейка, изменение размеров окна, проверка валидности кода и многое другое. Я и сам пользуюсь далеко не всеми его возможностями.

RDS Bar

RDS Bar

RDS Bar – мощный комбайн по сео-оптимизации. Позволяет также отследить внутренние и внешние ссылки, показывает тиц и PR, количество страниц в индексах поисковых систем и много другое.

Этот инструмент пригодится больше для продвижения сайта, чем для создания, так что пока отложим его в сторону, или даже отключим до лучших времен, так как с ним не совсем дружит Web Developer.

 

ColorZilla

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

ColorZilla

Xinha Here

Xinha Here

Мощный и удобный браузерный WYSIWYG HTML-редактор. Я первое время пользовался даже для оформления статей на сайте, при отключенном родном редакторе, пока не возникла необходимость выдать права другому пользователю.

Вызывается кликом правой мыши в любом текстовом поле, где нужно оформление текста. Находите в контекстном меню пункт Open Xinha Here! и вперед! Самое интересное, что имеется чистка кода после MS Word, редактор исходного кода, а вставка кода произойдет в текстовое поле нужной страницы, даже если вы переключились на другую страницу во время редактирования.

Measureit

Если дословно - "измерить это". Попросту это линейка, но с удобным вызовом и приятным внешним видом. С помощью его можно измерить размеры блоков и отступов, что позволяет в верстке при позиционировании, где не смог помочь firebug.

Вызывается по иконке на панели инструментов Firefox, при этом все кроме выделения полупрозрачно осветляется для удобства выделения.

Теперь ваш Firefox – полноценный инструмент веб-мастера.

Удачи!

Добавить комментарий

Защитный код

Введите код с картинки в текстовое поле