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
Jeśli jeszcze tego nie zrobiłeś, zainstaluj Firebase JS SDK i zainicjuj Firebase .
Dodaj zestaw SDK monitorowania wydajności i zainicjuj monitorowanie wydajności:
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ę 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.
Udostępniaj i wyświetlaj swoją aplikację internetową w środowisku lokalnym.
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.
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ą
Otwórz narzędzia programistyczne swojej przeglądarki (na przykład kartę Sieć w Chrome Dev Tools lub Monitor sieci w Firefoksie ).
Odśwież swoją aplikację internetową w przeglądarce.
Sprawdź komunikaty dziennika pod kątem komunikatów o błędach.
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
Zdobądź praktyczne doświadczenie w Firebase Performance Monitoring for Web Codelab .
Dowiedz się więcej o danych zbieranych automatycznie przez monitorowanie wydajności:
- Dane do ładowania strony w Twojej aplikacji
- Dane dotyczące żądań sieciowych HTTP/S wysyłanych przez Twoją aplikację
Wyświetlaj, śledź i filtruj dane dotyczące wydajności w konsoli Firebase
Dodaj monitorowanie określonych zadań lub przepływów pracy w aplikacji , instrumentując niestandardowe ślady kodu