Начальная

Windows Commander

Far
WinNavigator
Frigate
Norton Commander
WinNC
Dos Navigator
Servant Salamander
Turbo Browser

Winamp, Skins, Plugins
Необходимые Утилиты
Текстовые редакторы
Юмор

File managers and best utilites

10 полезных функций Firefox Developer для веб-разработчиков. Браузер для разработчиков сайтов


Mozilla выпустила первый браузер для разработчиков / Хабр

Как и сообщалось ранее, Mozilla выпустила первый браузер, который создан специально для разработчиков. Несмотря на то, что официальный пресс-релиз о выходе новинки будет доступен 10 ноября, попробовать новый браузер можно уже сейчас.

Стала известна новая информация о Firefox Developer Edition:

  • Firefox Developer Edition заменит собой уже существующий канал разработки Firefox Aurora. Таким образом, в сборку для разработчиков будут попадать нововведения из Firefox Nightly. Также сохранится шестинедельный цикл разработки браузера: Nightly — Developer Edition — Beta — Release. Тем самым, у разработчика будет 12 недель до того, как нововведение попадет в релиз;
  • Новый браузер будет использовать отдельный пользовательский профиль, что позволит запускать его одновременно с Firefox;
  • Обновленный интерфейс, ускоряющий доступ к средствам разработчика. По умолчанию включена темная тема оформления, но браузер поддерживает как переключение на стандартную тему, так и установку сторонних тем и расширений;
  • Экспериментальные средства разработки. В состав нового браузера включены средства разработки, которые пока находятся на раннем этапе развития. Одним из них стал Firefox Tools Adapter, который позволяет использовать средства разработки Firefox для отладки в других браузерах (Safari на iOS, Chrome на Android). Кроме того, в состав нового Firefox включен полезный инструмент WebIDE, о котором уже сообщалось ранее.
Больше информации о нововведениях и планах Mozilla по развитию браузера можно узнать 10 ноября 2014 года.

Темная тема по умолчанию:

Скачать Firefox Developer Edition можно с серверов Mozilla:

— Windows (en) — OS X (en) — Linux (en), Linux x86_64 (en)

Локализованные сборки (на русском языке): — Windows (ru) — OS X (ru) — Linux (ru), Linux x64 (ru)

habr.com

22 плагина Google Chrome для веб-разработчика | GeekBrains

Не все они одинаково полезны.

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

Stylebot

Если вы хотите переделать любимые интернет-страницы на свой лад, то лучше плагина не найти.

Image Downloader

Приложение для скачивания понравившихся картинок с любого сайта.

DomFlags

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

CSS-Shack

Очень удобная утилита, в которой вы можете работать с текстом, изображениями, верстать страницы, а потом просто экспортировать файл в CSS и пользоваться в создании свей страницы.

Marmoset

Предельно бесполезное приложение для создания красивых скриншотов вашего кода. Под красотой понимается возможность изменения цвета фона и вращение в 3D.

iMacros for Chrome

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

Font Playground

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

Firebug Lite

Возможно, вы знаете про подобную мощную надстройку для Firefox, которая служит отладчиком и DOM-инспектором JavaScript, HTML, CSS. Чуть менее функциональная версия есть и на Chrome.

Window Resizer

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

Ripple Emulator

Аналогичная утилита, которая демонстрирует отображение страницы на конкретном гаджете.

Project Naptha

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

What Font

Чтобы узнать, какой перед вами шрифт, просто установите в браузер приложение What Font.

ColorZilla

А это приложение позволит узнать номер цвета.

Yslow

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

Web Developer

Какой веб-разработчик сможет жить без приложения Web Developer? Добавляет на главное окно кнопки-стандартные инструменты разработчика.

Page Ruler

Рулетка для веб-страниц сообщит вам габариты того или иного элемента.

DevTools Autosave

Как понятно из названия, данное приложение автоматически сохраняет ваши труды по созданию кода.

Instant Wireframe

С помощью этой утилиты вы сможете на любо ресурсе просмотреть структурную схему страницы (wireframe).

Search Stackoverflow

Быстрый поиск по популярному сервису вопросов и ответов для программистов и разработчиков.

PerfectPixel

Приложение для работы со слоями в вебе, в частности можно делать их полупрозрачными.

Chrome Daltonize

Если вдруг решите сделать сайт, рассчитанный в том числе на людей с проблемой цветоощущения, то непременно воспользуйтесь этой утилитой.

Check My Links

Расширение, которое проверяет все ссылки в тексте и удостоверяется в их работоспособности. Работают – выделяет зелёным, не работают – красным.

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

