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

    В этой статье я решил собрать популярные и полезные для Web-разработчиков дополнения с кратким описанием.
    Конечно, большинство разработчиков знают об их существовании, но я нацеливаюсь на остальную часть. А также на тех, кто использует альтернативные браузеры. Быть может, это подтолкнёт их к переходу на Огнелиса. Ну и вообще, просто хочется собрать всё в одном месте.

    1. Начнём, конечно же, с прекрасного плагина под названием FireBug


    image
    Про этот аддон, наверное, знает каждый. Про него много писалось. Он по праву занимает первое место в этом списке.
    С ним вы сможете редактировать, выполнять отладку и просматривать CSS, HTML и JavaScript в режиме реального времени на любой странице в сети. Аддон также позволяет анализировать запросы и проверять производительность Java-скриптов. В общем, must have.

    2. Вторым в списке идёт аддон Web Developer


    image
    Дополнение Web Developer добавляет в Firefox удобную и настраиваемую панельку с множеством различных функций.
    В перечне имеются: отключение и просмотр Java-скриптов, отключение и просмотр cookie, отключение CSS таблиц, просмотр стилей, просмотр детальной информации для форм, отключение вывода изображений, поиск неработающих изображений, редактирование HTML-кода, просмотр спрятанных элементов, проверка кода на валидность и многое многое другое.

    3. ColorZilla


    image
    Вы, естественно, видели инструмент «Пипетка» в редакторах изображения? Так вот, это тоже самое, но для Firefox. И даже больше. Плагин встраивается в строку статуса браузера. Кликните на иконку пипетки и наведите на нужный элемент страницы и узнаете его цвет. Цвет можно посмотреть как в RGB формате, так и в HEX. В плагине также имеется колёсико цветов, увеличение страницы и пара других функций.

    4. HTML Validator


    image
    HTML Validator подмигивает вам иконкой из строки статуса браузера. Он показывает количество ошибок HTML на загруженной странице. Вы можете отрыть HTML код в плагине и посмотреть, что же вызывает ошибки.
    Да, кстати, аддон по ссылке в заголовке не работает под Mac и Linux. Однако, на сайте разработчиков есть версии и под эти ОС.

    5. На 5 месте FTP-клиент FireFTP


    image
    Ну куда же разработчику без FTP-клиента? Этот плагин добавляет возможность использования клиента прямо в браузере. Клиент открывается в отдельном окне. Функции не ограничены только базовыми — есть сравнение директорий и их синхронизация при навигации, SFTP, SSL защита, поиск и фильтры, удалённое управление, drag and drop, проверка хэша файла и многое другое.

    6. Измерялка MeasureIt


    image
    Часто появляется нужда измерить какой-нибудь элемент на странице. С помощью MeasureIt можно просто выделить элемент и сразу же узнать, какова его высота, а какова ширина. Похожий функционал предлагает и ColorZilla, однако, если вам нужно только измерять, то лучше использовать MeasureIt.

    7. Эмулятор Internet Explorer'а Coral IE Tab


    image
    В связи с последними тенденциями отказа от вёрстки и поддержки IE многими разработчиками, плагин может показаться бесполезным. Но, всё же, не все хотят терять кусочек аудитории, а возможно и потенциальных клиентов/партнёров, потому сохраняют поддержку IE своими сайтами. Этим разработчикам и пригодится аддон — он запускает Internet Explorer прямо в Firefox. Теперь можно проверить вёрстку своего сайта, не открывая другой «браузер». И да, плагин работает только под Windows, с установленным IE.

    8. Ближе к концу списка, но не менее важный Greasemonkey


    image
    Я так думаю, что плагин не нуждается в долгих описаниях и представлении. Greasemonkey — расширение, позволяющее добавить на любую страницу пользовательский JavaScript, записанный в формате этого расширения. C февраля 2009 года нативно работает в Google Chrome. Имеет за пазухой сотни скриптов, которые можно найти на сайте userscripts.org. Для хабра, например, есть вот такой полезный юзерскрипт.

    9. View Source Chart


    image
    Просматривать исходный код сайта стандартными средствами Firefox довольно-таки неудобно — код плохо организован. С аддоном View Source Chart делать это станет намного проще — код страницы разбит на блоки, подсвеченные разными цветами. Поэтому вы визуально видите границы тегов и DOM структуры, в которой легче разобраться.

    10. Не сильно популярный, но полезный инструмент Aardvark


    image
    Хорошая утилита для чистки страницы от лишних элементов, например для печати. Также, удобно использовать для анализа структуры страницы. Наведя курсор на элемент страницы, вы увидите его id, ярлык (если он есть), класс и присвоенный ему стиль. Используя некоторые кнопки клавиатуры, например R, можно удалить элемент со страницы или V для того, чтобы увидеть исходный код.

    И ещё пару полезных плагинов…

    11. Аддон для упрощения однотипных действий iMacros


    image
    Аддон, как вы поняли, создаёт макросы для однотипных простых действий. Например — заполнение форм и запоминание паролей, автоматическая выгрузка и загрузка изображений, файлов или целых страниц (с картинками или без картинок), функциональное, нагрузочное и регрессионное тестирование Веб-приложений и многое другое. Более подробная информация на странице аддона.

    12. Последний на сегодня это FoxyProxy


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

    Вот и всё на сегодня. Надеюсь, данная подборка поможет вам в упрощении работы и достижении нужных результатов. :)

    Originally posted in
    Share post

    Similar posts

    Comments 36

      0
      ну такие веши как: FireBug, HTML Validator, Greasemonkey почти стандарт для разработчика. А вот Coral IE Tab попробую а то сейчас приходится открывать еще несколько окон с IETester и подобными программами…
        +3
        Отказался от всяческих эмуляторов ИЕ (в том числе от IETester) и установил VirtualBox с WinXP. Только так можно получить нормальную среду для тестов.
        +1
        И от меня спасибо за информацию по MeasureIt, заколебало открывать редактор и пихать туда скрин страницы, чтобы снять размеры.
          +1
          А в Developer Bar есть сетка, очень удобно элементы вырвнивать
            0
            Очень часто надо не выравнивать, а по быстрому словить размеры блока для позиционирования либо прочих функций.
            Но сеткой тоже пользуюсь, отличная весь, Палыч!
              +1
              Но это еще не все. Я бы обратил внимание еще на два плагина очень важных для разработчиков

              1) Yahoo Slow. C помощью него можно определять быстроедйствие сайта и сервера.
              2) Clean cache — очистка кеша браузера в один клик.
                0
                Clean cache — очищает кеш только для данного сайта или всех вообще? Ибо стандартная опция мозиллы чистит кеш всего, всех посещенных сайтов
                  0
                  Все чистит и кеш на винте и кеш в памяти страниц
                  0
                  clean cache зачем?
                  в вебдевелопере есть опция «отключить кеш» по идее ее и контрола-ф5 должно хватать
                    0
                    Там можно и скрипты, да все отключить. Бывает полезно чистить кеш просто так
              +1
              MeasureIt удобен наличием в отдельной кнопке на панели. Но при этом практически такое же средство есть прямо в Web Developer. Misc./Display ruler
                0
                Я использую электронный штанген-циркуль Screen Calipers.

                +2
                По-моему к плагину Coral IE Tab прикреплена картинка от FoxyProxy. А подборка добротная — сам почти всё юзаю :)
                  0
                  Что-то у меня по пятницам постоянно ошибки в статьях. Скрин поправил. :)
                  0
                  Я не очень то веб разработчик, но ещё два добавлю (правда может эти функции уже есть в перечисленных аддонах):
                  Live HTTP headers (собственно листинг всех HTTP запросов с/на сервер) и Tamper Data (редактирование данных из форм перед посылкой на сервер).
                    +1
                    Скрины поправьте — для Coral IE Tab указан скрин от FoxyProxy.
                      0
                      Не сильно популярный, но полезный инструмент Aardvark

                      Хорошая утилита для чистки страницы от лишних элементов, например для печати.

                      вместо него у меня Sсrapbook
                      на самом деле плагин предназначен для каталогизирования инфы он у меня работает в связке с Zotero

                      но в нем есть и функция чистки страницы от ненужных элементов

                      веб разработчику я бы рекомендовал бы сразу 3 плугина, 2 перечисленных и BBcode
                      последний упрощает общение в различных форумах и на том же Хабре
                        0
                        Хорошая подборка, спасибо автору.

                        От себя могу порекомендовать полезный плагин для разработки, которым я постоянно пользуюсь — YSlow.

                        Описание с вики:

                        плагин который измеряет скорость загрузки страницы и её отдельных компонентов. Кроме измерения скорости, проводится анализ всех компонентов: есть ли заголовки, вынесены ли стили и скрипты в отдельные файлы, используется ли компрессия, перенаправления, анализируется даже взаимное расположение компонентов на странице и даются рекомендации по оптимизации.
                          0
                          вы меня огорчили
                          Html Validator недоступен для платформы Linux.
                            0
                            Почему недоступен? Тут смотрели?
                              0
                              спасибо!
                            +1
                            еще попробуйте screengrab! снимает скриншоты всей страницы, только области, или только видимой части. офигенно полезный. не фоткает оконные декорации.
                              0
                              Есть ещё аналог FireShot.
                                0
                                плюс FireShot в том, что там можно сразу же добавить на скриншот заметки (можно со стрелочками). Бывает очень удобно для быстрого баг-репорта по вёрстке, например.
                              0
                              Для автоматизации заполнения форм и автоматического тестирования можно использовать Selenium IDE. Очень удобный инструмент, а при дополнительной конфигурации позволяет запускать тесты на удаленной машине.

                              Для замеров и определения использую небольшую программку picpick. Рекомендую :)
                                0
                                Ещё может пригодиться User Agent Switcher в некоторых специфичных ситуациях
                                  +1
                                  Для верстальщиков особо советую PixelPerfect. Это дополнение для Firebug, которое позволяет наложить изображение на страничку и таким образом сверять расположение элементов.
                                    0
                                    В MeasureIt не хватает удобного копипейста замеренного, надо вручную выделять и копировать. И формат отображения нельзя настроить. Вот бы здорово копировать например так 'width=«40 height=»315"', или в формате css, например настраиваемыми кнопками:

                                      0
                                      Это хорошие идеи. Вы бы связались с автором, а вдруг? :)
                                    0
                                    На AMO все эти подборки есть
                                      +1
                                      В статье ссылка ведет на users&/#99;ripts.org
                                        0
                                        Это глюки парсера какие-то. Переделал на прямую ссылку.
                                        –1
                                        FF уже не торт
                                          0
                                          Люди которые так считают не могут мне объяснить, что сейчас «торт». Объясните, если не сложно. Напишите пожалуйста чем заменить предложенный автором функционал под другим браузером.
                                          0
                                          Торт — это Chrome, как наиболее перспективый и динамично развивающийся браузер.
                                          К тому же, обладает завидной скоростью работы и хорошей стабильностью.
                                          А Firebug, Web developer, Greasemonkey, iMacros, IE tab и валидаторы есть и под него.
                                          Я уж молчу про встроенный про встроенный инспектор, по возможностям сравнимый с Firebug.
                                          Остальные перечисленные вещи неполезны, но не критичны, да и при желании и им можно найти аналог в Chrome.
                                          Всё перечисленное делает Chrome очень привлекательным для разработчиков.

                                          Only users with full accounts can post comments. Log in, please.