Debugowanie usług w tle

Kayce Basques

Sofia Emelianova

Sekcja Usługi w tle w Narzędziach deweloperskich w Chrome to zbiór narzędzi do interfejsów API JavaScript, które umożliwiają witrynie wysyłanie i odbieranie aktualizacji nawet wtedy, gdy użytkownik nie ma otwartej witryny. Usługa w tle jest funkcjonalnie podobna do procesu w tle.

Sekcja Usługi w tle umożliwia debugowanie tych usług w tle:

• Pobieranie w tle
• Synchronizacja w tle
• Powiadomienia
• Ładowanie spekulacyjne
• Wiadomości push

Narzędzia deweloperskie w Chrome mogą rejestrować zdarzenia pobierania, synchronizacji i powiadomień przez 3 dni, nawet gdy nie są otwarte. Może to pomóc w upewnieniu się, że zdarzenia są wysyłane i odbierane zgodnie z oczekiwaniami.

Oprócz zdarzeń usługi w tle Narzędzia deweloperskie mogą:

• Wyświetlać raporty, które Chrome już wysłał lub zamierza wysłać za pomocą Reporting API.
• Umożliwia debugowanie i testowanie pamięci podręcznej stanu strony internetowej jednym kliknięciem.

Pobieranie w tle

Interfejs API pobierania w tle umożliwia skryptowi service worker niezawodne pobieranie dużych zasobów, takich jak filmy czy podcasty, jako usługi działającej w tle. Aby rejestrować zdarzenia pobierania w tle przez 3 dni, nawet gdy narzędzia deweloperskie nie są otwarte:

1. Otwórz Narzędzia deweloperskie na stronie, która korzysta z interfejsu Background Fetch API.

2. Kliknij kolejno Aplikacja > Usługi w tle > Pobieranie w tle i kliknij  Nagrywaj.

   

3. Na stronie wywołaj aktywność pobierania w tle. Narzędzia deweloperskie rejestrują zdarzenia w tabeli.

   

4. Kliknij zdarzenie, aby wyświetlić jego szczegóły w obszarze pod tabelą.

5. Możesz zamknąć Narzędzia deweloperskie i pozostawić nagrywanie na maksymalnie 3 dni. Aby zatrzymać nagrywanie, kliknij  Zatrzymaj.

Synchronizacja w tle

Background Sync API umożliwia skryptowi service worker działającemu w trybie offline wysyłanie danych na serwer po ponownym nawiązaniu stabilnego połączenia z internetem. Aby rejestrować zdarzenia synchronizacji w tle przez 3 dni, nawet gdy narzędzia deweloperskie nie są otwarte:

1. Otwórz Narzędzia deweloperskie, np. na tej stronie demonstracyjnej.

2. Kliknij kolejno Aplikacja > Usługi w tle > Synchronizacja w tle i kliknij  Nagrywaj.

   

3. Na stronie wersji demonstracyjnej kliknij Register background sync (Zarejestruj synchronizację w tle), aby zarejestrować odpowiedni skrypt service worker, a gdy pojawi się prośba, kliknij Allow (Zezwól).

   Rejestracja skryptu service worker to działanie synchronizacji w tle. Narzędzia deweloperskie rejestrują zdarzenia w tabeli.

   

4. Kliknij zdarzenie, aby wyświetlić jego szczegóły w obszarze pod tabelą.

5. Możesz zamknąć Narzędzia deweloperskie i pozostawić nagrywanie na maksymalnie 3 dni. Aby zatrzymać nagrywanie, kliknij  Zatrzymaj.

(Eksperymentalne) Łagodzenie śledzenia przekierowań

Eksperyment Ograniczenia śledzenia przez przekierowanie w Chrome umożliwia identyfikowanie i usuwanie stanu witryn, które śledzą użytkowników w różnych witrynach za pomocą techniki śledzenia przez przekierowanie. Możesz ręcznie wymusić środki ograniczające śledzenie i wyświetlić listę witryn, których stany zostały usunięte.

Aby wymusić łagodzenie śledzenia:

1. Blokuj pliki cookie innych firm w Chrome. Otwórz > Ustawienia > Prywatność i bezpieczeństwo > Pliki cookie i inne dane witryn > Blokuj pliki cookie innych firm i włącz tę opcję.
2. W sekcji chrome://flags ustaw eksperyment Łagodzenie śledzenia przekierowań na Włączone z usuwaniem.
3. Otwórz Narzędzia deweloperskie i przejdź do Aplikacja > Usługi w tle > Ograniczenia śledzenia przekierowań.
4. Kliknij link przekierowujący i poczekaj (10 sekund), aż Chrome zarejestruje przekierowanie. Karta Problemy zawiera ostrzeżenie o nadchodzącym usunięciu stanu.
5. Kliknij Wymuś uruchomienie, aby natychmiast usunąć stan.

Powiadomienia

