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

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 позволяет выявлять и удалять состояние сайтов, которые, по всей видимости, используют межсайтовое отслеживание с помощью метода отслеживания отказов. Вы можете вручную принудительно включить средства защиты от отслеживания и ув��деть список сайтов, состояние которых было удалено.

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

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. При желании, для фильтрации таблицы на вкладке «Предположения» в строке фильтра вверху можно ввести значение по своему усмотрению или использовать один из фильтров по ключу: url: VALUE , action: VALUE или action: VALUE .

   

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

   

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

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

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

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

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

   

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

   

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

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

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

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

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

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

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

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

   

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

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

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

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

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

Контекст отчета о ДТП

С помощью Reporting API вы можете настроить свой веб-сайт для отправки отчетов о сбоях на сервер, предназначенный для crash-reporting или на сервер default . Отчет о сбое может включать интерфейс CrashReportContext , позволяющий записывать произвольные данные, связанные со сбоем, в виде пар ключ-значение для текущего контекста просмотра верхнего уровня.

В разделе «Приложение > Фоновые службы > API отчетов > Контекст отчета о сбоях » вы можете просмотреть данные контекста сбоя и отфильтровать их по ключу или значению в строке фильтра вверху.

Сеансы, привязанные к устройству

Device Bound Session Credentials (DBSC) — это веб-API и протокол между пользовательскими агентами и серверами, цель которого — предотвратить кражу файлов cookie, позволяя пользовательскому агенту подтвердить владение надежно хранящимся закрытым ключом.

Чтобы просмотреть сеансы, привязанные к устройству, их определения и события:

1. Откройте инструменты разработчика на странице, использующей DBSC.
2. Перейдите в раздел Приложения > Фоновые службы > Сеансы, привязанные к устройству .

3. В боковой панели слева разверните сайт, чтобы просмотреть его активные сессии. Выберите сессию, чтобы просмотреть ее описание.

   

4. В таблице «События» регистрируются события DBSC: создание, обновление, проверка подлинности и завершение. Чтобы сохранить список событий при переходе между страницами, установите флажок « Сохранить журнал» .

5. В таблице «События» выберите событие, чтобы просмотреть его подробную информацию.

6. Если событие завершилось с ошибкой, в столбце «Результат» отобразится сообщение Error . Выберите событие, завершившееся с ошибкой, чтобы просмотреть его подробности, код ошибки ответа и причину сбоя.

   

В разделе « Сеансы, привязанные к устройству» на боковой панели могут быть выявлены следующие проблемы:

• Завершенные сессии : Обозначаются перечеркнутым текстом и значком выключенной базы данных на боковой панели.
• Неудачные события : отмечены значком предупреждения. Элемент «Нет сессии» отображает неудачные события, которые были связаны с сайтом, но не с известной сессией.