Check out what’s new from Firebase at Google I/O 2022. Learn more

Zacznij korzystać z monitorowania wydajności w Internecie

Zanim zaczniesz

Jeśli jeszcze tego nie zrobiłeś, odwiedź Dodaj Firebase do swojego 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 zainicjuj monitorowanie wydajności

  1. Zainstaluj pakiet Firebase JS SDK i zainicjuj Firebase , jeśli jeszcze tego nie zrobiłeś.

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

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

Web version 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 pierwszą bibliotekę opóźnień wejściowych polyfill

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 wypełnienia nie jest wymagane, aby monitorowanie wydajności raportowało inne metryki aplikacji sieci Web.

Krok 3 : Wygeneruj zdarzenia dotyczące wydajności w celu wstępnego wyświetlenia danych

Firebase rozpocznie przetwarzanie zdarzeń, gdy pomyślnie dodasz pakiet SDK do swojej 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. Przejdź do panelu wydajności konsoli Firebase. Powinieneś zobaczyć swoje początkowe dane w ciągu kilku minut.

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

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

  1. Otwórz narzędzia programistyczne przeglądarki (na przykład kartę Sieć w narzędziach dla programistów Chrome lub Monitor sieci w przeglądarce Firefox ).

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

Jeśli Twoja aplikacja nie rejestruje zdarzeń dotyczących 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 o 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 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 pakiet Performance Monitoring SDK.

Odwiedź Dodaj monitorowanie, aby uzyskać konkretny kod, aby dowiedzieć się więcej o tych funkcjach i sposobach ich dodawania do aplikacji.

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

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

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

Następne kroki