Gdy skrypt service worker otrzyma z serwera komunikat push, używa interfejsu Notifications API, aby wyświetlić dane użytkownikowi. Aby rejestrować powiadomienia przez 3 dni, nawet gdy Narzędzia deweloperskie nie są otwarte:

1. Otwórz Narzędzia deweloperskie

2. Kliknij kolejno Aplikacja > Usługi w tle > Powiadomienia i kliknij  Nagrywaj.

   

3. Kliknij Zaplanuj powiadomienie, a gdy pojawi się prośba, kliknij Zezwól.

4. Poczekaj na pojawienie się powiadomienia. Narzędzia deweloperskie rejestrują zdarzenia powiadomień w tabeli.

   

5. Kliknij zdarzenie, aby wyświetlić jego szczegóły w obszarze pod tabelą.

6. Możesz zamknąć Narzędzia deweloperskie i pozostawić nagrywanie na maksymalnie 3 dni. Aby zatrzymać nagrywanie, kliknij  Zatrzymaj.

Ładowanie spekulacyjne

Ładowanie spekulacyjne umożliwia niemal natychmiastowe wczytanie strony na podstawie zdefiniowanych przez Ciebie reguł spekulacyjnych. Dzięki temu Twoja witryna może wstępnie pobierać i renderować strony, do których użytkownicy najczęściej przechodzą.

Wstępne pobieranie polega na pobraniu zasobu z wyprzedzeniem, a wstępne renderowanie to krok dalej – polega na renderowaniu całej strony w ukrytym procesie renderowania w tle.

Ładowanie spekulacyjne możesz debugować w sekcji Aplikacja > Usługi w tle > Ładowanie spekulacyjne. Sekcja zawiera 3 widoki:

• Ładowanie spekulacyjne Zawiera stan spekulacyjny bieżącej strony, bieżący adres URL, strony, które bieżąca strona próbuje załadować spekulacyjnie, oraz ich stany.
• Reguły Zawiera zestawy reguł na bieżącej stronie w panelu Elementy oraz ogólny stan spekulacji.
• Spekulacje Zawiera tabelę z informacjami o próbach ładowania spekulacyjnego i ich stanach. Jeśli próba się nie powiodła, możesz kliknąć ją w tabeli, aby wyświetlić szczegółowe informacje i przyczynę niepowodzenia.

Spróbuj debugować ładowanie spekulacyjne na tej stronie demonstracyjnej wstępnego renderowania:

1. Otwórz Narzędzia deweloperskie na stronie i kliknij Aplikacja > Usługi w tle > Ładowanie spekulacyjne. Jeśli nie widzisz żadnych spekulacyjnych ładowań zainicjowanych przez stronę, załaduj ją ponownie.

   

2. Strona początkowa wersji demonstracyjnej wstępnie renderuje 2 strony, a 1 nie. Kliknij Wyświetl wszystkie spekulacje.

3. W sekcji Spekulacje wybierz spekulację ze stanem Niepowodzenie, aby wyświetlić sekcję Przyczyna niepowodzenia ze szczegółowymi informacjami u dołu.

   

   W tym przypadku renderowanie wstępne nie powiodło się, ponieważ w witrynie nie ma strony /next3.html.

4. Opcjonalnie, aby filtrować tabelę na karcie Spekulacje, na pasku filtra u góry wpisz dowolną wartość lub użyj jednego z tych filtrów: url:VALUE, action:VALUE lub action:VALUE.

   

5. Otwórz sekcję Reguły i kliknij Stan, aby wyświetlić zestaw reguł u dołu. Kliknięcie linku Zbiór reguł powoduje przejście do panelu Elementy i wyświetlenie miejsca, w którym zdefiniowano regułę spekulacyjną.

   

Szczegółowe instrukcje znajdziesz w artykule Debugowanie reguł spekulacyjnych.

Komunikaty push

Aby wyświetlić użytkownikowi powiadomienie push, skrypt service worker musi najpierw użyć interfejsu Push Message API, aby otrzymać dane z serwera. Gdy skrypt service worker jest gotowy do wyświetlenia powiadomienia, używa interfejsu Notifications API. Aby rejestrować wiadomości push przez 3 dni, nawet gdy narzędzia deweloperskie nie są otwarte:

1. Otwórz Narzędzia deweloperskie, np. na tej stronie demonstracyjnej.

2. Kliknij kolejno Aplikacja > Usługi działające w tle > Wiadomości push i kliknij  Nagrywaj.

   

3. Na stronie demonstracyjnej włącz Włącz powiadomienia push, kliknij Zezwól, gdy pojawi się odpowiedni komunikat, wpisz wiadomość i wyślij ją. Narzędzia deweloperskie rejestrują zdarzenia powiadomień push w tabeli.

   

4. Kliknij zdarzenie, aby wyświetlić jego szczegóły w obszarze pod tabelą.

5. Możesz zamknąć Narzędzia deweloperskie i pozostawić nagrywanie na maksymalnie 3 dni. Aby zatrzymać nagrywanie, kliknij  Zatrzymaj.

