Отладка прогрессивных веб-приложений
Прогрессивные веб-приложения (PWA) создаются с использованием веб-технологий. Поэтому все средства, доступные в средствах разработки Microsoft Edge, также полезны для PWA. Дополнительные сведения см. в документации по Microsoft Edge DevTools.
PWA также используют манифесты веб-приложений и могут использовать рабочие роли служб и другие специальные функции и API, для которых требуются специальные средства отладки.
Открытие средств разработки
PWA можно установить локально и использовать в автономном окне или в веб-браузере, как веб-сайт.
В обоих случаях вы можете открыть средства разработки в PWA одинаково. Чтобы открыть средства разработки, используйте один из следующих способов:
- Щелкните правой кнопкой мыши любой элемент в пользовательском интерфейсе приложения и выберите пункт Проверить.
- Нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS).
- Нажмите клавишу F12.
Дополнительные сведения см. в статье Открытие средств разработки в обзоре средств разработки.
Проверьте изменения
При разработке PWA вы вносите изменения в исходный код, а затем тестируете их.
Самый быстрый способ проверить изменения — загрузить PWA в веб-браузере с помощью локального URL-адреса разработки, например http://localhost:8080. Тестирование в браузере выполняется быстрее, так как вам не нужно сначала устанавливать PWA локально.
Чтобы протестировать изменения, обновите вкладку браузера, где загружается PWA, нажав клавишу F5.
После создания рабочей роли службы, которая кэширует статические файлы, нажатие клавиши F5 может не всегда перезагрузить последние изменения в браузере. Чтобы заставить браузер перезагрузить изменения, используйте один из следующих способов:
- Откройте DevTools, щелкните правой кнопкой мыши кнопку Обновить на панели инструментов браузера и выберите пункт Пустой кэш и жесткое обновление.
- Откройте DevTools, откройте приложение , щелкните Рабочие роли службы, а затем установите флажок Обход сети .
Чтобы протестировать функции PWA, которые включены путем добавления кода в манифест веб-приложения, необходимо установить PWA. Если вы внесете дальнейшие изменения в манифест веб-приложения, необходимо удалить и переустановить PWA. Сведения об удалении PWA см. в статье Управление PWA в разделе Использование прогрессивных веб-приложений в Microsoft Edge.
Отладка рабочей роли службы
Ваша рабочая роль службы PWA отвечает за то, чтобы приложение было быстрее и надежнее в сетевых условиях.
Рабочая роль службы выполняет это параллельно с приложением и перехватывает сетевые запросы. У него есть собственный жизненный цикл, который не зависит от жизненного цикла приложения.
Чтобы проверить, правильно ли установлена рабочая роль службы и в каком состоянии ее жизненного цикла она находится в данный момент, используйте область Рабочие роли службы средства приложения . Дополнительные сведения см. в статье Рабочие роли служб в статье Отладка прогрессивных веб-приложений (PWA).
Чтобы отладить код JavaScript, выполняемый в потоке рабочей роли службы, с помощью точек останова переключитесь на поток рабочей роли службы в средстве Источники . Дополнительные сведения см. в статье Изменение контекста потока в функциях отладки JavaScript.
Рабочие роли служб могут выполняться, даже если приложение не запущено и выполняет фоновые задачи для поддержания приложения в актуальном состоянии. Например, они могут получать данные с сервера или получать push-сообщения.
Для отладки фоновых задач рабочей роли службы используйте раздел Фоновые службы средства приложения . Дополнительные сведения см. в разделе Отладка фоновых служб.
Просмотр манифеста веб-приложения
Манифест веб-приложения определяет имя, описание, значок и функции приложения. Правильно ли работают эти функции, может зависеть от того, правильно ли они были введены в JSON-файле манифеста.
Чтобы проверить, обнаруживает ли Microsoft Edge файл манифеста и его компоненты, используйте панель Манифест средства приложения . Дополнительные сведения см. в разделе Манифест веб-приложения в статье Отладка прогрессивных веб-приложений (PWA).
Некоторые функции манифеста PWA имеют выделенные средства. Например, можно протестировать обработку протокола прогрессивного веб-приложения (PWA).
Просмотр и изменение локальных данных
Чтобы предоставить пользователям широкий и быстрый интерфейс, PWA может хранить данные локально. Чтобы просмотреть, изменить и удалить хранимые данные, ознакомьтесь со следующей документацией devTools в зависимости от выбранного варианта хранения.
- Просмотр данных кэша.
- Просмотр и изменение данных IndexedDB.
- Просмотр и изменение локального хранилища.
- Просмотр и изменение хранилища сеансов.
Чтобы просмотреть общий объем хранимых данных, используемых PWA, доступную квоту и удалить данные, используйте панель Хранилище средства приложения . Дополнительные сведения см. в разделе Хранилище в отладке прогрессивных веб-приложений (PWA).
Имитация экрана разных размеров
С помощью прогрессивных веб-приложений вы предоставляете приложение для всех устройств из одной базы кода. Чтобы убедиться, что приложение адаптируется к экрану всех размеров устройства, используйте средство эмуляции устройства в Средствах разработки.
Дополнительные сведения см. в статье Эмуляция мобильных устройств (эмуляция устройств).
Обратите внимание, что средство эмуляции устройства доступно только при использовании средств разработки в браузере, а не при использовании Средств разработки в установленном PWA. Установленные PWA имеют собственные автономные окна, размер которых очень легко изменить, чтобы протестировать приложение под разными размерами экрана.