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 dla interfejsów API JavaScript, które umożliwiają wysyłanie i odbieranie aktualizacji przez witrynę nawet wtedy, gdy użytkownik jej nie jest. Usługa działająca w tle jest funkcjonalnie podobna do procesu w tle.

Sekcja Usługi w tle umożliwia debugowanie tych usług działających w tle:

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

Narzędzia deweloperskie w Chrome mogą rejestrować zdarzenia pobierania, synchronizacji oraz powiadomień przez 3 dni, nawet jeśli Narzędzia deweloperskie nie są otwarte. Dzięki temu możesz mieć pewność, że zdarzenia są wysyłane i odbierane zgodnie z oczekiwaniami.

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

• Wyświetlanie raportów, które Chrome już wysłał lub ma zamiar wysłać przy użyciu interfejsu API do raportowania.
• Możesz jednym kliknięciem debugować i przetestować pamięć podręczną stanu strony internetowej.

Pobranie w tle

Interfejs Background Fetch API umożliwia skryptowi service worker jako usługę w tle, która może niezawodnie pobierać duże zasoby, takie jak filmy czy podcasty. Aby rejestrować zdarzenia pobierania w tle przez 3 dni, nawet gdy Narzędzia deweloperskie są zamknięte:

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

2. Otwórz Aplikacja > Usługi w tle > Pobieranie w tle i kliknij Rekord.

   

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

   

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

5. Możesz zamknąć Narzędzia deweloperskie i pozostawić nagrywanie przez maksymalnie 3 dni. Aby zakończyć nagrywanie, kliknij Zatrzymaj.

Synchronizacja w tle

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

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

2. Wybierz kolejno Aplikacja > Usługi w tle > Synchronizacja w tle i kliknij Rekord.

   

3. Na stronie demonstracyjnej kliknij Zarejestruj synchronizację w tle, aby zarejestrować odpowiedni skrypt service worker, a następnie kliknij Zezwól, gdy pojawi się odpowiedni komunikat.

   Uwaga: aby dowiedzieć się, jak debugować mechanizmy Service Worker w Narzędziach deweloperskich, zapoznaj się z informacjami na temat skryptów service worker.

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

   

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

5. Możesz zamknąć Narzędzia deweloperskie i pozostawić nagrywanie przez maksymalnie 3 dni. Aby zakończyć nagrywanie, kliknij Zatrzymaj.

(Funkcja eksperymentalna) Łagodzenie śledzenia przekierowań

Uwaga: to eksperymentalna funkcja dostępna w Chrome 115.

Eksperyment łagodzenia śledzenia przekierowań w Chrome pozwala zidentyfikować i usunąć stan witryn, w których przypadku śledzenie w witrynach jest śledzona za pomocą metody śledzenia odrzuceń. Możesz ręcznie wymuszać stosowanie środków łagodzących i wyświetlić listę witryn, których stan został usunięty.

Aby wymusić złagodzenie śledzenia:

1. Blokuj pliki cookie innych firm w Chrome. Kliknij i włącz > Ustawienia > Prywatność i bezpieczeństwo > Pliki cookie i inne dane witryn > Blokuj pliki cookie innych firm.
2. W narzędziu chrome://flags wybierz dla eksperymentu Łagodzenie śledzenia przekierowań na Włączone z usunięciem.
3. Otwórz Narzędzia deweloperskie, np. na stronie demonstracyjnej, i kliknij Aplikacja > Usługi w tle > Łagodzenie śledzenia przekierowań.
4. Na stronie demonstracyjnej kliknij link odsyłania i poczekaj (10 sekund), aż Chrome zarejestruje odbicie. Karta Problemy ostrzega o zbliżającym się usunięciu stanu.
5. Kliknij Wymuś uruchomienie, aby natychmiast usunąć stan.

Powiadomienia

Gdy skrypt service worker odbierze wiadomość push z serwera, spowoduje to wyświetlenie danych użytkownikowi za pomocą interfejsu Powiadomienia API. Aby rejestrować powiadomienia przez 3 dni, nawet gdy Narzędzia deweloperskie nie są otwarte:

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

2. Wybierz Aplikacja > Usługi w tle > Powiadomienia i kliknij Rekord.

   

3. Na stronie demonstracyjnej kliknij Zaplanuj powiadomienie i Zezwól, gdy pojawi się odpowiedni komunikat.

4. Poczekaj na wyświetlenie powiadomienia. Narzędzia deweloperskie rejestrują w tabeli zdarzenia powiadomień.

   

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

6. Możesz zamknąć Narzędzia deweloperskie i pozostawić nagrywanie przez maksymalnie 3 dni. Aby zakończyć nagrywanie, kliknij Zatrzymaj.

Ładowanie spekulacyjne

Ładowanie spekulacyjne umożliwia błyskawiczne wczytywanie strony na podstawie zdefiniowanych przez Ciebie reguł spekulacyjnych. Umożliwi to witrynie wstępne pobieranie i renderowanie większości stron, na które przechodzisz.

Pobieranie z wyprzedzeniem pobiera zasób z wyprzedzeniem, a renderowanie wstępne wykracza poza ten obszar i renderuje całą stronę w ukrytym procesie renderowania w tle.

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