Interfejs API do raportowania

Niektóre błędy występują tylko w środowisku produkcyjnym. Nie widzisz ich lokalnie ani podczas programowania, ponieważ prawdziwi użytkownicy, sieci i urządzenia zmieniają zasady gry.

Załóżmy na przykład, że nowa witryna korzysta z oprogramowania innej firmy, które używa komponentu document.write() do wczytywania krytycznych skryptów. Nowi użytkownicy z całego świata otwierają Twoją witrynę, ale mogą mieć wolniejsze połączenia niż te, które były używane podczas testów. Nie wiesz o tym, ale Twoja witryna zaczyna działać nieprawidłowo, ponieważ Chrome interweniuje document.write() w przypadku wolnych sieci. Możesz też śledzić wycofane lub wkrótce wycofane interfejsy API, których może używać Twoja baza kodu.

Interfejs Reporting API pomaga monitorować wycofane wywołania interfejsu API, naruszenia bezpieczeństwa na stronie i inne kwestie. Raportowanie możesz skonfigurować zgodnie z opisem w artykule Monitorowanie aplikacji internetowej za pomocą interfejsu Reporting API.

Aby wyświetlić raporty wygenerowane przez stronę:

1. Otwórz Narzędzia deweloperskie i kliknij Aplikacja > Usługi działające w tle > Interfejs Reporting API.

   

Karta Interfejs API do raportowania jest podzielona na 3 części:

• Tabela Raporty z tymi informacjami o każdym raporcie:
  • Adres URL, który spowodował wygenerowanie raportu
  • Typ naruszenia
  • Raport Stan
  • Punkt końcowy miejsca docelowego
  • Sygnatura czasowa wygenerowania
  • Zgłoś Body
• Sekcja podglądu Treść raportu. Aby wyświetlić podgląd treści raportu, kliknij go w tabeli raportów.
• Sekcja Punkty końcowe z omówieniem wszystkich punktów końcowych skonfigurowanych w nagłówku Reporting-Endpoints.

Stan raportu

W kolumnie Stan możesz sprawdzić, czy Chrome wysłał raport, czy zamierza go wysłać, czy też nie udało mu się tego zrobić.

Raporty są po pewnym czasie usuwane, niezależnie od tego, czy zostały wysłane.

Kontekst raportu o awariach

Za pomocą interfejsu Reporting API możesz skonfigurować witrynę tak, aby zgłaszała awarie do punktu końcowego serwera crash-reporting lub default. Raport o awarii może zawierać interfejs CrashReportContext, który umożliwia rejestrowanie dowolnych danych związanych z awarią w postaci par klucz-wartość w bieżącym kontekście przeglądania najwyższego poziomu.

Na karcie Aplikacja > Usługi w tle > Interfejs API do raportowania > Kontekst raportu o awarii możesz sprawdzić dane kontekstu awarii i filtrować je według klucza lub wartości na pasku filtra u góry.

Sesje powiązane z urządzeniem

Dane uwierzytelniające sesji powiązane z urządzeniem (DBSC) to interfejs API sieci i protokół między agentami użytkownika a serwerami, który ma zapobiegać kradzieży plików cookie przez umożliwienie agentowi użytkownika potwierdzenia posiadania bezpiecznie przechowywanego klucza prywatnego.

Aby wyświetlić sesje powiązane z urządzeniem, ich definicje i zdarzenia:

1. Otwórz Narzędzia deweloperskie na stronie, która korzysta z DBSC.
2. Kliknij Aplikacja > Usługi w tle > Sesje powiązane z urządzeniem.

3. Na pasku bocznym po lewej stronie rozwiń witrynę, aby wyświetlić aktywne sesje. Wybierz sesję, aby wyświetlić jej definicję.

   

4. W tabeli Wydarzenia rejestrowane są zdarzenia dotyczące DBSC: tworzenie, odświeżanie, weryfikacja i zakończenie. Aby zachować listę zdarzeń podczas nawigacji po stronach, zaznacz check_box Zachowaj dziennik.

5. W tabeli Zdarzenia wybierz zdarzenie, aby wyświetlić jego szczegóły.

6. Jeśli zdarzenie się nie powiedzie, w kolumnie Wynik zobaczysz komunikat Error. Wybierz zdarzenie, które się nie powiodło, aby wyświetlić jego szczegóły, kod błędu odpowiedzi i przyczynę niepowodzenia.

   

Sekcja Sesje powiązane z urządzeniem na pasku bocznym może wyróżniać te problemy:

• Zakończone sesje: w panelu bocznym są oznaczone przekreśleniem i ikoną wyłączonej bazy danych.
• Nieudane zdarzenia: wyróżnione ikoną ostrzeżenia. Element Brak sesji rejestruje nieudane zdarzenia, które były powiązane z witryną, ale nie z znaną sesją.