Браузер для веб-разработчика. Какой браузер выбрать? Полезные дополнения для web разработчика
Браузер Firefox, как браузер для веб-разработки, имеет много замечательных инструментов, которые позволяют упростить Вашу работу над сайтом. 10 самых часто используемых функций, которые используют веб-разработчики мы рассмотрим в данной статье и рассмотрим инструменты Firefox Developer. Поверьте, этот браузер даже без установленных дополнений имеет массу возможностей.
Если Вы используете браузер Google Chrome, тогда обязательно посмотрите следующую подборку плагинов:
Возможности Firefox Developer
Если у Вас вдруг нет этого браузера, то скачать последнюю версию Firefox Developer можно здесь — Скачать Firefox с официального сайта .
Ну что ж, давайте посмотрим что же это за 10 инструментов браузера Firefox, которыми Вы можете воспользоваться сразу, как только установите его.
1 Показать вертикальную и горизонтальную линейку
Firefox позволяет показывать горизонтальную и вертикальную линейку прямо на странице. Данная возможность очень полезна при верстке, то есть когда мы располагаем элементы на странице.
Чтобы показать данную линейку Вам необходимо выполнить следующие действия:
- На клавиатуре нажимаем сочетание клавиш SHIFT+F2 .
- В появившейся консоли внизу страницы вводим слово "rulers
".
И затем нажимаем ENTER . - Чтобы отключить линейки введите повторно слово "rulers ".
2 Делаем скриншоты с помощью CSS-селекторов
Firefox Developer на самом деле позволяет делать скриншоты всей страницы или только видимой части. Но, что является более интересной возможностью, так это скриншоты с использованием CSS-селекторов.
Чтобы сделать скриншот с помощью CSS-селекторов проделываем следующие действия:
- Опять же на клавиатуре нажимаем сочетание клавиш SHIFT+F2 , то есть включаем консоль.
- В появившейся консоли вводим фразу "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 Видео
Независимо от того, что вы слышали о 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 на клавиатуре. Если вы хотите быстро просмотреть изменения, внесенные на веб-страницу, это дополнение окажется очень полезным.
За последнее время у Mozilla произошло несколько знаковых событий. Во-первых, это юбилей Firefox. Десять лет назад группой хакеров, именующих себя Mozillian, была выпущена первая версия огнелиса - браузера, который разрушил монополию Internet Explorer с 95% долей рынка. Во-вторых, в продолжительной конкурентной борьбе за производительность с Chrome движок SpiderMonkey обошел V8 на собственных тестах Google. Ну и в-третьих, это, конечно же, релиз Firefox Developer Edition.
Firefox Developer Edition заменит существующий канал разработки Firefox Aurora, и в него будут попадать нововведения из Firefox Nightly. Также сохранится шестинедельный цикл разработки браузера: Nightly - Developer Edition - Beta - Release. Тем самым у разработчика будет 12 недель до того, как нововведение попадет в релиз. Новый браузер использует отдельный пользовательский профиль, что позволяет запускать его одновременно с обычным Firefox.
Свежий дизайн
Обновленный интерфейс ускоряет доступ к инструментам для разработчиков и по умолчанию использует новую темную тему оформления. Но ты также можешь переключиться на классическую или установить любую стороннюю тему и расширение. Изменения также коснулись внешнего вида окна настроек.
Кнопка «Забыть»
Не остались без внимания и проблемы секьюрности: на приборной панели браузера появилась кнопка «Забыть», при нажатии на которую удаляется информация о cookie, истории, открытых вкладках и окнах за последние пять минут, два часа или сутки.
Firefox Hello
Многие уже, наверное, слышали про WebRTC, а возможно, даже экспериментировали с ней. Так вот, при поддержке компании Telefonica в новом гиковском Firefox добавились звонки и видеозвонки именно на этой технологии. А называется этот «браузерный Skype» Firefox Hello.
О самом главном
Ну вот мы плавно добрались до самого главного - инструментов для веб-разработчиков, акцента и первопричины появления данного браузера. В целом сообщество отреагировало более чем положительно, многие говорили, что в свое время перешли от Firefox к Chrome только из-за DevTools, а сейчас настало время возвращаться обратно. Но также встречались высказывания, что ничего нового не появилось, а просто взяли все, что было, и по-другому оформили. Хочу заявить, что это абсолютная ложь. Команда Firefox заметно улучшила существующие и предоставила совершенно новые инструменты для разработчиков.
- Более продвинутая отладка JavaScript.
- Усовершенствован веб-инспектор, в нем появилось окно с используемыми шрифтами, и он наконец-то начал отображать в DOM псевдоэлементы before и after .
- Преобразились инструменты для работы с отзывчивым дизайном.
- Редактор стилей с первоклассным автозаполнением позволяет редактировать CSS-файлы прямо в браузере.
- Более информативные консоль и мониторинг сети.
- Scratchpad для исполнения JavaScript на лету.
- Переключатель между online- и offline-режимами.
- Очень удобный колорпикер.
WebIDE - интегрированная среда разработки
WebIDE была введена как бета-функция (недоступная по умолчанию) в Firefox 33, а теперь официально включена в Developer Edition. С помощью WebIDE, заменяющей менеджер приложений, ты можешь разрабатывать, развертывать и отлаживать приложения Firefox OS прямо в браузере или на устройстве Firefox OS. Функция автозаполнения, функция вспомогательного экрана, доскональная проверка - некоторые из новинок. Ты можешь также приостановить приложение и осмотреть элементы со встроенным отладчиком.
Valence - кросс-браузерная разработка и отладка
Изначально это расширение называлось Firefox Tools Adapter. Valence предназначен для того, чтобы тестировать проекты с различных устройств (например, Chrome для Android, Safari на iOS) и изменять веб-контент, моделируя интерфейс Firefox.
Web Audio Editor
Позволяет взаимодействовать с Web Audio API в режиме реального времени.
Выводы
В принципе, я перечислил все основные нововведения. Не знаю, как у вас, но я испытываю только положительные эмоции от работы с Firefox Developer Edition. Возможно, у меня предвзято хорошее отношение к самому производителю за их открытость, альтруизм и желание сделать веб лучше...
Сделали ли в Mozilla что-то кардинально новое и инновационное? Нет, и с этим никто не спорит. Даже на их лэндинге написано «It’s everything you’re used to, only better». А вот с этим утверждением я абсолютно согласен.
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.