Расширения Firefox для веб-разработки на все случаи жизни. Отладка адаптивных макетов
Firefox содержит множество инструментов помогающие веб-разработчикам делать их работу. Многие люди до сих пор используют FireBug и не понимают, что у Firefox теперь есть свои собственные встроенные инструменты. В этой главе мы собираемся рассмотреть инструменты, наиболее полезные для разработки приложений под Firefox OS.
Если вы заинтересованы в получении дополнительной информации об этих инструментах и о том, какие другие хорошие инструменты появятся в Firefox, посмотрите страницу на MDN (правда, посмотрите ссылку, я подожду).
Введение в адаптивный дизайн
Общий рабочий процесс веб-разработки состоит в редактировании HTML-файл и перезагрузки страницы в браузере для просмотра изменений. Если вы не используете что-то вроде Grunt или Volo, то, как правило, нет необходимости в шаге компиляции или подобном. Firefox OS Simulator позволяет вам использовать тот же процесс, за исключением того, что эмулятор в настоящее время ограничен единственным разрешением (480x320). Это меньше идеального, если вы также разрабатываете своё приложение для работы на планшетах, фаблетах, гигантских телевизорах или чего-то ещё между ними.
Чтобы проверить, как ваше приложение будет выглядеть при любом разрешении экрана, вы можете использовать инструмент Адаптивный дизайн для изменения экрана (и области просмотра). Его можно включить через меню Инструменты -> Веб-разработка -> Адаптивный дизайн , как показано на рисунке ниже. При активации этого инструмента окно изменится, так что вы можете менять размер окна просмотра перетаскивая уголки или через список выбора.
Использование адаптивного дизайна особенно полезно при тестирования на медиа-запросы, так как это позволяет менять размер экрана и видеть, как ваш сайт реагирует на изменения макета в реальном времени. Другая замечательная особенность Адаптивного дизайна заключается в том, что вы можете сохранить предустановленные размеры. Если вы знаете размеры на которые ориентируетесь, тогда можно быстро проверить разные размеры без необходимости изменять размер текущего окна браузера.
На момент написания книги большинство телефонов на Firefox OS, которые находятся на рынке, работает в разрешении 480x320 и при плотности около 96 пикселей на дюйм. Тем не менее, вы должны ожидать, что это со временем изменится, как только новое оборудование Firefox OS станет доступным. Дисплеи, скорее всего, будут иметь больше пикселей и более высокую плотность (подобно дисплеям ретина от Apple).
Для надёжной работы вашего приложения в будущем не устанавливайте в CSS любое разрешение или плотность пикселей. Вместо этого вы должны использовать медиа-запросы и принципы адаптивного дизайна при создании приложений, которые приспосабливаются к любому размеру дисплея. Чтобы узнать больше об адаптивном дизайне я рекомендую следующие книги: Responsive Web Design и Mobile First .
В целом, адаптивный дизайн позволяет проверить наши веб-приложения, используя множество различных размеров экранов без необходимости изменения окна браузера Firefox. По моему скромному мнению, это один из самых полезных и доступных инструментов веб-разработчика, но у него есть одно большое ограничение: в настоящий момент нельзя проверить различные плотности пикселей (иными словами, увидеть, как ваш сайт будет выглядеть на дисплее ретина или лучше).
Инструменты разработчика
Инструменты разработчика Firefox похожи на FireBug и инструменты, доступные в других современных браузерах. С помощью этих инструментов вы можете выполнить и отладить JavaScript через консоль и манипулировать DOM и CSS на текущей странице.
Для вызова консоли, вы можете открыть Инструменты -> Веб-разработка -> Веб-консоль или щёлкнуть правой кнопкой на странице, выбрать Инспектировать элемент и щёлкнуть на вкладке Консоль.
Кроме консоли JavaScript есть много других доступных инструментов, таких как редактор таблиц стилей , монитор сети , профайлер JavaScript , отладчик JavaScript , инспектор страницы и многие другие.
В приложении, созданном в предыдущей главе, мы использовали консоль для проверки прогресса нашего приложения. Это довольно эффективный способ отладки наших приложений, но некоторые разработчики всё еще используют alert() во всём коде JavaScript в качестве «инструмента отладки».
Использовть alert() на самом деле плохо, потому что если разработчик забывает удалить alert(), то пользователи заплатят за это. Применение консоли позволяет избежать этой проблемы, потому что все сообщения выводятся безвредно (и молча!) в месте, к которому у пользователя обычно нет доступа. Использование консоли также означает, что вам не нужно удалять сообщения из кода, если этого действительно не хочется. Это может помочь в поддержании и отладке кода, если что-то пойдёт не так (так обычно делают с любым программным обеспечением!).
Изучение и правильное использование инструментов разработчика входящих в Firefox (или любого используемого браузера) это важный шаг в становлении хорошего разработчика. Вот почему я советую всем посмотреть ссылки выше и подробнее ознакомиться с различными инструментами доступных в Firefox.
Ещё один специальный инструмент, который не был упомянут выше, называется удаленный отладчик . Этот инструмент позволяет подключиться к телефону под управлением Android или Firefox OS и использовать инструменты разработчика для отладки кода, который выполняется на устройстве, в реальном времени.
Резюме
Эта глава посвящена краткому обзору инструментов разработчика входящих в Firefox. Использование этих инструментов делает процесс разработки проще, особенно, когда вы используете их совместно с симулятором Firefox OS. В следующей главе мы узнаем больше о Менеджере приложений и как его использовать наилучшим образом.
Firefox 10, релиз которого состоялся 31 января (в день релиза бета версии Firefox 11), наконец собрал в себе все накопившиеся инструменты разработчика и дополнил их Page и Style Inspectors (инспектор страниц и инспектор стилей).
В чем-то эти инструменты похожи на инструмент Firebug , тем не менее, это не мешает им сохранять ту уникальность, которая свойственна инструментам от Mozilla. Вместо того чтобы копировать инструменты Firebug или WebKit, Mozilla решила оставить только самые необходимые функции. Это было сделано для того, чтобы облегчить и упростить работу пользователя Mozilla.
Оказался новый подход удачным или же разработчики отдадут предпочтение Firebug ? Давайте исследуем.
Вы можете вызвать Page Inspector , кликнув правой кнопкой мышки на веб-странице и выбрав пункт ‛Inspect “ (у меня - исследовать элемент). (Совсем недавно Firebug изменил свою строку контекстного меню на ‛Inspect element with Firebug “, чтобы ее можно было отличить от других встроенных инструментов разработчика). В нижней части экрана появится фиолетовая строка, содержащая список родительских и дочерних элементов выбранного элемента.
Родительские и дочерние элементы можно выбрать, щелкнув по ним кнопкой мышки. Чтобы увидеть соседние элементы, кликните по элементу правой кнопкой мышки. Существуют три кнопки: ‛ Inspect “, ‛ HTML “ и ‛ Style “. Как видите, такой расклад намного проще того моря ярлычков и кнопок, которые есть в Firebug .
Кликнув на кнопку HTML , мы увидим панель, которая показывает иерархию HTML тегов, из которых состоит ваша страница. На этой панели можно сворачивать и разворачивать теги, а также редактировать их атрибуты. При клике на кнопку « Inspect » вы начинаете парить над элементами и тем самым можете выбирать те элементы, которые вы хотите осмотреть. При осмотре выбранный вами элемент подсвечивается Firefox, а оставшаяся часть страницы, наоборот, затеняется.
Чтобы вызвать Style Inspector (инспектор стиля), надо кликнуть на кнопку Style . Style Inspector (инспектор стиля) показывает CSS правила, которые применяются к выделенному элементу. В Style Inspector можно переключиться с ‛ Rules “ (правила) на ‛ Properties “ (свойства). Секция ‛ Properties “ (свойства) показывает вычисленные значения CSS свойств выбранного элемента вместе со ссылками на документацию Mozilla для каждого свойства.
Фактически мы охватили все, что делают Page и Style Inspector"s . Отсутствует Web console (веб-консоль) и JavaScript редактор, представленные в более ранних версиях Firefox, они стали отдельными инструментами. Также нет ни монитора сетевой активности, ни свойства ‛edit as HTML“, ни инструментов тестирования производительности (performance-testing tools), нельзя добавить на страницу новые теги, нельзя изменять состояние элемента. Отсутствует также панель разметки (layot) для просмотра размеров ширины (width), подложки (padding) и полей (margin) элемента.
Несмотря на эти ограничения, я продолжаю использовать Page и Style Inspector"s . Мне нравится их удобный интерфейс, отличный внешний вид и продуманное расположение панелей. Работа с ними доставляет мне удовольствие и с помощью них можно решить почти все проблемы, которые у меня возникают.
Благодаря своей простоте интерфейсы inspector"s не утрачивают свою актуальность даже в том случае, когда я уменьшаю размеры окна, чтобы проверить чувствительность дизайна. Когда inspector"s помочь мне не могут, я возвращаюсь к использованию Firebug или к Web Developer Toolbar (панели инструментов веб-разработчика)
Инструментарию Mozilla нет необходимости повторять весь набор свойств инструментов их конкурентов, потому что специализированные свойства этих инструментов уже существуют в приложениях Firefox. В этом и заключается уникальность инструментов разработчика Firefox.
Firefox 11 версия
В дальнейших релизах Firefox можно ожидать новых решений и свойств. Инструменты разработчика в Firefox 11 могут показывать страницу в виде трехмерных стеков тегов. При каждом новом вложении тега стек становится выше. Это свойство на удивление полезно, так как с одного взгляда можно понять, находится ли элемент внутри ошибочного элемента-родителя. Возможность видеть, как теги накладываются друг на друга, избавит новых разработчиков от многих проблем связанных с блочными элементами.
Также в Firefox 11 будет присутствовать style editor (редактор стилей). С помощью этого редактора можно создавать новые таблицы стилей. От текстовых этот редактор отличается тем, что изменения применяются моментально, как только вы заканчиваете печатать.
Приятно видеть, что CSS редактированием можно заниматься напрямую через браузер, а не обращаться к таким программам, как Espresso. В этом году ожидается выход новых свойств, среди которых есть "инструмент для оказания помощи в вопросах производительности приложений".
Несмотря на все вышесказанное о Firefox 11, сравнивать инструменты разработчика firefox11 с Firebug (или инструментами разработчика от WebKit) - это все равно, что сравнивать iOS с Android. Так инструментарий от firefox 11 имеет простой, интуитивный интерфейс, в нем реализованы интересные инновационные идеи, но количество функций заточенных под профессионала крайне мало.
Например, в firebug есть все функции, о которых можно только подумать, его можно конфигурировать, как только захочется, о простоте и интуитивности говорить же не приходится. Однако, в отличие от iOS и Android данными инструментами можно пользоваться одновременно. Важно помнить, что Mozilla продолжает поддерживать Firebug и объявила, что его ждет еще долгая жизнь.
Какой инструмент подойдет вам? Это зависит от того, какие функции вам нужны, а какие нет, и как вы относитесь к поиску дополнительных расширений для выбранного вами инструмента. Как бы вы не относились к инструментам разработчика, эта та область, где Firefox сложно обвинить в копировании WebKit.
За последнее время у 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». А вот с этим утверждением я абсолютно согласен.
- Перевод
Исторически сложилось так, что Firefox пользуется широкой популярностью среди веб-разработчиков благодаря его расширяемости через подключение всевозможных плагинов и дополнений, написанных сторонними разработчиками. Идея выделения функционала в расширения позволила решать массу всевозможных задач прямо в браузере, не прибегая к внешним инструментам.
Безусловно в этом списке вы обязательно найдёте уже знакомые расширения, однако огромный пласт полезных расширений всегда остаётся в стороне. Так что приготовьтесь установить ещё парочку расширений! :)
Встроенные инструменты разработки в Firefox
Перед началом списка было бы неправильно не упомянуть об инструментах, уже встроенных в Firefox. Здесь речь идёт о тех самых инструментах разработки в Firefox Aurora 10 и том функционале, который сегодня можно найти в любом современном браузере.При разработке интерфейса этих инструментов было перепробовано множество подходов и решений. В результате получился довольно приятный интерфейс, который любой желающий может испробовать, установив Firefox Aurora (хм, вы ещё его не поставили?)
Ну а под катом вас ждёт огромный перечень расширений, который обязательно окажется полезным для любого веб-разработчика.
Firebug
Это расширение идёт нулевым в списке расширений. Firebug установил стандарт в инструментах разработки во всех браузерах. Обычно используется для живого редактирования CSS и HTML, отладки JavaScript и оптимизации загрузки страниц. Некоторые из нижеупомянутых расширений основаны на Firebug, поэтому к этому расширению мы ещё вернёмся.На всякий случай напоминаю, что Firebug достаточно требователен к памяти, поэтому не забывайте его отключать (или просто не включать) на тех сайтах, с которыми вы не работаете.