Порывшись немного в интернете, нашел некоторую статистику использования браузеров. Конечно, данные цифры относительные и усредненные. Вот, что показывает статистика Liveinternet:

• Google Chrome — 24,2%;
• Firefox — 19,6%;
• Opera — 12,3%;
• Internet Explorer — 10,2%;
• Safari — 4,5%

Из собранных данных видно (кстати, данная статистика за 2013 г.) видно, что большую популярность среди пользователей получил браузер Google Chrome. Да, действительно Chrome заслуживает внимания: скорость, поддержка современных технологий, стабильность, расширяемость. Но мой выбор пал не на него. Почему же?

Каким браузером пользуюсь я?

Мне очень нравятся браузеры Google Chrome, Opera, Safari. Есть в каждом из них что то особенное. Но мой выбор — . Почему, что в нем особенного? В первую очередь, прежде чем задать данный вопрос, подумайте к какой категории пользователей вы относитесь? Я вот — веб-разработчик, и мой выбор очевиден.

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

Еще одним несомненным плюсом в пользу Firefox является огромное количество расширений. Их настолько много, что даже не знаешь что выбрать. Я собрал себе некоторый пакет нужных мне расширений, без которых я не представляю себе свою работу. О них я расскажу в следующей статье.

Недостатки Firefox

Естественно, у Mozilla Firefox есть недостатки и их немало. Вот основные из них, которые я могу выделить:

• большое потребление ресурсов компьютера (особенно, когда открыто много вкладок). Зачастую слабенький компьютер просто его не тянет, тупо зависает;
• частые сбои.

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

Все выше изложенное, это мое сугубо личное мнение. Я знаю веб-мастеров, которые пользуются только Google Chrome и прекрасно со всем справляются. В общем, выбор за вами, а я свой уже сделал?

А каким браузером пользуетесь вы?

Независимо от того, что вы слышали о Google Chrome, когда речь идет о веб-дизайне и разработке, Firefox по-прежнему остается лучшим браузером с дружественной средой разработки, который вы можете найти.

Черт, у Firefox даже есть специальная версия браузера, созданного только для веб-разработчиков. Вот насколько сильно Mozilla заботится о веб-дизайнерах и разработчиках.

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

Установите, протестируйте и используйте большинство из этих расширений. В конце концов, все они бесплатны для использования!

• Что делает: Инспектирует веб-страницы

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

• Подходит: веб-разработчикам
• Что делает: клиент для Firefox

FireFTP - это FTP/SFTP-клиент для Firefox, который позволяет вам безопасно загружать и передавать файлы между вашим компьютером и сервером непосредственно из вашего браузера. Благодаря этому дополнению вам никогда больше не придется прыгать между браузером и клиентскими приложениями FTP.

• Подходит: веб-разработчикам и дизайнерам
• Что делает: анализ и проверка веб-страниц

Это своеобразное расширение «все в одном», которое добавляет в ваш Firefox ряд полезных инструментов. Некоторые из инструментов, включенные в этот аддон - отображение и редактирование таблиц стилей CSS, отключение стилей, инструменты отладки и т. д.

• Что делает: инструмент для анализа цвета

ColorZilla - отличный инструмент, который интерфейсные веб-дизайнеры найдут весьма полезным. Этот аддон имеет пипетку для быстрого выбора цвета на веб-странице, генератор градиента CSS, цветовой анализатор, цветовые палитры и многое другое.

• Подходит: веб-разработчикам
• Что делает: изменение веб-сайтов с настраиваемым кодом

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

• Подходит: дизайнерам интерфейсов
• Что делает: регулирует смещение веб-элементов

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

Например, если одно из изображений на вашей веб-странице перекрывает другой объект, вы можете использовать Pixel Perfect, чтобы определить, сколько пикселей нужно настроить, чтобы получить это изображение в нужном месте.

• Подходит: веб-дизайнерам
• Что делает: загружает все с веб-страницы

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

• Подходит: дизайнерам интерфейсов
• Что делает: проверяйте веб-страницы в Internet Explorer