Если вы еще не стали веб-разработчиком, рекомендуем пройти интенсив "Основы программирования".

geekbrains.ru

Выбор лучшего браузера для web-разработки

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

Практически все современные Internet браузеры на данный момент оснащены штатными средствами для отладки и детального изучения кода web страниц. Такие инструменты существенно облегчают жизнь web-мастерам, потому сегодня хочу рассказать чем пользуюсь сам при разработке web-сайтов. Честно говоря не ожидал, что IE8 тоже наделен подобным функционалом (решил это проверить только когда взялся за статью).

Данный материал будет особенно полезен начинающим web-дизайнерам, ведь самый правильный способ освоить HTML, CSS, научиться создавать собственные шаблоны для сайтов - это изучение на конкретных примерах уже существующих, качественных ресурсов. Да и просто иногда интересно узнать как реализован тот или иной элемент дизайна на чужом сайте.

Претендентов пятеро - Google Chrome, Opera, Mozilla Firefox, Safari и IE8. Как видите, представлены все популярные браузеры на данный момент и с поставленной задачей они справляются, так что сравнение носит скорее эстетический характер. Хотя присутствуют и некоторые отличительные особенности, о которых вы узнаете ниже.

IE8

Начну с детища Microsoft чтобы поскорее от него избавиться. Итак, идем в меню Сервис - Средства разработчика либо нажимаем F12

По умолчанию панель инспектора не закреплена в нижней части экрана, как на скриншоте, а открывается в отдельном окне (на мой взгляд не удобно). Весь дизайн какой-то угловатый и крайне скучный, смотришь и тоску навевает. Тормоза, кривая работа с CSS3 в IE8, общая унылость интерфейса... ну в общем вы поняли моё отношение к этому браузеру.

Из плюсов, все элементы меню по русски (при условии что установлена русская версия Windows), можно прямо на страничке расставить все размеры у изображений, можно выбрать режим обозревателя IE7 или IE8, что возможно пригодится при разработке.

Mozilla Firefox 10.0.2

Firefox, пожалуй, единственный браузер, с минимальным функционалом для web-разработчика что называется "из коробки". Т.е. штатные средства хоть и присутствуют, но очень ограниченные. Конечно и они позволяют провести исследование HTML и CSS кода сайта, проинспектировать элементы, поэкспериментировать с параметрами (например изменить значения отступов у элементов, размеры, стили шрифтов и т.д.) Хотя всё это могут делать и конкуренты.

На скриншоте представлена панель веб-инспектора и таблицы CSS стилей. Изначально они не активированы и находятся в свернутом виде. Для активации соответственно в нижней панели надо нажать кнопки HTML и Стиль.

Выбрать интересующий элемент на web-странице можно предварительно нажав кнопку Исследовать.

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

Safari 5.1.3 и Google Chrome

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

Safari будет интересен в первую очередь маководам, т.к. на Windows он пока не прижился, да и вряд-ли в ближайшее время приживется.

На маке предпочитаю использовать именно его, ведь только этот браузер предлагает такие "вкусности", которыми не может похвастать ни один другой (например увеличение конкретной области страницы двойным тапом, синхронизация закладок с i-девайсами и т.д.). Причем Safari вполне адекватный и современный браузер с поддержкой новейших стандартов, идущий вместе с системой Mac OS X, и это его основное отличие от IE на Windows.

По умолчанию, средства web-разработки в браузере не отображаются, но их можно легко включить:

В результате появляется дополнительный пункт Разработка с довольно обширными функциями, а также пункт Проверить объект в контекстном меню (клик правой кнопкой мыши на страничке), для отображения панели веб-инспектора.

Как и у предыдущих участников обзора, для быстрого доступа к свойствам конкретного элемента web-страницы необходимо задействовать специальный режим в панели веб-инспектора:

Google Chrome наверное самый быстрый и красивый браузер на Win платформе (на Mac я не замечаю разницы с Safari). Писать о нем отдельно, с точки зрения web-дизайнера, смысла особенного нет, чтобы не повторять описание Safari. Следующий скриншот тому подтверждение:

Opera 11.61

Ну вот и добрались до фаворита, оставил его на сладкое. Именно в Opera наиболее приятно реализованы инструменты по исследованию устройства web-страничек.

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

Да... хотелось изложить предельно кратко, надеюсь это получилось. Вообще тема довольно интересная, но лучше один раз попробовать самому и составить собственное мнение, чем сто раз прочитать.

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

Если считаете статью полезной,не ленитесь ставить лайки и делиться с друзьями.

mdex-nn.ru

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

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

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

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

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

