Catch up on highlights from Firebase at Google I/O 2023. Learn more

Zacznij korzystać z monitorowania wydajności w Internecie

Zanim zaczniesz

Jeśli jeszcze tego nie zrobiłeś, odwiedź stronę Dodaj Firebase do swojego projektu JavaScript , aby dowiedzieć się, jak:

  • Utwórz projekt Firebase

  • Zarejestruj swoją aplikację internetową w Firebase

Pamiętaj, że dodając Firebase do swojej aplikacji, możesz wykonać niektóre czynności opisane w dalszej części tej strony (na przykład dodać pakiet SDK i zainicjować Firebase).

Krok 1 : Dodaj i zainicjuj monitorowanie wydajności

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

  2. Dodaj zestaw SDK monitorowania wydajności i zainicjuj monitorowanie wydajności:

Modułowy interfejs API sieci Web

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);

Internetowy interfejs API z przestrzenią nazw

import firebase from "firebase/compat/app";
import "firebase/compat/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 pierwszą bibliotekę polyfill opóźnienia wejściowego

Aby zmierzyć pierwszą metrykę opóźnienia wejściowego , musisz dodać bibliotekę polyfill dla tej metryki. Instrukcje dotyczące instalacji znajdują się w dokumentacji biblioteki.

Dodanie tej biblioteki polyfill nie jest wymagane, aby monitorowanie wydajności raportowało inne metryki aplikacji sieci Web.

Krok 3 : Wygeneruj zdarzenia dotyczące wydajności dla początkowego wyświetlenia danych

Firebase rozpocznie przetwarzanie zdarzeń, gdy pomyślnie dodasz pakiet SDK do swojej aplikacji. Jeśli nadal rozwijasz się lokalnie, korzystaj z aplikacji, aby generować zdarzenia do wstępnego gromadzenia i przetwarzania danych.

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

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

  3. Przejdź do pulpitu wydajności konsoli Firebase. Początkowe dane powinny zostać wyświetlone w ciągu kilku minut.

    Jeśli nie widzisz danych początkowych, zapoznaj się ze wskazówkami dotyczącymi rozwiązywania problemów .

Krok 4 : (Opcjonalnie) Wyświetl komunikaty dziennika dotyczące zdarzeń związanych z wydajnością

  1. Otwórz narzędzia programistyczne swojej przeglądarki (na przykład kartę Sieć w Chrome Dev Tools lub Monitor sieci w Firefoksie ).

  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 poszukaj w narzędziach programistycznych przeglądarki połączenia sieciowego firebaselogging.googleapis.com . Obecność tego wywołania sieciowego oznacza, że ​​przeglądarka wysyła dane o wydajności do Firebase.

Jeśli Twoja aplikacja nie rejestruje zdarzeń związanych z wydajnością, zapoznaj się ze wskazówkami dotyczącymi rozwiązywania problemów .

Krok 5 : (Opcjonalnie) Dodaj niestandardowe monitorowanie dla określonego kodu

Aby monitorować dane dotyczące wydajności powiązane z określonym kodem w Twojej aplikacji, możesz instrumentować niestandardowe ślady kodu .

Dzięki niestandardowemu śledzeniu kodu możesz zmierzyć, ile czasu zajmuje aplikacji ukończenie określonego zadania lub zestawu zadań, takich jak załadowanie zestawu obrazów lub wysłanie zapytania do bazy danych. Domyślną metryką dla 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 (oraz dodajesz dowolne niestandardowe metryki) za pomocą interfejsu API udostępnianego przez zestaw SDK do monitorowania wydajności.

Odwiedź Dodaj monitorowanie dla określonego kodu, aby dowiedzieć się więcej o tych funkcjach i jak dodać je do swojej aplikacji.

Krok 6 : Wdróż aplikację, a następnie przejrzyj wyniki

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

Możesz monitorować dane dotyczące wydajności w panelu wydajności konsoli Firebase.

Następne kroki