Хотите - верьте, хотите - нет, но есть люди, которые все еще используют старые версии Internet Explorer для выхода в Интернет. Создание сайтов, хорошо работающих в этих старых браузерах, является одной из проблем, с которой веб-дизайнеры по-прежнему борются. Этот плагин упрощает настройку веб-дизайна для более старых браузеров Internet Explorer, создавая новую вкладку в IE.

• Подходит: веб-дизайнерам и разработчикам
• Что делает: показывает о технологии, используемые на веб-сайте

Хотите знать, какие технологии использовались для создания ваших любимых веб-сайтов? Тогда это дополнение вам пригодится. BuiltWith - это расширение, которое позволяет сканировать веб-сайты, чтобы найти, какие технологии используются на странице. Отличный инструмент для всех начинающих веб-дизайнеров, чтобы учиться на примере готовых веб-сайтов.

• Подходит: веб-разработчикам
• Что делает: включает или выключает Java

Это дополнение позволяет вам легко включать или отключать Java в вашем браузере. Он также может отключить на веб-странице Javascript, Cookies, анимированные изображения, Flash и другое. Это полезный плагин не только для разработчиков, но и для обычных пользователей, чтобы повысить безопасность браузера и снизить пропускную способность.

• Подходит: дизайнерам интерфейсов
• Что делает: Измеряет элементы в пикселях

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

• Подходит: веб-дизайнерам
• Что делает: переключает язык в браузере

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

• Подходит: дизайнерам интерфейсов
• Что он делает: генерирует фиктивный текст

Создание фиктивного текста для ваших новых макетов и прототипов веб-сайта - это скучная задача, которая вряд ли способна развлечь хотя бы одного дизайнера. Это расширение сделает этот процесс менее скучным, позволяя вам создавать фиктивный текст «Lorem Ipsum» прямо из Firefox.

• Подходит: веб-разработчикам
• Что делает: редактирует и создает cookie

Это дополнение не только управляет файлами cookie вашего сайта, но и позволяет легко редактировать и создавать новые файлы. Некоторые из функций плагина включают встроенный просмотр файлов cookie, возможность сменить домен, возможность одновременного редактирования нескольких файлов cookie и многое другое.

• Подходит: дизайнерам интерфейсов
• Что делает: выбирает цвета на веб-странице

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

• Подходит: веб-дизайнерам и разработчикам
• Что делает: дает информацию о программном обеспечении, используемым веб-сайтом

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

• Подходит: веб-разработчикам
• Что делает: изменяет пользовательский агент браузера

Хотите узнать, как будет выглядеть ваш сайт на разных платформах и операционных системах? Тогда это инструмент, который пригодится вам точно пригодится. User-Agent Switcher позволяет переключаться между различными платформами, такими как Android, Mac, Windows, и выбирать операционные системы для изменения пользовательского агента вашего браузера.

• Подходит: веб-дизайнерам и разработчикам
• Что делает: показывает пример использования вкладки памяти браузера

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

• Подходит: веб-дизайнерам и графическим дизайнерам
• Что делает: открывает изображения в Photoshop

Это дополнение делает то, что говорит его название, просто открывает одним щелчком изображения, которые вы находите на веб-странице с помощью Photoshop. Не нужно загружать изображение или запускать Photoshop, расширение будет делать все, что необходимо.

• Подходит: дизайнерам интерфейсов
• Что делает: улучшает таблицы HTML

Графики, статистика, сравнения, таблицы - это дополнение может сделать все. Вы можете использовать этот инструмент для создания удобных и красивых HTML-таблиц и схем.

• Подходит: веб-разработчикам
• Что делает: клиент SSH для Firefox

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

• Подходит: дизайнерам интерфейсов
• Что делает: автоматически обновляет веб-страницы

Одна из раздражающих вещей, с которыми сталкиваются веб-дизайнеры при разработке веб-сайтов, это необходимость обновлять веб-страницу вручную после внесения каждого небольшого изменения в код. Auto Refresh - это расширение, которое устраняет эту проблему, позволяя автоматически обновлять одну или несколько вкладок в Firefox с определенными вами интервалами.

• Подходит: дизайнерам интерфейсов
• Что делает: изменяет размер окон Firefox для конкретных разрешений экрана

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

• Подходит: веб-дизайнерам и разработчикам
• Что делает: находит информацию о шрифтах страницы и ее элементов

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

