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 po dodaniu Firebase do swojej aplikacji możesz wykonać niektóre kroki 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 pakiet SDK Firebase JS i zainicjuj Firebase .
Dodaj pakiet SDK JS do monitorowania wydajności i zainicjuj monitorowanie wydajności:
Modułowe API sieciowe
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ę wypełniania opóźnienia wejściowego
Aby zmierzyć pierwszą metrykę opóźnienia wejściowego , musisz dodać bibliotekę Polyfill dla tej metryki. Instrukcje instalacji można znaleźć w dokumentacji biblioteki.
Dodanie tej biblioteki Polyfill nie jest wymagane, aby Monitorowanie wydajności mogło raportować inne metryki aplikacji internetowej.
Krok 3 : Wygeneruj zdarzenia wydajnościowe do początkowego wyświetlenia danych
Firebase rozpoczyna przetwarzanie zdarzeń po pomyślnym dodaniu pakietu SDK do swojej aplikacji. Jeśli nadal rozwijasz się lokalnie, wejdź w interakcję ze swoją aplikacją, aby wygenerować zdarzenia na potrzeby wstępnego gromadzenia i przetwarzania danych.
Udostępniaj i przeglądaj swoją aplikację internetową w środowisku lokalnym.
Generuj zdarzenia, ładując podstrony swojej witryny, wchodząc w interakcję z aplikacją i/lub wyzwalając żądania sieciowe. Pamiętaj, aby po załadowaniu strony karta przeglądarki była otwarta przez co najmniej 10 sekund.
Przejdź do panelu Wydajność konsoli Firebase. Początkowe dane powinny pojawić się 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 w przeglądarce (na przykład kartę Sieć w narzędziach deweloperskich Chrome lub w Monitorze 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 adresem
firebaselogging.googleapis.com
w narzędziach programistycznych przeglądarki. Obecność tego połączenia sieciowego pokazuje, że przeglądarka wysyła dane dotyczące 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 konkretnym kodem w aplikacji, możesz instrumentować niestandardowe ślady kodu .
Dzięki niestandardowemu śledzeniu kodu możesz zmierzyć, ile czasu zajmuje aplikacji wykonanie określonego zadania lub zestawu zadań, np. załadowanie zestawu obrazów lub wykonanie zapytania w bazie danych. Domyślną metryką dla niestandardowego śledzenia kodu jest czas jego 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 niestandardowe metryki) za pomocą interfejsu API udostępnianego przez zestaw SDK do monitorowania wydajności.
Odwiedź stronę Dodaj monitorowanie dla określonego kodu , aby dowiedzieć się więcej o tych funkcjach i sposobie dodawania ich do swojej aplikacji.
Krok 6 : Wdróż aplikację, a następnie sprawdź wyniki
Po sprawdzeniu 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 w konsoli Firebase.
Następne kroki
Zdobądź praktyczne doświadczenie dzięki 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 dotyczące żądań sieciowych HTTP/S wysyłanych przez Twoją aplikację
Przeglądaj, śledź i filtruj dane dotyczące wydajności w konsoli Firebase
Dodaj monitorowanie określonych zadań lub przepływów pracy w swojej aplikacji , opracowując niestandardowe ślady kodu