Дополнение Web Developer добавляет в Firefox удобную и настраиваемую панельку с множеством различных функций. В перечне имеются: отключение и просмотр Java-скриптов, отключение и просмотр cookie, отключение CSS таблиц, просмотр стилей, просмотр детальной информации для форм, отключение вывода изображений, поиск неработающих изображений, редактирование HTML-кода, просмотр спрятанных элементов, проверка кода на валидность и многое многое другое. Вы, естественно, видели инструмент «Пипетка» в редакторах изображения? Так вот, это тоже самое, но для Firefox. И даже больше. Плагин встраивается в строку статуса браузера. Кликните на иконку пипетки и наведите на нужный элемент страницы и узнаете его цвет. Цвет можно посмотреть как в RGB формате, так и в HEX. В плагине также имеется колёсико цветов, увеличение страницы и пара других функций. HTML Validator подмигивает вам иконкой из строки статуса браузера. Он показывает количество ошибок HTML на загруженной странице. Вы можете отрыть HTML код в плагине и посмотреть, что же вызывает ошибки. Да, кстати, аддон по ссылке в заголовке не работает под Mac и Linux. Однако, на сайте разработчиков есть версии и под эти ОС.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Originally posted in

habr.com

Firefox Developer - возможности браузера для веб-разработчиков

10 полезных функций Firefox Developer для веб-разработчиков

Браузер 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-селекторов

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

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

О том, как сделать скриншот всей страницы смотрите видео — ПЕРЕЙТИ К ВИДЕО.

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

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

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

Где находится данный интрумент и как он работает смотрите видео — ПЕРЕЙТИ К ВИДЕО.

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

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

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

Чтобы увидеть свой сайт в 3D Вам необходимо сначала включить этот параметр в настройках Firefox Developer. Как это сделать смотрите видео — ПЕРЕЙТИ К ВИДЕО.

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

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

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

Данную функцию также необходимо сначала включить в настройках Firefox Developer. Как это сделать смотрите видео — ПЕРЕЙТИ К ВИДЕО.

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

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

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

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

Отключить его можно в настройках Firefox Developer. Как это сделать смотрите видео — ПЕРЕЙТИ К ВИДЕО.

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

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

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

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

Более подробно показано на видео — ПЕРЕЙТИ К ВИДЕО.

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

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

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

Узнать это можно при включенном инспекторе кода от Firefox Developer. Более подробно об этом на видео — ПЕРЕЙТИ К ВИДЕО.

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

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

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

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

А затем Вам остается лишь изменять размер окна и тестировать под разные размеры экранов. Более подробно на видео — ПЕРЕЙТИ К ВИДЕО.

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

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

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

Но его предварительно необходимо включить в настройках Firefox Developer. Более подробно на видео — ПЕРЕЙТИ К ВИДЕО.

V Видео

Содержание

Вывод

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

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

Успехов!

С Уважением, Юрий Немец

10 полезных функций Firefox Developer для веб-разработчиков 5.00/5 (100.00%) 9 голос(ов)

Понравилась статья - расскажи друзьям! :)

Facebook

Twitter

Вконтакте

Одноклассники

Google+

www.sitehere.ru

Firefox для разработчика - «Хакер»

За последнее время у Mozilla произошло несколько знаковых событий. Во-первых, это юбилей Firefox. Десять лет назад группой хакеров, именующих себя Mozillian, была выпущена первая версия огнелиса — браузера, который разрушил монополию Internet Explorer с 95% долей рынка. Во-вторых, в продолжительной конкурентной борьбе за производительность с Chrome движок SpiderMonkey обошел V8 на собственных тестах Google. Ну и в-третьих, это, конечно же, релиз Firefox Developer Edition.

v8win

Firefox Developer Edition заменит существующий канал разработки Firefox Aurora, и в него будут попадать нововведения из Firefox Nightly. Также сохранится шестинедельный цикл разработки браузера: Nightly — Developer Edition — Beta — Release. Тем самым у разработчика будет 12 недель до того, как нововведение попадет в релиз. Новый браузер использует отдельный пользовательский профиль, что позволяет запускать его одновременно с обычным Firefox.

Свежий дизайн

Обновленный интерфейс ускоряет доступ к инструментам для разработчиков и по умолчанию использует новую темную тему оформления. Но ты также можешь переключиться на классическую или установить любую стороннюю тему и расширение. Изменения также коснулись внешнего вида окна настроек.

Изменения внешнего вида окна настроекИзменения внешнего вида окна настроек

 

Кнопка «Забыть»