• Подходит: дизайнерам интерфейсов
• Что делает: проверяет веб-страницы в различных браузерах

Функция этого дополнения проста. Оно позволяет мгновенно открывать любую веб-страницу, которую вы просматриваете в Firefox, с помощью другого браузера одним щелчком мыши. Нет необходимости копировать URL-адреса, открывать каждый браузер один за другим и вставлять URL-адреса, чтобы открыть веб-сайт.

• Подходит: веб-дизайнерам и разработчикам
• Что делает: очищает кэш браузера

Это дополнение моментально очищает кэш браузера Firefox (RAM и DISK), чтобы сократить использование ресурсов компьютера. Расширение позволяет очистить кэш, просто нажав на кнопку или нажав клавишу F9 на клавиатуре. Если вы хотите быстро просмотреть изменения, внесенные на веб-страницу, это дополнение окажется очень полезным.

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

Расширение способно работать с сайтами, реализованными при помощи технологий Java, Flash, Flex, Ajax и Silverlight.

2. Font Playground

Расширение для тех, кто любит «поиграть со шрифтами» - позволяет экспериментировать со всем спектром шрифтов из библиотеки Google Fonts, не внося изменений в код страницы. Можно менять не только сам шрифт, но и его размер, стиль написания и так далее.

3. Project Naptha

Расширение для Google Chrome, которое позволяет выделять и копировать текст даже с картинок - будет полезным, по мнению Cretive Bloq, всем, кому хоть раз в своей работе приходилось иметь дело со встроенным текстом.

4. What Font

Расширение, которое позволяет мгновенно определить, какой шрифт использован на той или иной странице, не производя почти никаких дополнительных действий - наведя курсор мыши на надпись.

5. YSlow

YSlow - инструмент, который не только проверяет скорость загрузки той или иной веб-страницы, но и подсказывает разработчику, что её тормозит. Для этого расширение проверяет сайт на соответствие 23 из 34 правил производительности , сформулированных командой компании Yahoo.

6. Web Developer

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

7. Web Developer checklist

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

8. DevTools Autosave

Позволяет в автоматическом режиме сохранять любые изменения, внесённые в код страницы при помощи инструментов Chrome DevTools. Как отмечает автор материала, инструмент помогает разработчикам сэкономить большое количество времени.

9. Instant Wireframe

Расширение, при помощи которого можно «превратить» любую страницу в структурную схему компоновки материала - wireframe. Позволяет разработчикам и веб-дизайнерам не выходя из браузера ознакомиться с компоновкой любой страницы в сети.

10. Ripple Emulator

Ripple Emulator - расширение-эмулятор для Google Chrome, которое позволяет тестировать веб-сайты на различных мобильных платформах с различными разрешениями экрана. Может быть использовано в сочетании с другими расширениями для тестирования и отладки ресурсов.

11. Streak

Streak - расширение, которое позволяет превратить почтовый ящик на Gmail в CRM-систему. Можно отслеживать статус сделок и переговоров, которые ведутся в электронной почте с контрагентами, использовать Streak для обработки запросов пользователей продукта и отслеживания исправлений присланных ошибок и так далее.

12. Search Stackoverflow

Расширение для быстрого поиска по популярному ресурсу для разработчиков Stack Overflow.

13. PHP Ninja Manual

Позволяет получить мгновенный доступ к документации по PHP 5.5 из браузера.

14. PerfectPixel

PerfectPixel - расширение для Google Chrome. Оно позволяет «наложить» на веб-страницу полупрозрачную сетку и сверять по ней заданные расстояния. Можно накладывать и другие изображения - например, первоначальный макет - чтобы убедиться, что получившаяся страница в точности ему соответствует:

15. Code Cola

Инструмент для просмотра исходного кода страниц и редактирования CSS-кода.

Можно менять тени, окружности бокса и так далее с помощью перетаскивания ползунка. После внесения изменений можно скопировать получившийся код и заменить его в коде сайта.

16. Chrome Sniffer

Расширение для браузера, которое определяет, какие JavaScript-библиотеки, фреймворк или CMS используются на ресурсе.

17. User-Agent Switcher

