Catch up on everthing we announced at this year's Firebase Summit. Learn more

Zacznij korzystać z funkcji monitorowania wydajności w Internecie

Zanim zaczniesz

Jeśli nie masz jeszcze znaleźć Dodaj Firebase do projektu JavaScript , aby dowiedzieć się, jak:

  • Utwórz projekt Firebase

  • Zarejestruj swoją aplikację internetową w Firebase

Pamiętaj, że po dodaniu Firebase do aplikacji możesz wykonać niektóre czynności opisane w dalszej części tej strony (na przykład dodanie pakietu SDK i zainicjowanie Firebase).

Krok 1: Dodaj i zainicjować Monitorowanie wydajności

  1. Jeśli tego nie zrobiłeś, zainstaluj Firebase JS SDK i zainicjować Firebase .

  2. Dodaj pakiet Performance Monitoring JS SDK i zainicjuj Performance Monitoring:

    Wersja internetowa 9

    import { initializeApp } from "firebase/app";
import { getPerformance } from "firebase/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize Performance Monitoring and get a reference to the service
const perf = getPerformance(app);

    Wersja internetowa 8

    import firebase from "firebase/app";
import "firebase/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Initialize Performance Monitoring and get a reference to the service
const perf = firebase.performance();

Krok 2: Dodaj pierwsze wejście bibliotekę opóźnienie PolyFill

Aby zmierzyć pierwsze opóźnienie wejścia metrykę , trzeba dodać bibliotekę PolyFill na to metryka. Instrukcje instalacji znajdują się biblioteki dokumentacji .

Dodanie tej biblioteki wypełnienia nie jest wymagane, aby funkcja monitorowania wydajności mogła raportować inne metryki aplikacji sieci Web.

Krok 3: Generowanie zdarzeń osiągi początkowym wyświetlaniem danych

Firebase rozpocznie przetwarzanie zdarzeń po pomyślnym dodaniu pakietu SDK do aplikacji. Jeśli nadal programujesz lokalnie, wejdź w interakcję z aplikacją, aby wygenerować zdarzenia do wstępnego gromadzenia i przetwarzania danych.

  1. Udostępniaj i wyświetlaj swoją aplikację internetową w środowisku lokalnym.

  2. Generuj zdarzenia, ładując podstrony Twojej witryny, wchodząc w interakcję z Twoją aplikacją i/lub wywołując żądania sieciowe. Upewnij się, że karta przeglądarki jest otwarta przez co najmniej 10 sekund po załadowaniu strony.

  3. Idź na desce rozdzielczej wydajności konsoli Firebase. Powinieneś zobaczyć swoje początkowe dane w ciągu kilku minut.

    Jeśli nie pojawi się ekran swojego wstępnych danych, przejrzeć wskazówki dotyczące rozwiązywania problemów .

Krok 4: (opcjonalnie) Przeglądanie wiadomości dziennika zdarzeń dla wydajności

  1. Otwórz narzędzia dla programistów w przeglądarce (na przykład, zakładka dla Chrome Dev Narzędzia sieciowe lub w Monitorze sieci dla Firefoksa ).

  2. Odśwież swoją aplikację internetową w przeglądarce.

  3. Sprawdź komunikaty dziennika pod kątem komunikatów o błędach.

  4. Po kilku sekundach, szukać połączenia sieciowego firebaselogging.googleapis.com w dostarczaniu narzędzi programistycznych w Twojej przeglądarce. Obecność tego połączenia sieciowego wskazuje, że przeglądarka wysyła dane o wydajności do Firebase.

Jeśli aplikacja nie jest rejestrowanie zdarzeń z wydajnością, przejrzeć wskazówki dotyczące rozwiązywania problemów .

Krok 5: (opcjonalnie) Dodaj własny monitoring dla kodu specyficznego

Monitorować dane dotyczące wydajności związanych z kodem określonego w swojej aplikacji, MOŻESZ przyrządów kod zwyczaj ślady .

Dzięki niestandardowemu śledzeniu kodu możesz zmierzyć, ile czasu zajmuje Twojej aplikacji wykonanie określonego zadania lub zestawu zadań, takich jak ładowanie zestawu obrazów lub wysyłanie zapytań do bazy danych. Domyślną metryką niestandardowego śledzenia kodu jest jego czas trwania, ale można również dodać niestandardowe metryki, takie jak trafienia w pamięci podręcznej i ostrzeżenia dotyczące pamięci.

W swoim kodzie definiujesz początek i koniec niestandardowego śledzenia kodu (i dodajesz dowolne żądane niestandardowe metryki) za pomocą interfejsu API dostarczanego przez zestaw SDK monitorowania wydajności.

Wizyta Dodaj monitorowania specyficzny kod , aby dowiedzieć się więcej na temat tych funkcji i jak je dodać do swojej aplikacji.

Krok 6: Rozmieszczanie app następnie powodowało

Po sprawdzeniu poprawności monitorowania wydajności możesz wdrożyć zaktualizowaną wersję aplikacji dla użytkowników.

Można monitorować dane dotyczące wydajności w desce rozdzielczej wydajności konsoli Firebase.

Następne kroki