• Ładowanie spekulacyjne. Zawiera informacje o stanie spekulacyjnym bieżącej strony, bieżącym adresie URL, stronach, które bieżąca strona próbuje wczytać 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 wczytywania 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:

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

   

2. Strona początkowa wersji demonstracyjnej wstępnie renderuje 2 strony, ale nie wyrenderuje jednej z nich. Kliknij Wyświetl wszystkie spekulacje.

3. W sekcji Spekulacje wybierz spekulację ze stanem Błąd, aby wyświetlić sekcję Przyczyna niepowodzenia ze szczegółowymi informacjami na dole.

   

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

4. Otwórz sekcję Reguły i kliknij Stan, aby u dołu zobaczyć zestaw reguł. Kliknięcie linku Zestaw reguł spowoduje otwarcie panelu Elementy i pokazanie, gdzie zdefiniowano regułę spekulacji.

   

   Wskazówka: nie możesz poprawić reguły na tym ekranie ani w panelu Elementy, ponieważ Narzędzia deweloperskie nie zachowują arbitralnych zmian DOM podczas wczytywania strony. Musisz naprawić regułę u źródła, konfigurując obszar roboczy, lub naśladować zmianę, zastąpując treść.

Bardziej szczegółowy przewodnik znajdziesz w artykule Debugowanie reguł spekulacyjnych.

Komunikaty push

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

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

2. Wybierz Aplikacja > Usługi w tle > Komunikaty push i kliknij Rejestruj.

   

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

   

   Uwaga: dodatkowo w sekcji Aplikacja > Service Workers możesz kliknąć Push, aby wysłać powiadomienia testowe z Narzędzi deweloperskich.

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

5. Możesz zamknąć Narzędzia deweloperskie i pozostawić nagrywanie przez maksymalnie 3 dni. Aby zakończyć nagrywanie, kliknij Zatrzymaj.

Reporting API

Niektóre błędy występują tylko w wersji produkcyjnej. Nigdy nie zobaczysz ich lokalnie ani w trakcie tworzenia gry, bo rzeczywisty użytkownik, sieci i urządzenia zmieniają grę.

Załóżmy np., że Twoja nowa witryna korzysta z oprogramowania innej firmy, które używa narzędzia document.write() do wczytywania krytycznych skryptów. Nowi użytkownicy z całego świata otwierają Twoją witrynę, ale mogą mieć wolniejsze połączenia niż ten, z którym miała miejsce test. Nieznane dla Ciebie jest to, że Twoja witryna zaczyna nie działać, bo Chrome wchodzi w interakcję z document.write() przy powolnych sieciach. Możesz też zwracać uwagę na wycofywane lub wkrótce wycofane interfejsy API, których może używać Twoja baza kodu.

Interfejs API do raportowania ułatwia monitorowanie wycofanych wywołań interfejsu API, naruszeń zabezpieczeń strony itp. Raportowanie możesz skonfigurować w sposób opisany w artykule Monitorowanie aplikacji internetowej przy użyciu interfejsu API do raportowania.

Aby wyświetlić raporty generowane przez stronę:

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

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

   

Karta Reporting API jest podzielona na 3 części:

• Tabela Raporty zawierająca te informacje o każdym raporcie:
  • URL, który spowodował wygenerowanie raportu
  • Typ naruszenia
  • Stan zgłoszenia
  • Punkt końcowy docelowego
  • Wygenerowano – sygnatura czasowa
  • Zgłoś treść
• Sekcja podglądu Treść raportu. Aby wyświetlić podgląd treści raportu, kliknij go w tabeli raportów.
• Sekcja Punkty końcowe z przeglądem wszystkich punktów końcowych skonfigurowanych w nagłówku Reporting-Endpoints.

Stan raportu

Kolumna Stan informuje, czy raport został wysłany pomyślnie, ma zostać wysłany, czy też nie.

Stan	Opis
Success	Przeglądarka wysłała raport, a punkt końcowy wysłał w odpowiedzi kod powodzenia (200 lub inny kod odpowiedzi powodzenia 2xx).
Pending	Przeglądarka próbuje wysłać raport.
Queued	Raport został wygenerowany, a przeglądarka jeszcze nie próbuje go wysłać. Raport ma postać Queued w jednym z tych 2 przypadków: Raport jest nowy, a przed próbą jego wysłania przeglądarka czeka, aby sprawdzić, czy pojawi się więcej raportów. Raport nie jest nowy. Przeglądarka próbowała już wysłać ten raport, ale zakończyła się niepowodzeniem i czeka, zanim spróbujesz ponownie.
MarkedForRemoval	Po pewnym czasie ponawiania prób (Queued) przeglądarka przestała próbować wysyłać raport i wkrótce usunie go z listy raportów do wysłania.

Raporty są usuwane po pewnym czasie, bez względu na to, czy zostały wysłane.

Ważne: stan Queued nie zawsze dostarcza przydatnych informacji, ponieważ nie wskazuje dokładnie, czy wysyłanie zakończyło się niepowodzeniem, czy też nie podjęto jeszcze próby. Korzystanie z krótkich opóźnień w raportowaniu pomaga: raport, który w tym przypadku pozostaje Queued, prawdopodobnie oznacza błąd wysyłania.