Отладка фоновых служб

Kayce Basques

Sofia Emelianova

Раздел «Фоновые службы» в инструментах разработчика Chrome — это набор инструментов для работы с API JavaScript, позволяющий вашему веб-сайту отправлять и получать обновления, даже когда пользователь не открывает ваш сайт. Фоновая служба функционально похожа на фоновый процесс .

В разделе «Фоновые службы» можно отлаживать следующие фоновые службы:

• Фоновая загрузка
• Фоновая синхронизация
• Уведомления
• Спекулятивные нагрузки
• Push-уведомления

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

Помимо фоновых событий служб, DevTools может:

• Отображает отчеты , которые Chrome уже отправил или собирается отправить с помощью API отчетов .
• Позволяет отлаживать и тестировать кэширование "назад/вперед" одним щелчком мыши.

Фоновая загрузка

API фоновой загрузки позволяет сервис-воркеру надежно загружать большие ресурсы, такие как фильмы или подкасты, в фоновом режиме. Чтобы регистрировать события фоновой загрузки в течение трех дней, даже когда DevTools не открыт:

1. Откройте инструменты разработчика на странице, использующей API фоновой выборки данных.

2. Перейдите в раздел «Приложения» > «Фоновые службы» > «Фоновая загрузка » и нажмите Записывать .

   

3. На вашей странице запустите фоновую обработку данных. Инструменты разработчика будут записывать события в таблицу.

   

4. Щёлкните по событию, чтобы просмотреть его подробности в поле под таблицей.

5. Вы можете закрыть DevTools и оставить запись работать до трех дней. Чтобы остановить запись, нажмите кнопку. Останавливаться .

Фоновая синхронизация

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

1. Откройте, например, инструменты разработчика на этой демонстрационной странице .

2. Перейдите в раздел «Приложения» > «Фоновые службы» > «Фоновая синхронизация » и нажмите Записывать .

   

3. На демонстрационной странице нажмите «Зарегистрировать фоновую синхронизацию» , чтобы зарегистрировать соответствующий сервис-воркер, и нажмите «Разрешить», когда появится соответствующий запрос.

   Примечание: Чтобы узнать, как отлаживать сервис-воркеры в инструментах разработчика, см. раздел «Сервис-воркеры» .

   Регистрация сервис-воркера — это фоновая синхронизация. Инструменты разработчика записывают события в таблицу.

   

4. Щёлкните по событию, чтобы просмотреть его подробности в поле под таблицей.

5. Вы можете закрыть DevTools и оставить запись работать до трех дней. Чтобы остановить запись, нажмите кнопку. Останавливаться .

(Экспериментальные) Меры по снижению отказов при отслеживании переходов по ссылкам.

Примечание: это экспериментальная функция, доступная начиная с версии Chrome 115.

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

Для принудительного применения мер по предотвращению отслеживания:

1. Блокировка сторонних файлов cookie в Chrome . Перейдите в раздел и включите эту функцию. > Настройки > Конфиденциальность и безопасность > Файлы cookie и другие данные сайта > Блокировка сторонних файлов cookie .
2. В chrome://flags установите для параметра « Меры по предотвращению отказов» значение «Включено с удалением» .
3. Откройте инструменты разработчика и перейдите в раздел «Приложения» > «Фоновые службы» > «Меры по предотвращению отскоков» .
4. Нажмите на ссылку, которая не отображается, и подождите (10 секунд), пока Chrome зафиксирует ошибку. На вкладке «Проблемы» появится предупреждение о предстоящем удалении состояния.
5. Нажмите «Принудительный запуск» , чтобы немедленно удалить состояние.

Уведомления

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

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

2. Перейдите в раздел Приложения > Фоновые службы > Уведомления и нажмите Записывать .

   

3. Нажмите «Уведомления по расписанию» и «Разрешить» , когда появится соответствующий запрос.

4. Дождитесь появления уведомления. Инструменты разработчика записывают события уведомления в таблицу.

   

5. Щёлкните по событию, чтобы просмотреть его подробности в поле под таблицей.

6. Вы можете закрыть DevTools и оставить запись работать до трех дней. Чтобы остановить запись, нажмите кнопку. Останавливаться .

Спекулятивные нагрузки

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

Функция prefetch загружает ресурс заранее, а функция prerender идет еще дальше и отображает всю страницу в скрытом фоновом процессе рендеринга.

Отладку спекулятивных загрузок можно выполнить в разделе «Приложение > Фоновые службы > Спекулятивные загрузки ». Этот раздел содержит три представления:

• Спекулятивные загрузки . Содержит спекулятивный статус текущей страницы, текущий URL, страницы, которые текущая страница пытается загрузить спекулятивно, и их статусы.
• Правила . Содержит наборы правил на текущей странице в панели «Элементы» , а также общий статус предположений.
• Спекулятивные данные . Содержит таблицу с информацией о попытках спекулятивной загрузки и их статусах. Если попытка не удалась, вы можете щелкнуть по ней в таблице, чтобы увидеть подробную информацию и причину сбоя.

