Debugowanie usług w tle

Sofia Emelianova
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:

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ą:

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 Nagrywaj. Rekord.

    Panel pobierania w tle.

  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.

    Dziennik zdarzeń w panelu pobierania w tle.

  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. 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 Nagrywaj. Rekord.

    Panel synchronizacji w tle.

  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.

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

    Dziennik zdarzeń w panelu synchronizacji w tle.

  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. Zatrzymaj.

(Funkcja eksperymentalna) Łagodzenie śledzenia przekierowań

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 Menu z 3 kropkami. > Ustawienia > Zabezpieczenia. Prywatność i bezpieczeństwo > Pliki cookie i inne dane witryn > Zaznaczono opcję. 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.

Łagodzenie śledzenia przekierowań zawiera informacje o usunięciu stanu.

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 Nagrywaj. Rekord.

    Okienko Powiadomienia.

  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ń.

    Dziennik zdarzeń w okienku Powiadomienia.

  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. 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.

    Adresy URL ładowane spekulacyjnie przez tę stronę, 2 powodzenia i 1 niepowodzenie.

  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.

    Wybrano nieudaną spekulację.

    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.

    Sekcja Reguły z linkiem do zestawu reguł.

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 Nagrywaj. Rejestruj.

    Okienko Wiadomości push.

  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.

    Dziennik zdarzeń w panelu Komunikaty push.

  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. 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.

    Raporty dostępne w interfejsie API do raportowania

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.