Десятка незаменимых Firefox-надстроек веб-разработчика

Original author: Sherif
  • Translation
Наличие хорошего инструментария критично для веб-разработчика когда речь идет о высокой производительности. Дополнения к Firefox могут здорово помочь при верстке HTML, валидации, редактировании стилей CSS, отладке JavaScript и прочей рутине. Поэтому я подумал что было бы неплохо сформировать список наилучших расширений Firefox на которых я остановился. Вот десятка тех, которые экономят мое время и спасают ежедневно.


1. Web Developer Toolbar


Это расширение незаменимо для меня. Целая линейка с разнообразными инструментами как для начинающего так и для профессионального веб-разработчика:
Web Developer Toolbar
В пару кликов позволяет делать уйму полезных вещей: разрешать/запрещать поддержку cookies и JavaScript, смотреть и налету редактировать CSS, подглядывать и менять скрытые элементы форм, проверять сайт на соответствие стандартам W3C, тестировать верстку на различных размерах окна браузера, выделять бордерами блочные элементы. Безусловно это то, чем должен дополнить свой браузер каждый разработчик под веб.

2. Firebug


Для меня это изделие номер два. Несчетное количество времени мне это расширение сэкономило при отладке кропотливых JavaScript скриптов:
FireBug

Кроме того, эта утилита позволит вам контролировать и редактировать Javascript, CSS и HTML (динамически сгенерированный в том числе), смотреть превью значений в CSS, мониторить сетевую активность и порядок загрузки страницы с отслеживанием задержек, облегчает отладку и нахождение узких мест в яваскриптах (чего только стоит пошаговое выполнение вместе с окном просмотра всех переменных), DOM-инспектор и много чего еще. Я открываю для себя что-то новое в ней каждый раз когда ее использую.

3. SplitBrowser


Плагин позволяет разделить область содержимого браузера на ваш вкус. Поможет в некоторых случаях, например, для сравнения ряда страниц, слежения в отдельном фрейме за чатом или за всем что прийдет в голову.
SplitBrowser
Больше всего мне нравится с помощью него сравнивать внешний вид сайта. Особенно, в сочетании с FireFox IE Tab, когда я могу оценивать верстку в рендеринге IE и Gecko (встроенный в Firefox) в отдельных вкладках разделенных наподобие фреймов.

4. IE Tab


Волшебная кнопка переключающая рендеринг верстки c Gecko на MSIE:
IE Tab
Как я упоминал выше, данная фича особенно хороша в сочетании со SplitBrowser для кросс-браузерной верстки под IE и FireFox в одном окне, разделенном по вертикали.

5. UrlParams


Просто как все гениальное: отображать параметры GET и POST на боковой панели.
UrlParams
Вы сможете очень просто изменять значения, добавлять новые параметры или превращать POST в GET или обратно. Пойдет и как средство добычи прямой ссылки на результаты поиска какой-нибудь мерзкой поисковой системы, отсылающей запросы постом.

6. ColorZilla


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

7. TamperData


TamperData
Раcширение которое позволяет мониторить HTTP(S) запросы, разбирать и модифицировать их. Можно использовать для проверки на уязвимости веб-приложений, а также для отслеживания хедеров.

8. XML Developer Toolbar


Этот плагин напоминает упомянутый выше Web Developer Toolbar, но специализируется исключительно на XML разработке. Позволяет делать такие вещи как: генерация XML Shema и DTD, валидация XML Schema, управление стилями, XSL трансформация налету, плюс, конечно же, DOM-инспектор.
XML Developer Toolbar
С недавних пор поддерживает работу с Firefox 2. Стоит взглянуть.

9. FireFTP


FireFTP
Простой и интуитивно понятный FTP менеджер. Помимо прямых задач обладает отличительными особенностями: сравнение каталогов, их синхронихация, SSL шифрование и многое другое.

10. Chickenfoot