Попробуйте отладить спекулятивную загрузку на этой демонстрационной странице предварительной отрисовки :

1. Откройте инструменты разработчика на странице и перейдите в раздел Приложение > Фоновые службы > Спекулятивные загрузки . Если вы не видите ни одной спекулятивной загрузки, инициированной страницей, перезагрузите её.

   

2. На начальной странице демоверсии предварительно отображаются две страницы, а одна не отображается. Нажмите «Просмотреть все предположения» .

3. В разделе «Предположения» выберите предположение со статусом «Сбой» , чтобы увидеть причину сбоя в разделе с подробной информацией внизу.

   

   В данном случае предварительная отрисовка не удалась, потому что на сайте отсутствует страница /next3.html .

4. Откройте раздел «Правила» и нажмите « Статус» , чтобы увидеть набор правил внизу. Нажав на ссылку « Набор правил» , вы перейдете на панель «Элементы» , где будет показано, где определено правило спекуляции.

   

   Совет: Вы не можете исправить правило на этом экране или на панели «Элементы» , потому что инструменты разработчика не сохраняют произвольные изменения DOM при каждой загрузке страницы. Вам необходимо исправить правило в исходном коде , настроив рабочую область , или имитировать изменение, переопределив содержимое .

Более подробное пошаговое руководство см. в разделе «Отладка правил спекулятивного вычисления» .

Push-уведомления

Для отображения push-уведомления пользователю сервис-воркер должен сначала использовать API push-сообщений для получения данных с сервера. Когда сервис-воркер готов отобразить уведомление, он использует API уведомлений . Чтобы регистрировать push-сообщения в течение трех дней, даже когда инструменты разработчика не открыты:

1. Откройте, например, инструменты разработчика на этой демонстрационной странице .

2. Перейдите в раздел Приложения > Фоновые службы > Push-уведомления и нажмите Записывать .

   

3. На демонстрационной странице включите push-уведомления , нажмите «Разрешить» при появлении запроса, введите сообщение и отправьте его. Инструменты разработчика записывают события push-уведомлений в таблицу.

   

   Примечание: Кроме того, в разделе «Приложение > Сервисные работники» вы можете нажать кнопку «Push» , чтобы отправлять тестовые уведомления из инструментов разработчика.

4. Щёлкните по событию, чтобы просмотреть его подробности в поле под таблицей.

5. Вы можете закрыть DevTools и оставить запись работать до трех дней. Чтобы остановить запись, нажмите кнопку. Останавливаться .

API для создания отчетов

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

Например, предположим, что ваш новый сайт использует стороннее программное обеспечение, которое применяет document.write() для загрузки важных скриптов. Новые пользователи со всего мира открывают ваш сайт, но у них может быть более медленное соединение, чем то, которое вы тестировали. Вы даже не подозреваете, что ваш сайт начинает давать сбои, потому что Chrome вмешивается в работу document.write() в сетях с низкой скоростью соединения. Кроме того, вам следует следить за устаревшими или скоро устаревающими API, которые может использовать ваш код.

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

Чтобы просмотреть отчеты, созданные для страницы:

1. Перейдите по адресу chrome://flags/#enable-experimental-web-platform-features , установите параметр «Экспериментальные функции веб-платформы» в положение «Включено» и перезапустите Chrome.

2. Откройте инструменты разработчика и перейдите в раздел «Приложения» > «Фоновые службы» > «API отчетов» .

   

Вкладка «API для создания отчетов» разделена на три части:

• В таблице «Отчеты» представлена ​​следующая информация по каждому отчету:
  • URL-адрес , который привел к генерации отчета
  • Тип нарушения
  • Статус отчета
  • Конечная точка назначения
  • Сгенерировано в момент времени
  • Текст отчета
• Раздел предварительного просмотра содержимого отчета . Чтобы просмотреть содержимое отчета, щелкните отчет в таблице отчетов.
• Раздел «Конечные точки» содержит обзор всех конечных точек, настроенных в заголовке Reporting-Endpoints .

Статус отчета

В столбце «Статус» отображается информация о том, успешно ли Chrome отправил отчет, находится ли он в процессе отправки или отправка завершилась неудачей.

Статус	Описание
Success	Браузер отправил отчет, и конечная точка ответила кодом успешного выполнения ( 200 или другим кодом успешного ответа 2xx ).
Pending	Браузер пытается отправить отчет.
Queued	Отчет сгенерирован, но браузер пока не пытается его отправить. В одном из двух случаев отчет отображается как Queued : Отчет новый, и браузер ожидает поступления новых отчетов, прежде чем пытаться его отправить. Данный отчет не является новым; браузер уже пытался отправить этот отчет, но безуспешно, и теперь ожидает повторной попытки.
MarkedForRemoval	После некоторого времени повторных попыток ( Queued ) браузер прекратил попытки отправки отчета и вскоре удалит его из списка отчетов для отправки.

Сообщения удаляются через некоторое время, независимо от того, были ли они успешно отправлены.

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