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
Zainstaluj pakiet Firebase JS SDK i zainicjuj Firebase , jeśli jeszcze tego nie zrobiłeś.
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ę wypełniania opóźnień wejściowych
Aby zmierzyć pierwszą metrykę opóźnienia wejściowego , musisz dodać bibliotekę polyfill dla tej metryki. Instrukcje dotyczące instalacji można znaleźć w dokumentacji biblioteki .
Dodanie tej biblioteki wypełnienia nie jest wymagane, aby funkcja monitorowania wydajności mogła raportować inne metryki aplikacji sieci Web.
Krok 3 : Wygeneruj zdarzenia dotyczące wydajności w celu wstępnego wyświetlenia 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.
Udostępniaj i wyświetlaj swoją aplikację internetową w środowisku lokalnym.
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.
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
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 ).
Odśwież swoją aplikację internetową w przeglądarce.
Sprawdź komunikaty dziennika pod kątem komunikatów o błędach.
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 zestaw SDK monitorowania wydajności.
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
Zdobądź praktyczne doświadczenie z Firebase Performance Monitoring for Web Codelab .
Dowiedz się więcej o danych zbieranych automatycznie przez Performance Monitoring:
- Dane do ładowania strony w Twojej aplikacji
- Dane dla żądań sieciowych HTTP/S wysyłanych przez Twoją aplikację
Wyświetlaj, śledź i filtruj dane o wydajności w konsoli Firebase
Dodaj monitorowanie określonych zadań lub przepływów pracy w swojej aplikacji poprzez instrumentację niestandardowych śladów kodu