Skip to Content

12 полезных Firefox плагинов для веб разработчика

В данном обзоре рассматриваются 12 крайне полезных Firefox плагинов для любого веб разработчика.

1. Firebug

firebug

Вряд ли этот плагин нуждается в представлении, но не упомянуть о нем было бы преступлением. В своей базовой поставке Firebug позволяет осуществлять debug JavaScript, CSS, HTML вживую непосредственно на исполняемой странице. Полная информация о текущем состоянии DOM модели, возможность ее изменения налету.

2. PixelPerfect

pixelperfect

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

3. Abduction!

abduction

Этот инструмент умеет делать скришоты страницы, как целиком, так и выделенного региона.

4. ColorZilla

eyedropper

Работает с цветовой палитрой страницы наподобие графических редакторов.

5. MeasureIt

measureit

Добавляет на веб страницу пиксель-измерительную линейку для проверки ширины, высоты выделенного элемента или региона.

6. FirePHP

firephp

FirePHP интегрируется с вашим Framework-ом (Zend, Cake PHP, CodeIgniter, Symfony, Smarty, Drupal - полный список на их сайте) и осуществляет дебаг через Firebug панель. Возможно применение и без фреймворков ввиде библиотеки PEAR.

7. YSlow

yslow

Еще одно дополнение к Firebug на этот раз от Yahoo! - измерение скорости загрузки страницы и отдельных её элементов. Анализ причин задержек и советы по оптимизации.

8. SenSEO

senseo

Проверяет соответствие страницы наиболее важным SEO критериям, а также дает оценку привлекательность страницы для поисковиков.

9. FireScope

firescope

Расширяет возможности Firebug в области анализа HTML и CSS.

10. Total Validator

total validator

Валидация вашего HTML кода по стандартам W3C, анализ битых ссылок, правильности написания слов, а также скришоты страницы из разных браузеров.

11. Web Developer

web developer

Эдакий комбайн, пытающийся уметь всё. От анализа CSS до просмотра HTTP Headers. Много полезных функций в одном тулбаре.

12. FireFTP

fireftp

Удобный FTP клиент для соединения с вашим хостингом.

- Источники: собственный список установленных плагинов Firefox и статья на ajaxline

Комментарии

...

Однозначно в мемориз

кстати

В Уникорне подсел на вот такой плагин как "View Source Chart"
(https://addons.mozilla.org/ru/firefox/addon/655)
На любителя, конечно. Но мне показался очень удобен тем, что можно скрывать группу вложенных тэгов.

..

В Firebug эта функциональность по умолчанию есть

кстати

В Firebug можно открыть в отдельном окне, чтобы разметку смотреть? Wink А в целом, согласен. Есть

Chrome

Я вообще для просмотра верстки больше предпочитаю использовать Chrome - правой кнопкой по куску страницы, потом "Просмотр кода элемента", и открывается новое окно с иерархичным отображением html и стилей элемента и страницы, гораздо удобнее, чем плейн текст либо Firebug версия. В Web Developer есть нечто подобное, но оно почему-то невероятно глючит и часто не видит унаследованных стилей / состояния элемента в DOM модели.

Да, в хроме, конечно,

Да, в хроме, конечно, красиво. Но постоянно переключаться мне не нравится. Поэтому и привык к View Source Chart.
В общем, на вкус и цвет... )

Не хватает LiveHTTPHeaders,

Не хватает LiveHTTPHeaders, плагина который незаменим при написании сетевых утилит, позволяет просматривать процесс "общения" браузера с вэб-серверами.

HTTP Headers можно также

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

спасибо за список плагинов,

спасибо за список плагинов, из всех перечисленных я пользуюсь только последним, потому что он очень удобен для подключения к фтп

Отправить комментарий

Содержание этого поля является приватным и не предназначено к показу.
Smileys
:):D:bigsmile:;):p:O:|:(:~:((8):steve:J):glasses::party::love:
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступны HTML теги: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <span> <div> <h2> <h3>
  • Строки и параграфы переносятся автоматически.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby>. Beside the tag style "<foo>" it is also possible to use "[foo]". PHP source code can also be enclosed in <?php ... ?> or <% ... %>.
  • Image links with 'rel="lightbox"' in the <a> tag will appear in a Lightbox when clicked on.
  • Image links from G2 are formatted for use with Lightbox2
  • Textual smileys will be replaced with graphical ones.
  • You may insert videos with [video:URL]

Подробнее о форматировании

Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated.