Debugowanie usług w tle

Kayce Basques

Sofia Emelianova

Sekcja Usługi w tle w Narzędziach deweloperskich Chrome to zbiór narzędzi dla interfejsów API JavaScriptu, które umożliwiają witrynie wysyłanie i odbieranie aktualizacji nawet wtedy, gdy użytkownik nie ma jej otwartej. Usługa działająca w tle jest pod względem funkcjonalności podobna do procesu działającego w tle.

W sekcji Usługi w tle możesz debugować te usługi 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. Dzięki temu możesz się upewnić, że zdarzenia są wysyłane i odbierane zgodnie z oczekiwaniami.

Oprócz zdarzeń usługi w tle narzędzia DevTools mogą też:

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

Pobieranie w tle

Interfejs Background Fetch API umożliwia workerowi usługi 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 są zamknięte:

1. Otwórz Narzędzia deweloperskie, na przykład na stronie demonstracyjnej.

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

   

3. Na stronie demonstracyjnej kliknij Zapisz zasoby lokalnie. Spowoduje to aktywność w tle związaną z pobieraniem. Narzędzia deweloperskie rejestrują zdarzenia w tabeli.

   

4. Kliknij zdarzenie, aby wyświetlić jego szczegóły w miejscu poniżej tabeli.

5. Możesz zamknąć Narzędzia deweloperskie i zostawić nagranie do 3 dni. Aby zatrzymać nagrywanie, kliknij  Zatrzymaj.

Synchronizacja w tle

Interfejs Background Sync API umożliwia serwisowi workerowi 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 są zamknięte:

1. Otwórz Narzędzia deweloperskie, na przykład na stronie demonstracyjnej.

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

   

3. Na stronie demonstracyjnej kliknij Zarejestruj synchronizację w tle, aby zarejestrować odpowiedni service worker, a potem, gdy pojawi się taka prośba, kliknij 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 miejscu poniżej tabeli.

5. Możesz zamknąć Narzędzia deweloperskie i zostawić nagranie do 3 dni. Aby zatrzymać nagrywanie, kliknij  Zatrzymaj.

(Eksperymentalnie) Łagodzenie śledzenia przekierowań

Eksperyment Ograniczenie śledzenia powrotów w Chrome umożliwia identyfikowanie i usuwanie stanu witryn, które prawdopodobnie wykonują śledzenie w witrynach za pomocą techniki śledzenia powrotów. Możesz ręcznie wymusić środki zapobiegawcze dotyczące śledzenia 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.
2. W chrome://flags ustaw eksperyment Łagodzenie śledzenia przekierowań na Włączony z usunięciem.
3. Otwórz DevTools, na przykład na stronie demonstracyjnej, i kliknij Aplikacja > Usługi w tle > Zminimalizowanie śledzenia powrotów.
4. Na stronie demonstracyjnej kliknij link do strony odrzucającej i zaczekaj (10 sekund), aż Chrome zarejestruje odrzucenie. Karta Problemy ostrzega o nadchodzącym usunięciu stanu.
5. Aby natychmiast usunąć stan, kliknij Wymuś wykonanie.

Powiadomienia

Gdy usługa w tle otrzyma powiadomienie push od serwera, używa interfejsu Notifications API, aby wyświetlić dane użytkownikowi. Aby rejestrować powiadomienia przez 3 dni, nawet gdy Narzędzia deweloperskie są zamknięte:

1. Otwórz Narzędzia deweloperskie, na przykład na stronie demonstracyjnej.

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

   

3. Na stronie demonstracyjnej kliknij Schedule Notification (Zaplanuj powiadomienie) i kliknij Allow (Zezwól), gdy pojawi się taka prośba.

4. Poczekaj na pojawienie się powiadomienia. Narzędzie DevTools rejestruje zdarzenia powiadomień w tabeli.

   

5. Kliknij zdarzenie, aby wyświetlić jego szczegóły w miejscu poniżej tabeli.

6. Możesz zamknąć Narzędzia deweloperskie i zostawić nagranie do 3 dni. Aby zatrzymać nagrywanie, kliknij  Zatrzymaj.

Ładowanie spekulacyjne

Ładowania spekulacyjne umożliwiają błyskawiczne wczytywanie stron na podstawie zdefiniowanych przez Ciebie reguł spekulacyjnych. Dzięki temu Twoja witryna może pobierać i renderować wstępnie większość stron, do których użytkownicy się przemieszczają.

Wstępny pobieranie pobiera zasób z wyprzedzeniem, a renderowanie wstępne idzie o krok dalej i renderuje całą stronę w ukrytym procesie renderowania w tle.

Debugowanie ładowania spekulacyjnego możesz przeprowadzić 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.
• Plotki. Zawiera tabelę z informacjami o próbach spekulatywnych wczytywania 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:

1. Otwórz DevTools na stronie i kliknij Aplikacja > Usługi w tle > Wstępne wczytywanie. Jeśli nie widzisz żadnych spekulatywnych załadowań zainicjowanych przez stronę, załaduj ją ponownie.

   

2. Strona początkowa w demo wstępnie renderuje 2 strony, a nie jedną. Kliknij Wyświetl wszystkie spekulacje.

3. W sekcji Spory wybierz spór o stanie Niepowodzenie, aby wyświetlić sekcję Przyczyna niepowodzenia z szczegółowymi informacjami u dołu.

   

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

4. Otwórz sekcję Reguły i kliknij Stan, aby wyświetlić u dołu zestaw reguł. Kliknięcie linku Zestaw reguł powoduje otwarcie panelu Elementy, w którym można zobaczyć, gdzie zdefiniowano regułę spekulacji.

   

Szczegółowe instrukcje znajdziesz w artykule Rozwiązywanie problemów z regułami spekulacji.

Komunikaty push

Aby wyświetlić powiadomienie push użytkownikowi, skrypt service worker musi najpierw użyć interfejsu PushMessage API, aby otrzymać dane z serwera. Gdy usługa robocza jest gotowa do wyświetlenia powiadomienia, używa interfejsu Notifications API. Aby rejestrować wiadomości push przez 3 dni, nawet gdy Narzędzia deweloperskie są zamknięte:

1. Otwórz Narzędzia deweloperskie, na przykład na stronie demonstracyjnej.

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

   

3. Na stronie demonstracyjnej kliknij przełącznik Włącz powiadomienia push, a gdy pojawi się prośba, kliknij Zezwól, wpisz wiadomość i wyślij ją. W tabeli DevTools rejestruje się zdarzenia powiadomień push.

   

4. Kliknij zdarzenie, aby wyświetlić jego szczegóły w miejscu poniżej tabeli.

5. Możesz zamknąć Narzędzia deweloperskie i zostawić nagranie do 3 dni. Aby zatrzymać nagrywanie, kliknij  Zatrzymaj.

Interfejs API do raportowania

Niektóre błędy występują tylko w produkcji. Nigdy nie widzisz ich lokalnie ani podczas tworzenia, ponieważ prawdziwi użytkownicy, sieci i urządzenia zmieniają rozgrywkę.

Załóżmy na przykład, że Twoja nowa witryna korzysta z oprogramowania innej firmy, które używa document.write() do wczytywania ważnych skryptów. Nowi użytkownicy z całego świata otwierają Twoją witrynę, ale mogą mieć wolniejsze połączenie niż to, które było testowane. Nie wiedząc o tym, Twoja witryna zaczyna się dla nich psuć, ponieważ Chrome interweniuje w przypadku document.write() na wolnych sieciach. Możesz też zwracać uwagę na wycofane lub wkrótce wycofywane interfejsy API, których używa Twoja baza kodu.

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

Aby wyświetlić raporty wygenerowane przez stronę:

1. Otwórz chrome://flags/#enable-experimental-web-platform-features, ustaw Eksperymentalne funkcje platformy internetowej na Włączone i uruchom ponownie Chrome.

2. Otwórz DevTools i kliknij Aplikacja > Usługi w tle > Interfejs API do raportowania. Możesz na przykład sprawdzić raporty na stronie demonstracyjnej.

   

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

• Tabela Raporty z tymi informacjami o każdym raporcie:
  • URL, który spowodował wygenerowanie raportu
  • Typ naruszenia
  • Raporty stanu
  • Punkt końcowy Destination
  • Wygenerowano o godzinie:
  • Raport Treść
• Sekcja podglądu Treść raportu. Aby wyświetlić podgląd treści raportu, kliknij raport w tabeli raportów.
• sekcję Punkty końcowe z przeglądem wszystkich punktów końcowych skonfigurowanych w nagłówku Reporting-Endpoints.

Stan raportu

Kolumna Stan informuje, czy Chrome wysłało raport, czy jest w trakcie wysyłania raportu, czy też wysłanie się nie powiodło.

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