Наконец, это расширение получает награду помощника девелопера с наибольшим скрытым потенциалом. «Куриная лапка» это расширение Firefox которое встраивает минисреду программирования на боковой панели, так что вы сможете писать простенькие скрипты чтобы управлять страницами и автоматизировать процесс веб-браузинга. Скрипты в Chickenfoot это обычные JavaScript с рядом дополнительных функций, заточенных под веб-задачи (открыть урл, ввести строку в input, кликнуть по кнопке и много других).
Chickenfoot
Это довольно просто. При нажатии F8 на боковой панели появляется редактор, позволяющий писать простенькие сценарии, как, например, скрипт автоматического заполнения форм, end-to-end тестирование поведения сайта, изменения исходного кода страницы, перехода по ссылкам, все это может быть запрограммировано (можно составить из истории ваших действий). Мне удалось разобраться с простеньким примером всего за минуту. Не так уж и сложно, а возможности буквально неисчерпаемы. Главное чтобы было из чего черпать.
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 38

  • UFO just landed and posted this here
      +2
      firebug и web developer я бы местами поменял... )
      • UFO just landed and posted this here
          0
          Web developer помогает разобрать чужое. А firebug - спасение при отладке АЯКСА
          0
          На самом деле это перевод статьи (ссылка в футере). Про FireBug я узнал как раз из той статьи. Тем не менее, я бы тоже местами поменял, но не хотелось перевирать чужое мнение.
            0
            Firebug поменять местами с Web Developer надо для тех кто пишет AJAX тулзы.
            0
            Впервые вижу Chickenfoot, ставлю без разговоров.
            Главное чтобы не глючила.
              +1
              И сразу же СТОП!
              Почему этого расширения нет на https://addons.mozilla.org/, а лежит только у автора?
                0
                не переживай, авторы этого разрешения - Мессачусетский Технологический Университет. Ему можно доверять.
                  0
                  расширения
                    0
                    Массачусетский
                      0
                      студенты? доверять???
                        0
                        Это уже на ваше усмотрение ;)
                    0
                    сразу подумал, что его можно использовать в качестве unit-тестирования интерфейса.
                      0
                      Для юнит тестирования есть JSUnit и те же синглетоны
                  • UFO just landed and posted this here
                      0
                      Я всегда оставляю оглядины этих примочек на потом, потому что нету времени. И это оставлю, уверен - увижу еще :)

                      топ10 для фаерфокса вижу каждую неделю в отдельных местах.

                      Может хватит? :)
                        +1
                        Я кодер, в результате чего наверное у меня сложилась следующая шкала ценностей (=
                        1. Web Developer Toolbar
                        2. Firebug
                        3. Colorzilla
                        4. IE View + Opera View.
                        Тут бы я поспорил с автором публикации по поводу IE Tab. Ряд личных экспериментов показал, что это расширение все таки не является 100% Internet Explorer. Т.е. настоящий живой IE показал пару раз страницу совсем по-другому, нежели это сделал IE Tab. А вот вышеприведенные расширения открывают страницу в аутенитичных браузерах
                        5. JSView.
                        Очень простое и в тоже время экономящее кучу времени расширение. Показывает ссылки на все прикрепленные js и css файлы. Доступ к этим фалам осуществляется либо через контексное меню, либо через кнопку в нижнем правом углу. Похожие функции есть и у Firebug, но тут подкупает легкость и быстрота дотупа (похоже на rss ленту)
                          0
                          > IE View + Opera View

                          Opera View можно избежать - настроить IE View - я повесил на клик с Ctrl открытие страницы в Опера.

                          IE View - иногда глючит, но в принципе ок, единственное - это не показывает JS ошибок.
                            0
                            О! А расскажите как вы настраиваете IE View, чтобы через Ctrl+click работало?

                            А по поводу того, что IE View не показывает JS ошибок - что вы имели в виду? Ведь задача этой кнопки просто открывать документ в IE для тестирования (= А ошибки JS FireFox ловить должен (= Или я чего-то не понял?
                              +1
                              Открываем "Настройки IE Tab" -> "Другое приложение"
                              и там указываем Opera.exe + использовать Ctrl+LeftClick

                              В IE JS ошибки доступны через строку состояния, в FF - консоль есть, так вот ошибки JS, которые возникают в IE (через IE View) ни где не видны :(
                          • UFO just landed and posted this here
                          • UFO just landed and posted this here
                              0
                              и еще прикольный плагин - "Линейка"
                              https://addons.mozilla.org/ru/firefox/ad…

                              Можно измерить ширину-высоту чего-нибудь на странице
                                0
                                В Web Developer есть
                                0
                                Здесь еще есть пару-тройка плагинов и мнения о них

                                http://sidebar.ru/Ezhi-o-Firefox.htm

                                А чтобы использовать ActiveX плагин есть?
                                  0
                                  А чтобы использовать ActiveX плагин есть?

                                  попробуй этот.
                                  http://www.iol.ie/~locka/mozilla/plugin.…
                                  где его искать помимо сайта втора и mozDev'а я не знаю :) может на addon's его и нету, но работает нормально, у меня нареканий пока не вызывал.
                                  +1
                                  А я еще юзаю два плагина полезных: iOpus iMacros (это своеобразная запись действий с возможностью воспроизведения, полезна, когда тестишь работу с формами к примеру: записываешь свои действия по заполнению формы, а потом, для следующего тестирования просто включаешь и все само заполняется и на сервак отсылается) и Cooliris Previews - просто для серфинга (рядом с каждой ссылкой появляются два голубых квадратика: если на них навести мышу, то появится слойчик поверх страницы, в котором будет открыто содержимое, доступное по этой ссылке).
                                    0
                                    спасибо за информацию о iOpus iMacros, попробуем.
                                      0
                                      Ух ты! круто! (= спасиб
                                      0
                                      как-то так сложилось, что плагинов ФФ вообще не использую. Вс необходимое в состоянии предоставить штатный дом-инспектор. Но его нахожу просто необходимым - показывает структуру документа, стили каждого документа, как определённые, так и реально применяемые. Самые запутанные проекты привести в порядок удаётся при помощи этого инструмента.
                                      А вот пипетка и линейка в ФФ - это излишне, когда есть аналогичные апплеты для панели кде. Только кдешная пипетка берёт цвет с любого места экрана, а не только из окна браузера. Да и вообще, кде предоставляет много интересного для вебмастера.
                                        0
                                        попробуйте, может зацепит ))
                                        0
                                        Только хотел написать подобную статью. Спасибо, Вы мне добавили час времени для другой. ;)
                                          0
                                          Спасибо. Мне очень пригодили пригодились расширения, которые вы здесь описали.
                                          • UFO just landed and posted this here
                                              0
                                              удобно для функционального тестирования использовать Selenium IDE
                                                0
                                                  0
                                                  Отличная статья.

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