bajenov.com дневник космополита. v1.5beta

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

Firefox - очень мощный инструмент для веб-разработки! Вот собраны лучшие из когда-либо созданных Firefox расшерений, которые помогут вам максимально облегчить веб девелопмент. Это экономия массы времени и денег, отведеных на разработку.

1. расширение позволяющее сохранять страницы или целые сайты для offline просмотра. Конечно в других браузерах (да и в Firefox по умолчанию) есть Ctrl+S, но возможности которая есть у ScrapBook я пока не видел нигде, собственно она же и есть причина по которой это расширение попадает в этот обзор. В момент сохранения это расширение рендерит страницу в HTML, т.е. все JavaScript'ы и CSS'ы зафиксируются в том виде в каком находится страница в момент сохранения и преобразовываются в статический HTML. Супер возможность. - ScrapBook
2. альтернатива ScrapBook - легкая в использовании утилита предназначенное для зеркалирования веб-сайтов и скачивания их целиком. В её основе лежит движок Httrack - Spiderzilla
3. увидеть, как страница будет выглядеть на экране мобильного устройства: Small Screen Rendering XPI
4. жизнь веб разработчика - это борьба за ресурсы. Получить доступ ко многим ресурсам можно только через муторошную и бессмысленную регистрацию. Талантливые люди упростили этот процесс. Расширение позволяет обратиться к базе сайта BugMeNot.com и автоматически заполнить поле Login и Password для огромного количества сайтов. - BugMeNot
5. утилита, позволяющая предварительно просматривать объявления Adsense, которые могут быть показаны на странице: Просмотр Adsense
6. изменение user agent для некоторых сайтов: User Agent Switcher
7. расширение не столько для разработчика, сколько для оптимизатора. Позволяет в статусной строке просматривать PageRank и Alexa статус текущей страницы - SearchStatus
8. смотреть IP адрес сайта: ShowIP
9. позволяет быстро включить отображение якорей (a name="") и скопировать адрес, включающий якорь, в буфер обмена - Show Anchors
10. захват скриншотов: ScreenGrab!
11. самое удобное средство сделать скриншот всей страницы сайта. Тоже уникальная возможность. При использовании других браузеров максимум, что получается - видимая на экране часть - Pearl Crescent Page Saver
12. справочное оглавление всех ключевых стандартов: HTML, CSS, DOM, Javascript. Потом, правда, с закрытием отделения Netscape, AOL пришиб и весь сайт DevEdge и, соответственно, сайдбар. Однако, нашелся человек - Лачлан Хант - , который сохранил его у себя и теперь DevEdge sidebar можно брать прямо у него.
13. HTTP-сниффер, то есть инструмент для просмотра HTTP-заголовков, отправляемых и получаемых браузером. Незаменимо для вебдева и кулхацкеров =) - Live HTTP Headers
14. найти whois информацию о сайте: domainFinder
15. имитировать просмотр WAP, рассматривая WML: wmlbrowser
    

16. Web Developer - король всех расширений для разработчика, не удевлюсь, если окажется, что про него уже пишут учебник, как это когда-то произошло с Greasemonkey. Расширение буквально позволяет делать все. Для примера расширение позволяет редактировать CSS и сразу же видеть результаты работы в этом же окне браузера. Остальные возможности
17. простмотр исходного html кода непосредственно на страничке: X-Ray
18. вам когда-нибудь приходилось искать в коде страницы начало и конец таблицы или блока, это особенно интересно когда уровень вложенности просто зашкаливает, а автор не заботился о читабельности кода. Каждый, кто сидел и подсчитывал открывающие и закрывающие теги с целью определить что к какому блоку относится, оценит этот плагин. View Source Chart позволит просмотреть код, выделив все блоки, таблицы, параграфы, отметив их цветом, и отобразив вложенность (см. скриншот). Кроме того есть возможность масштабирования в окне просмотра кода: View Source Chart
19. Это расширение позволяет открывать исходный код страницы с помощью вашего любимого текстового редактора: ViewSourceWith
20. Инспектор DOM - Представляет структуру документа в виде дерева с полной информацией по каждому элементу в HTML, XUL и XML страницах: DOM Inspector
21. Просмотр и изменение HTTP/HTTPS заголовков и post параметров: Tamper Data
22. Позволяет перехватить HTTP-хедеры, чтобы посмотреть, что передается серверу и что от него возвращается обратно: Header Monitor
23. Выводит в боковую панель get/post запросы сайтов: UrlParams
24. вместо того, чтобы вводить цвета вручную, Gez Lemon’s плагин для Firefox найдёт все текстовые элементы в документе и проверит разницу фона и цвета текста. Результаты он откроет в новом табе, с пред-просмотром цветов. Это может показаться немного утомительным, но это хороший способ поиска проблематичных мест в дизайне. К сожалению, этот инструмент не распознаёт изображения, поэтому используйте его на HTML документе без графики: Colour Contrast Analyser
25. проверить правильность ссылок на странице: LinkChecker
26. банально копирует в буфер title и URL (в нескольких вариантах на-выбор) текущей страницы: Copy URL+
27. найти код цвета заданного пикселя, eyedropper + colorpicker для извлечения цветов со страниц: ColorZilla
28. редактор CSS в боковой панели (CTRL-8); удобен тем, что изменения сразу видны на страницу: EditCSS
29. для тех кто пытается разрабатывать приложения с использованием AJAX'а важность приложения становится первостепенной. FireBug не что иное как консоль позволяющая отслеживать поведение страницы и перехватывать XMLHttpRequest. Если вы когда-нибудь пытались отладить JavaScript с помощью alert'ов, то еще один повод рыдать от счастья - FireBug
30. логическое продолжение стандартной javascript консоли. Возможно ее будущая инкарнация: Console²
31. это расширение которое добавляет возможность проверки HTML кода в браузеры Firefox и Mozilla: HTML Validator. Подробнее про данное расширение можно прочесть в развернутом обзоре в блоге SEO tools
32. Проверка HTML, XHTML, CSS, RDF, RSS, XML, WAI, Section 508, P3P, Metadata, ссылок: Checky
    

33. запустить автоматизированные тесты на сайте: TestGen4Web (читать про это расширение тут)

 

Околоблоговое: а вот еще полезность - утилита для сжатия CSS файлов - находится по этому адресу. Femfox - женская компания по активному продвижению firefox'a - очень занимательную картинку ребята имеют на страничке (смотреть картинку). Firefox Hacks - книга описывает все тонкости настройки Mozilla Firefox - Скачать книгу в CHM и обсудить можно здесь. Firefox — инструменты для создателей сайтов (страничка немного устранел, но для многих не потеряла своей актуальности). Расширения для Firefox на русском - тут.

Хотите почитать позже? Добавьте в социальные сети или закладки