User-Agent Switcher - это расширение, которое позволяет «маскировать» браузер Google Chrome под Internet Explorer, Opera или любой другой браузер.

18. IE Tab

Встроенный эмулятор Internet Explorer для Chrome.

19. PicMonkey

Простой и бесплатный онлайн-редактор изображений. Позволяет «захватывать» изображения или делать скриншоты браузера - и сразу же редактировать их при помощи расширения для Chrome.

20. Chrome Daltonize

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

21. Page Ruler

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

22. Check My Links

Расширение, которое проверяет веб-страницу на наличие «битых» или неправильных ссылок.

23. Flickr Tab

Расширение, которое помогает не столько в разработке, сколько в поиске вдохновения и хороших фотографий. Показывает на каждой новой вкладке в Google Chrome одно изображение с сервиса Flickr. При нажатии на него пользователь переходит на страницу автора, где может ознакомиться с другими его работами.

24. Google Art Project

Расширение для браузера, похожее на предыдущий плагин в этом списке - только вместо фотографий из Flickr в новой вкладке пользователь видит признанные произведения искусства - например, полотна кисти Ван Гога или Мане.

25. Data Saver

Официальное расширение от Google для сжатия трафика, которое включает экономию трафика в браузере Google Chrome.

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

Если Вы используете браузер Google Chrome, тогда обязательно посмотрите следующую подборку плагинов:

Возможности Firefox Developer

Если у Вас вдруг нет этого браузера, то скачать последнюю версию Firefox Developer можно здесь — Скачать Firefox с официального сайта .

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

1 Показать вертикальную и горизонтальную линейку

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

Чтобы показать данную линейку Вам необходимо выполнить следующие действия:

1. На клавиатуре нажимаем сочетание клавиш SHIFT+F2 .
2. В появившейся консоли внизу страницы вводим слово "rulers ".
   И затем нажимаем ENTER .
3. Чтобы отключить линейки введите повторно слово "rulers ".

2 Делаем скриншоты с помощью CSS-селекторов

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

Чтобы сделать скриншот с помощью CSS-селекторов проделываем следующие действия:

1. Опять же на клавиатуре нажимаем сочетание клавиш SHIFT+F2 , то есть включаем консоль.
2. В появившейся консоли вводим фразу "screenshot —selector ВАШ_CSS_СЕЛЕКТОР ".
   И затем нажимаем ENTER . Затем у Вас появиться окошко, где необходимо будет выбрать папку для сохранения изображения.

3 Определение цвета на странице

Также в Firefox Developer присутствует возможность определения цвета на странице.

4 Слои на странице в 3D

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

5 Стили браузера

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

6 Отключение Javascript для текущей сессии

Хорошей практикой является тестирование Вашего сайта при отключенном Javascript. То есть этим действие мы имитируем отключенный Javascript у Вашего посетителя и видим сайт, как его наблюдает человек, у которого Javascript не включен.

То есть отключаем Javascript во время текущей сессии и смело тестируем.

7 Динамическое отключение CSS

Также тестируйте свой сайт на читабельность при отключенном CSS. Чтобы увидеть, как Ваша страница выглядит при отключенном CSS, его можно отключить в Firefox Developer.

Чтобы отключить какой-либо из файла стилей, Вам необходимо открыть Firefox Developer, перейти в блок "Стили" и в правой колонке напротив необходимого файла стилей нажать на значок с глазом, чтобы он стал перечеркнутым.

8 Определение шрифтов на странице

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

9 Проверка адаптивности

Действительно актуальная возможность на данный момент. Потому что все сайты стремятся быть адаптивными и с помощью сторонних сервисов проверять не всегда удобно и занимает много времени. Сейчас Вы можете воспользоваться именно встроенной функцией проверки адаптивности от Firefox.

Чтобы активировать данную функцию Вам необходимо на клавиатуре нажать сочетание клавиш:CTRL+SHIFT+M .

10 Выполнение Javascript на странице

Быстрый запуск Javascript кода на странице можно легко осуществить с помощью Firefox Developer. Здесь есть такая функция "Простой Javascript редактор". Здесь Вы можете писать любой Javascript код и он будет выполняться как обычный скрипт внутри страницы, то есть взаимодействовать со всеми элементами на ней.

V Видео

Обзор