Все, что вам нужно знать об инструментах разработчика Firefox

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

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

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

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

Создание инструментов

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

Блокнот

Этот инструмент дает веб-разработчикам возможность экспериментировать с кодом JavaScript. В среде, предоставляемой Scratchpad, вы можете писать, запускать и исследовать результаты кода, который взаимодействует с текущей страницей.

Чтобы открыть Scratchpad, просто нажмите Shift F4 или перейдите в меню Web Developer и нажмите Scratchpad. Это откроет окно, в котором вы можете написать свой код. Когда вы закончите, нажмите « Выполнить»> «Выполнить», и код будет запущен на текущей вкладке.

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

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

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

Редактор шейдеров

Использовать редактор шейдеров в Firefox очень просто. Разработчики могут полностью просматривать и редактировать шейдеры фрагментов и вершины, используемые WebGL. И просто быстро для тех, кто не знает, WebGL разумно использует JavaScript (через API) для рендеринга как 2D-, так и 3D-графики непосредственно через браузер Firefox, при этом не требуя использования плагинов.

Чтобы использовать редактор шейдеров, его необходимо сначала включить. Для этого перейдите в настройки Toolbox и установите флажок рядом с «Shader Editor». После этого редактор шейдеров отобразится на панели инструментов Firefox. Щелкните по нему, и вы сможете его открыть.

Редактор веб-аудио

API веб-редактора аудио позволяет разработчикам создавать аудиоконтекст. Разработчикам потребуется создать аудиоузлы, обеспечивающие:

• Источники звука
• Узлы, выполняющие преобразования
• Примечания, представляющие выбранное место назначения для аудиопотока.

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

Как и редактор шейдеров, редактор веб-аудио должен быть включен вручную и не является настройкой по умолчанию. Включить легко: просто вернитесь в настройки инструмента разработчика и установите флажок рядом с «Веб-аудио». Затем вы увидите, что на панели инструментов Firefox Toolbox есть дополнительная вкладка. Просто нажмите на эту вкладку, и будет загружена страница, из которой вы можете создать аудиоконтекст.

Инструменты отладки

Инструменты отладки Firefox предназначены для изучения, изучения и отладки веб-сайтов и веб-приложений. Ниже я описал ключевые особенности некоторых из этих инструментов и их преимущества.

Инспектор страниц

Инструмент Page Inspector позволяет разработчикам проверять и вносить изменения в кодировку HTML и CSS веб-страницы. Используя этот инструмент, разработчики могут исследовать страницы через локально загруженную версию или через удаленную цель.

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

Веб-консоль

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

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

Чтобы открыть веб-консоль, перейдите в подменю «Веб-разработчик» в меню Firefox и нажмите «Веб-консоль». Вы также можете использовать сочетание клавиш Ctrl Shift K. Панель инструментов появится в нижней части браузера с активированной «Консолью».

Отладчик

Инструмент Firefox Debugger дает веб-разработчикам возможность исследовать и изменять ваш код JavaScript. Его также можно использовать для выявления ошибок. Используя отладчик, вы можете отлаживать код локально в Firefox или удаленно на устройстве Firefox OS или Firefox для Android.

Чтобы открыть отладчик, перейдите в подменю «Веб-разработчик» в главном меню Firefox и нажмите «Отладчик». В качестве альтернативы вы можете нажать Ctrl Shift S, и в нижней части браузера появится панель инструментов с активированным отладчиком, готовым к использованию.

Сетевой монитор

Сетевой монитор разработан, чтобы показать вам все различные сетевые запросы, сделанные Firefox, сколько времени занимает каждый запрос, а также детали каждого запроса. Перейдите в Меню веб-разработчика> Сеть, чтобы активировать инструмент. Вам нужно будет обновить страницу, чтобы увидеть запросы.

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

Инспектор хранения

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

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

Чтобы открыть Storage Inspector, перейдите в подменю Web Developer и нажмите Storage Inspector. Или вы можете нажать Shift + F9, чтобы использовать сочетание клавиш.

Панель инструментов разработчика

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

Откройте панель инструментов разработчика, нажав Shift + F2. В качестве альтернативы вы можете перейти в меню веб-разработчика и щелкнуть на панели инструментов разработчика.

Другие инструменты отладки - 3D View, Eyedropper, iFrames

Другие инструменты отладки, включенные в пакет Firefox Developer Tools, включают:

• Трехмерный вид: это дает вам трехмерное представление ваших вложенных блоков HTML и содержимого.
• Пипетка для глаз: позволяет выбрать определенный цвет на странице и скопировать его в буфер обмена)
• Выбор iFrames: это позволяет вам указать инструментам разработчика на определенные iFrames в документе.

Мобильные инструменты

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

Менеджер приложений

Этот инструмент позволяет разработчикам тестировать, развертывать и отлаживать приложения HTML5 на устройствах Firefox OS. Он также действует как симулятор, поэтому тестирование можно проводить прямо из браузера Firefox для настольных ПК.

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

WebIDE

Этот мобильный инструмент позволяет разработчикам создавать, редактировать, выполнять и отлаживать свои веб-приложения с помощью Симулятора Firefox OS или устройства Firefox OS. Вы можете использовать его для подключения к инструментам разработчика Firefox с другими браузерами, такими как Firefox для Android и Chrome для Android.

Другие мобильные инструменты

Другие мобильные инструменты включают:

• Удаленная отладка для Firefox для Android
• Симулятор Firefox OS: имитирует устройство Firefox OS, но работает на рабочем столе.
• Представление с адаптивным дизайном: это позволяет вам просматривать, как ваш веб-сайт или веб-приложение выглядит на разных устройствах с разными размерами экрана.

Инструменты производительности

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

Инструмент производительности

Инструмент «Производительность» заменил исходный профилировщик выборки JavaScript в Firefox. Он по-прежнему содержит обновленную версию профиля выборки; однако он также имеет временную шкалу частоты кадров. В будущем ожидается появление дополнительных функций.

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

Профилировщик JavaScript

Профилировщик JavaScript разработан, чтобы помочь разработчикам находить проблемы в своем коде JavaScript. Это делается путем выборки текущего стека вызовов JavaScript и предоставления статистики о нем.

Инструмент для мигания краски

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

Отдельный профиль разработчика

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

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

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

Заключение

Если вы новичок или опытный веб-разработчик, вы получите большую пользу от использования подробных и разнообразных инструментов разработчика Firefox. От создания кода до отладки HTML, инструменты позволяют выполнять широкий спектр действий, необходимых для разработки веб-сайта или веб-приложения. Мобильные средства также чрезвычайно полезны, особенно для тех , кто хочет создать адаптивный веб - сайты для того , чтобы извлечь выгоду из последних (21 - ^е апреля 2015) обновление Google алгоритма.

Для получения дополнительной информации об инструментах разработчика Firefox перейдите на веб-сайт разработчика Mozilla и присоединитесь к сообществу разработчиков. Firefox Developer Edition можно загрузить и использовать бесплатно.