Как отлаживать веб-приложения с помощью инструментов разработчика Firefox

Обязательное ноу-хау для продвинутой веб-разработки

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

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

Наконец, в конце я расскажу вам, как установить мощный Firefox Developer Edition.

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

Большинство из нас знает, как открыть инструменты разработчика по ошибке или по собственному опыту.

Вот несколько способов открыть панель инструментов разработчика:

• Нажмите клавишу F12
• Перейдите в гамбургер-меню в правом углу URL-строки и щелкните его. Внизу найдите пункт «Справка» с надписью «Веб-разработчик». Откройте любые девять вариантов.

Краткий обзор пользовательского интерфейса

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

1. Опция указателя поможет вам найти элемент DOM на вашей веб-странице, просто наведя на него курсор в пользовательском интерфейсе.
2. Инспектор страниц. Инспектор страниц позволяет просматривать HTML-код веб-страницы во время выполнения. Он также позволяет просматривать свойства CSS и настраивать шрифты и анимацию.
3. Веб-консоль. Веб-консоль - самый известный инструмент среди интерфейсных разработчиков. Здесь печатаются ваши console.log("..."); операторы.
4. Отладчик Javascript: вы можете использовать инструмент отладчика, чтобы узнать, где возникают ошибки в вашем коде Javascript. Он также может реконструировать ваши модули Webpack и позволить вам выявлять ошибки в определенных исходных файлах из вашего скомпилированного кода.
5. Редактор стилей: вы можете просматривать и редактировать отдельные таблицы стилей, используемые на вашей веб-странице, включая встроенный CSS в тегах стилей. Кроме того, вы можете написать дополнительный код CSS или импортировать другую таблицу стилей со своего компьютера.
6. Инструменты производительности: это позволяет вам видеть, сколько времени занимают определенные события и сколько кадров в секунду может выполнять ваша веб-страница. (FPS, или количество кадров в секунду, - это количество раз, когда браузер может обновить дисплей. Оптимально, это должно быть 60 FPS в зависимости от вашей ОС и оборудования монитора.) Вам нужно будет начать мониторинг своей производительности, которая загружается в буфер в памяти. Вы можете просмотреть результаты только после остановки мониторинга; в противном случае производительность снизится из-за нагрузки, связанной с отображением самих данных о производительности в реальном времени.
7. Память: инструмент памяти позволяет создать моментальный снимок кучи Javascript. Он также может определить, где вы размещаете свои объекты в исходном коде.
8. Сетевой монитор: этот инструмент позволяет просматривать все ваши сетевые запросы.
9. Хранилище: вы можете просматривать и редактировать кэш вашего сайта, файлы cookie, проиндексированную базу данных, локальное хранилище и хранилище сеансов.
10. Инструменты специальных возможностей: вы можете увидеть, как функции универсального доступа интерпретируют вашу веб-страницу. Это очень важно, если вы хотите, чтобы ваш сайт привлекал максимально возможную аудиторию.
11. Режим адаптивного дизайна. Вы можете проверить, как ваш веб-сайт будет работать на мобильных устройствах и планшетах. Это работает намного лучше, чем уменьшение размера окна браузера на вашем ноутбуке. Кроме того, вы можете проверить реакцию веб-сайта на ротацию устройства, регулирование скорости сети, соотношение пикселей устройства и моделирование сенсорных событий.

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

Важные функции, которые вам следует использовать

Тестирование новых шрифтов

В инспекторе страниц найдите третью панель (она может быть скрыта, щелкните стрелку в верхнем левом углу второй панели). В нем есть вкладка «Шрифты».

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

Помимо редактирования шрифтов, вы можете редактировать анимацию. Я еще не тестировал эту функцию!

Пипетка

Это одна из тех особенностей, которую все упускают из виду, потому что она такая маленькая. Если вы внимательно посмотрите, рядом с текстовым полем «Искать в HTML» в редакторе HTML справа есть символ-капельница.