Не остались без внимания и проблемы секьюрности: на приборной панели браузера появилась кнопка «Забыть», при нажатии на которую удаляется информация о cookie, истории, открытых вкладках и окнах за последние пять минут, два часа или сутки.

Кнопка «Забыть», при нажатии на которую удаляется browsing data для текущего сайтаКнопка «Забыть», при нажатии на которую удаляется browsing data для текущего сайта

 

Firefox Hello

Многие уже, наверное, слышали про WebRTC, а возможно, даже экспериментировали с ней. Так вот, при поддержке компании Telefonica в новом гиковском Firefox добавились звонки и видеозвонки именно на этой технологии. А называется этот «браузерный Skype» Firefox Hello.

firefoxHELLO

О самом главном

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

  • Более продвинутая отладка JavaScript.
  • Усовершенствован веб-инспектор, в нем появилось окно с используемыми шрифтами, и он наконец-то начал отображать в DOM псевдоэлементы before и after.
  • Преобразились инструменты для работы с отзывчивым дизайном.
  • Редактор стилей с первоклассным автозаполнением позволяет редактировать CSS-файлы прямо в браузере.
  • Более информативные консоль и мониторинг сети.
  • Scratchpad для исполнения JavaScript на лету.
  • Переключатель между online- и offline-режимами.
  • Очень удобный колорпикер.

 

WebIDE — интегрированная среда разработки

WebIDE была введена как бета-функция (недоступная по умолчанию) в Firefox 33, а теперь официально включена в Developer Edition. С помощью WebIDE, заменяющей менеджер приложений, ты можешь разрабатывать, развертывать и отлаживать приложения Firefox OS прямо в браузере или на устройстве Firefox OS. Функция автозаполнения, функция вспомогательного экрана, доскональная проверка — некоторые из новинок. Ты можешь также приостановить приложение и осмотреть элементы со встроенным отладчиком.

Эмуляторы для тестирования приложений в различных версиях FFOSЭмуляторы для тестирования приложений в различных версиях FFOS

 

 Valence — кросс-браузерная разработка и отладка

Изначально это расширение называлось Firefox Tools Adapter. Valence предназначен для того, чтобы тестировать проекты с различных устройств (например, Chrome для Android, Safari на iOS) и изменять веб-контент, моделируя интерфейс Firefox.

Valence — удобный инструмент для кросс-браузерной отладки приложенийValence — удобный инструмент для кросс-браузерной отладки приложений
Web Audio Editor

Позволяет взаимодействовать с Web Audio API в режиме реального времени.

WebAudioEditor

Выводы

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

Сделали ли в Mozilla что-то кардинально новое и инновационное? Нет, и с этим никто не спорит. Даже на их лэндинге написано «It’s everything you’re used to, only better». А вот с этим утверждением я абсолютно согласен.

xakep.ru

26 интересных расширений Firefox для веб-дизайнеров и разработчиков

Автор: Елизавета Гуменюк (liza1510) Рейтинг топика: 0 Просто люблю писать, переводить и давать людям возможность читать интересный контент. И пусть я не всегда идеальна — есть к чему стремиться!!!

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

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

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

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

#1 Firebug

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

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

#2 FireFTP

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

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

#3 Web Developer

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

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

#4 ColorZilla

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

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

#5 Greasemonkey

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

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

#6 Pixel Perfect

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

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

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

#7 DownloadThemAll

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

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

#8 IE Tab V2

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

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

#9 BuiltWith

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

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

#10 QuickJava

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

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

#11 MeasureIt

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

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

#12 Quick Locale Switcher

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

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

#13 Dummy Lipsum

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

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

#14 Cookies Manager

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

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

 

#15 colorPicker

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

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

#16 Wappalyzer

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

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

#17 User-Agent Switcher

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

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

#18 Tab Memory Usage

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

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

#19 Open With Photoshop

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

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

#20 TableTools2

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

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

#21 FireSSH

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

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

#22 Auto Refresh

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

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

#23 Firesizer

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

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

#24 Font Finder

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

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

#25 Open With

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

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

#26 Clear Cache

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

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

Источник

freelance.today


 

..:::Новинки:::..

Windows Commander 5.11 Свежая версия.

Новая версия
IrfanView 3.75 (рус)

Обновление текстового редактора TextEd, уже 1.75a

System mechanic 3.7f
Новая версия

Обновление плагинов для WC, смотрим :-)

Весь Winamp
Посетите новый сайт.

WinRaR 3.00
Релиз уже здесь

PowerDesk 4.0 free
Просто - напросто сильный upgrade проводника.

..:::Счетчики:::..