Средства отладки #1¶

Добро пожаловать на День 3 недели #30DaysOfPWA! Хотите узнать больше об этом проекте? Ознакомьтесь с нашим постом Kickoff, чтобы получить более подробную информацию о дорожной карте контента и участниках. А теперь давайте погрузимся в работу!

ЧТО МЫ РАССМОТРИМ СЕГОДНЯ¶

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

Помимо доступа к HTML и CSS, их редактирования в браузере, поиска ошибок JavaScript и их отладки, инструменты разработчика браузера (или просто DevTools) также содержат средства, специально предназначенные для PWA.

Обзор¶

Сегодня мы рассмотрим некоторые из наиболее полезных инструментов при работе над кодом Progressive Web Apps. В этой статье мы рассмотрим, как имитировать различные устройства, устранять проблемы с установкой и кэшированием, а также тестировать автономные сценарии.

Хотя для демонстрации инструментов мы будем использовать Microsoft Edge, в других браузерах есть очень похожие инструменты.

Тестирование на других устройствах¶

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

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

Чтобы запустить Эмуляцию устройства:

• Откройте DevTools, нажав клавишу F12 или щелкнув правой кнопкой мыши на странице и выбрав пункт Inspect.
• Нажмите кнопку Включить эмуляцию устройства в левом верхнем углу DevTools.

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

Обратите внимание, что Эмуляция устройства работает только в том случае, если приложение запущено во вкладке браузера. Если оно работает отдельно от браузера (например, при использовании PWA Starter или при установке и запуске в виде отдельного окна), то кнопка Toggle device emulation в DevTools будет недоступна.

Подробнее об инструменте Эмуляция устройств здесь.

Обеспечение возможности установки приложения¶

На первой неделе мы рассмотрели три составных элемента PWA: использование HTTPS, Сервис-воркер и Манифест веб-приложения.

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

Бывают случаи, когда браузер считает, что ваше приложение не готово к установке, и не всегда можно сразу понять, почему. Для отладки этой проблемы можно просмотреть информацию о возможности установки в инструменте Application.

Чтобы просмотреть эту информацию, выполните следующие действия:

• Откройте DevTools.
• Откройте инструмент Application, нажав на знак + на панели инструментов и найдя название инструмента в списке.
• Перейдя в инструмент, перейдите на вкладку Manifest в левой боковой панели.

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

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

Подробнее об использовании инструмента Application для просмотра манифеста Web App Manifest.

Перезагрузка изменений манифеста¶

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

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

1. Удалите приложение:
   • На мобильных устройствах PWA можно удалить, как и любые другие приложения.
   • На настольных компьютерах, используя Microsoft Edge или Chrome, для удаления любого приложения перейдите на специальную страницу about:apps.
2. Снова зайдите в приложение через веб-браузер и убедитесь, что загружен новый манифест.
   • Возможно, потребуется принудительная жесткая перезагрузка: откройте DevTools, затем щелкните правой кнопкой мыши на значке обновления страницы на панели инструментов браузера и выберите Открыть кэш и жестко обновить.
3. Установите приложение еще раз.

Проверка работоспособности сервис-воркера¶

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

Чтобы найти информацию о своем сервисе-воркере PWA:

• Откройте DevTools.
• Откройте инструмент Application, нажав на знак + на панели инструментов и найдя название инструмента в списке.
• Открыв инструмент, перейдите на вкладку Сервисы-воркеры в левой боковой панели.

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

Если вы хотите отладить JavaScript-код в рабочем, щелкните на имени его Source файла в инструменте. Это автоматически откроет файл в инструменте Источники. Вы всегда можете вернуться к инструменту Application с помощью панели вкладок вверху, но инструмент Sources очень удобен, когда необходимо исследовать проблемы JavaScript, требующие пошаговой проверки того, что делает код.

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

Подробнее об использовании инструмента Sources для отладки JavaScript-кода.

Устранение проблем с кэшем¶

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

В DevTools есть возможность визуализировать кэш для вашего PWA.

• Откройте DevTools.
• Откройте инструмент Application, нажав на знак + на панели инструментов и найдя название инструмента в списке.
• Находясь в этом инструменте, раскройте раздел Хранилище кэша в левой боковой панели.
• Найдите свой кэш (он будет отображаться в развернутом разделе с именем, которое вы выбрали в коде сервис-воркера) и щелкните на нем.

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

Одним из наиболее полезных действий, которые можно выполнить в этом инструменте, является удаление записей из кэша. Таким образом, можно внести изменения в код кэширования и протестировать его снова, как если бы ресурс не был кэширован ранее. Чтобы удалить кэшированный ресурс:

• Выберите его, щелкнув на нем в таблице Хранилище кэша.
• Нажмите кнопку Удалить выделенное на панели инструментов таблицы.

Подробнее об использовании инструмента Хранилище кэша.

Тестирование автономной поддержки¶

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

И снова на помощь приходит DevTools!

• Откройте DevTools.
• Откройте инструмент Application, нажав на знак + на панели инструментов и найдя название инструмента в списке.
• Открыв инструмент, перейдите на вкладку Сервисы-воркеры в левой боковой панели.
• В верхней части инструмента установите флажок Offline.

После этого браузер будет вести себя так, как будто вы не подключены к Интернету, и вы можете использовать приложение, чтобы посмотреть, как оно себя ведет. Например, можно попробовать обновить страницу (нажав клавишу F5 или ctrl+R/cmd+R) и посмотреть, загрузится ли вообще приложение.

Резюме¶

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

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

Комментарии