Пипетку можно использовать для выбора цвета на веб-странице. Мне не удалось сделать снимок экрана, потому что он автоматически фокусируется. Объясню словами - без проблем!

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

Вы найдете это полезным во многих случаях:

• Если вам когда-нибудь нравится цветовая схема веб-сайта, откройте ее в Firefox, проверьте каждый пиксель и скопируйте понравившиеся цвета.
• Вы можете увидеть, как работает сглаживание, просмотрев отдельные оттенки, отображаемые в шрифтах.
• Вы можете отлаживать свой холст HTML5. Например, посмотрите, как параметр сглаживания PixiJS изменяет рендеринг.

Скриншот

Инструмент для создания снимков экрана Firefox очень полезен не только для разработчиков, но и для всех. Это то, что Google Chrome еще не реализовал! Щелкните правой кнопкой мыши веб-страницу и выберите параметр «Сделать снимок экрана».

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

Подключение Firefox к вашему устройству Android

Предпосылки

Для начала у вас должен быть Firefox для Android и сканер штрих-кода от ZXKing. Кроме того, у вас должна быть сеть Wi-Fi, по которой будет происходить удаленная отладка.

Перейдите в параметры ›настройки› расширенные в Firefox (мобильный) и включите Удаленную отладку через Wi-Fi.

Включение отладки

1. Откройте WebIDE на рабочем столе (WebDeveloper ›WebIDE на портативном компьютере) и нажмите« Обновить устройства ».
2. Отсканируйте показанный QR-код с помощью приложения для сканирования штрих-кода вашего мобильного телефона.
3. Теперь ваше мобильное устройство должно быть указано в WebIDE. Выберите это.

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

Документы MDN здесь:

• Отладка Firefox с Android
• Отладка Firefox с iOS и Chrome для Android
• Отладка по USB в Firefox

Версия для разработчиков Firefox

Наконец, моя любимая часть этой истории - знакомство с Firefox Developer Edition. Это малоизвестная версия Firefox, ориентированная на веб-разработчиков. Он включает в себя несколько надстроек (например, Valence) для веб-разработки и включает будущие технологии, которые не включены в обычный Firefox Quantum.

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

Установка в Linux

Вы можете установить Firefox Developer Edition через проект UMake. Для этого вам нужно будет добавить PPA для UMake вручную:

sudo add-apt-repository ppa:ubuntu-desktop/ubuntu-make
sudo apt-get update
sudo apt-get install ubuntu-make
umake web firefox-dev -r # installs firefox dev edition

Чтобы добавить приложение на рабочий стол GNOME, вам необходимо сделать запись на рабочем столе следующим образом:

#!/usr/bin/env xdg-open
[Desktop Entry]
Version=1.0
Type=Application
Terminal=false
Name[en_IN]=Firefox Developer Edition
Exec=/home/shukant/.local/share/umake/web/firefox-dev/firefox
Name=Firefox Developer Edition
Icon=/home/shukant/.local/share/umake/web/firefox-dev/browser/chrome/icons/default/default128.png

Обязательно измените пути к файлам на те, которые есть в вашей системе. В частности, замените часть «/ home / shukant /» на «/ home / your-username».

Windows и macOS

Вы можете использовать установщик Firefox напрямую: https://www.mozilla.org/en-US/firefox/developer/.

ПРИМЕЧАНИЕ. Пользователи Linux также могут использовать ссылку, хотя будет сложнее установить пакет .deb напрямую с помощью диспетчера пакетов.

Дальнейшее чтение:

• Полный обзор HTML Canvas
• Как нецелочисленные значения хранятся в float (и почему они float)
• Удаление циклических зависимостей в JavaScript
• Как синхронизировать приложение на нескольких устройствах (Android)
• Как использовать Firebase для создания многопользовательских игр для Android

Обязательно расскажите мне, как вам нравится Firefox Developer Edition в Twitter. Кроме того, объясните, можете ли вы переключиться с Chrome на Firefox для отладки веб-приложений !!!