Взгляд в: Firefox Developer Edition

После короткого дразнить, Mozilla официально выпустила Firefox Developer Edition. Это новый браузер, предназначенный специально для веб-разработчиков. Хотя это официально не было объявлено, похоже, что в какой-то момент он заменит Firefox Aurora.

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

Рекомендуемое чтение: как оптимизировать Firefox для повышения производительности

Пользовательский интерфейс

Изменения интерфейса в Developer Edition уже намекают на подход, ориентированный на разработчика. Панель инструментов заметно уже, чем Chrome и обычный Firefox при добавлении дополнительных кнопок по умолчанию.

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

Если вы предпочитаете тему по умолчанию, вы можете очень быстро отключить тему выпуска для разработчиков, используя кнопку «Использовать тему Firefox Developer Edition», выбрав «Меню» -> «Настройка».

С другой стороны, есть некоторые варианты интерфейса, которые меня озадачивают. Я уверен, что в этой версии закладки будут использоваться гораздо реже, и большинство разработчиков знают, что такое сочетание клавиш Ctrl / Cmd + D, чтобы это произошло. Тот факт, что есть специальная кнопка для этого; раздел закладок, раздел загрузок, даже стартовая страница Developer Edition кажется немного ненужным.

Первые впечатления

Мое первое впечатление было то, что я ничего здесь не видел раньше. Это даже усиливается Mozilla на целевой странице:

«Это все, к чему ты привык, только лучше»

Инструменты разработчика работают примерно так же, как и в обычном Firefox, WebIDE и Valence уже могут использоваться. Только незначительные косметические изменения делают Developer Edition отличным от Firefox.

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

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

Одним из важнейших признаков того, как Mozilla планирует позиционировать Developer Edition, является включение Valence (подробнее об этом позже). Позиция Mozilla в отношении Valence такова:

«Адаптер все еще находится на ранней стадии и доступен только для предварительного просмотра. Мы пока не рекомендуем использовать его для повседневной работы ».

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

WebIDE

Одной из наиболее широко рекламируемых функций является WebIDE. Добавленный в Firefox 34, он заменяет App Manager – он позволяет запускать редактирование и отладку приложений Firefox OS с помощью симулятора Firefox OS или реального устройства. Другими словами, это то, что Xcode для iOS.

Валентность

Valence по сути является кросс-браузерным средством отладки. Это позволяет инструментам разработчика работать с широким спектром браузеров. На данный момент основными целями для Valence являются Chrome на Android и Safari на iOS. Технические детали этого довольно сложны для понимания, поэтому взгляните на это видео, сделанное Mozilla:

Инструменты разработчика

Если вы знакомы с инструментами разработчика в обычном Firefox, то это почти то, что вы ожидаете. Вызвать его, используя Ctrl / CMD + I или щелкнуть правой кнопкой мыши на элементе и нажать «Проверить элемент».

Инспектор

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

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

Инспектор позволяет дважды щелкнуть мышью, чтобы изменить содержимое или свойства элемента. Один трюк, который может быть полезно знать, заключается в том, что DOM можно перемещать с помощью клавиш со стрелками, вы даже можете удалять и восстанавливать, используя клавишу удаления и команду Ctrl / Cmd + Z.

Нажатие и перетаскивание в DOM выделит часть DOM, границы будут показаны на веб-странице, еще один отличный инструмент для визуализации вашей структуры HTML и кода CSS.

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

Приставка

Консоль – это окно, которое показывает совокупную информацию из CSS, JS, Net, Security и Logging. Он в основном используется для отладки Javascript и отслеживания недостающих ресурсов, но также может использоваться для выдачи команд, даже через jQuery.

дебаггер

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

Установив точки останова в своем коде, вы можете приостановить выполнение кода Javascript до этой точки. Вы можете посмотреть, где находится выполнение в коде, и вы можете изменить переменные, прежде чем двигаться дальше.

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

Редактор стилей

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

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

Представление

Инструмент повышения производительности был представлен в Firefox 34 и является заменой профилировщика выборки JavaScript. Он позволяет вам создавать чрезвычайно подробные профили производительности, вплоть до платы за перерисовку и раскрашивание, разбор Javascript и CSS и многое другое.

Профили можно легко сохранять и импортировать, поэтому вы можете сравнивать профили, чтобы максимально упростить ваши приложения!

Лента новостей

Инструмент временной шкалы по умолчанию недоступен в обычной версии Firefox, он позволяет вам увидеть, какие операции выполняет движок браузера. Инструмент будет отображать события reflow (макет), restyle, paint, console и DOM.

сеть

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

Нижний фильтр позволяет просматривать конкретные типы активов, что особенно полезно для определения вызовов AJAX с использованием типа XHR.

При нажатии на любой актив отображаются его ответы и заголовки запросов, файлы cookie, параметры, ответы и время.

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

Адаптивный режим дизайна

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

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

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

Вывод

В двух словах: несмотря на то, что для разработчиков, которые следят за новостями Mozilla, не так много потрясающих новых функций, направление очень многообещающее. Я с нетерпением жду многих специфических для инструмента функций, таких как Coffeescript, Sass, Less и других.

Возможно, даже компилятор и другие инструменты обработки могут быть добавлены для того, чтобы сделать Firefox Developer Edition настоящим пакетом для разработчиков, а не просто чем-то, что мы используем для оценки конечного результата.

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

Если у вас есть какие-либо мысли или опыт работы с Firefox Developer Edition, сообщите нам, что вы думаете в комментариях.