Firefox Developer Edition был выпущен Mozilla во время празднования десятой годовщины Firefox в прошлом году. Недавно 64-разрядные сборки Firefox Developer Edition стали доступны для Windows, Linux и Mac OS X. Firefox Developer Edition обеспечивает легкий доступ к широкому спектру инструментов разработчика, которые помогают упростить отладку и помогают быстрее и профессиональнее развитие. Вы можете скачать последнюю версию Firefox Developer Edition здесь . Давайте посмотрим на некоторые из замечательных возможностей Firefox Developer Edition.
WebIDE
С помощью WebIDE вы можете создавать, редактировать, тестировать или отлаживать веб-приложения, запустив их на симуляторе Firefox OS. Если вы создаете новое веб-приложение, оно также создает базовый шаблон приложения или более полный набор шаблонов для вас вместе с правильной структурой каталогов. WebIDE также позволяет подключать Firefox Devtools ко многим другим веб-браузерам, таким как Safari (iOS), Firefox (Android) и Chrome (Android).
Адаптивный дизайн
Адаптивное представление дизайна в Firefox может быть вызвано нажатием Ctrl + Shift + M. Вы можете проверить отзывчивость вашего веб-приложения с помощью этой утилиты. Он предлагает ряд опций, таких как установка размера устройства, которое вы хотите эмулировать, поворот экрана (переход из портретного в альбомный режим), имитация сенсорных событий и создание снимка экрана веб-страницы в адаптивном режиме.
Пипетка
Инструмент «Пипетка» — это действительно потрясающий инструмент, который помогает вам узнать шестнадцатеричное значение любого цвета на веб-странице (точно так же, как инструмент «Пипетка» в Photoshop). Это помогает в поиске цвета любого элемента или изображения, которые должны просматривать его код с помощью Element Inspector. При нажатии на цветные копии это значение для вашего буфера обмена!
Браузер Инспектор
Мы все работали с Инспектором Элементов, теперь, что, черт возьми, Инспектор Браузера? Ну, Browser Inspector используется для отладки самого браузера Firefox. Если вы хотите изменить цвет строки URL-адреса или, например, изменить кривую вкладок с непостоянными результатами, то вы можете сделать это с помощью Browser Inspector. Хотя тот же результат может быть достигнут с помощью Scratchpad, Browser Inspector отлично подходит, если вы не являетесь разработчиком Firefox или просто хотите проверить свои изменения!
3D вид
Теперь это, я считаю, самая удивительная особенность Firefox Developer Tools. Вы можете посмотреть 3D-рендеринг любого веб-сайта, где каждый блок высот представляет элемент в порядке их вложения в код веб-сайта. Это поможет вам узнать, какие элементы вложены в какой элемент. Вы можете получить доступ к 3D-виду, нажав Ctrl + Shift + C, а затем выбрав значок в форме прямоугольника с правой стороны вновь открытой панели.
блокнот
Вы можете открыть Scratchpad, нажав Shift + F4. Scratchpad может использоваться для запуска кластеров кода JavaScript и редактирования, запуска и проверки результатов. Отличие от Browser Console состоит в том, что Browser Console предназначена для интерпретации одной строки кода за раз, но с помощью Scratchpad вы можете работать с большими кусками кода, выполняя его различными способами, в зависимости от того, как вы хотите использовать выход.
Вывод
Firefox Developer Edition предоставляет широкий спектр инструментов для создания, отладки, мониторинга производительности, отладки браузера и расширения самих DevTools. Объяснение всех инструментов выходит за рамки этой статьи. Тем не менее, вы можете посмотреть полный список инструментов здесь . Мы надеемся, что знакомство с вышеупомянутыми инструментами поможет вам в повседневной работе по веб-разработке.