Zanim zaczniesz
Jeśli jeszcze tego nie zrobiłeś, odwiedź stronę Dodawanie Firebase do 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 też wykonać niektóre czynności opisane na tej stronie (na przykład dodać pakiety SDK Firebase i zainicjować Firebase ).
Krok 1 : Dodaj monitorowanie wydajności i zainicjuj Firebase
Jeśli jeszcze tego nie zrobiłeś, dodaj pakiet SDK do monitorowania wydajności i zainicjuj Firebase w swojej aplikacji, korzystając z jednej z poniższych opcji. Weź pod uwagę następujące kwestie, które pomogą Ci wybrać jedną z opcji (zobacz poszczególne zakładki, aby uzyskać bardziej szczegółowe informacje):
Z CDN (samodzielny pakiet SDK) - jeśli monitorowanie wydajności jest jedynym produktem Firebase w Twojej aplikacji, ta opcja ładuje pojedynczy, lżejszy pakiet SDK z sieci CDN.
Z CDN (standardowy SDK) - jeśli używasz innych produktów Firebase w swojej aplikacji, ta opcja ładuje pakiet SDK do monitorowania wydajności wraz z innymi bibliotekami Firebase z CDN.
Z adresów URL hostingu - jeśli korzystasz z hostingu Firebase, ta opcja zapewnia wygodę zarządzania konfiguracją Firebase podczas inicjowania Firebase.
Korzystanie z pakietów modułów - jeśli używasz pakietu (takiego jak Browserify lub webpack), użyj tej opcji, aby zaimportować poszczególne moduły, gdy ich potrzebujesz.
Po dodaniu pakietu SDK monitorowania wydajności Firebase automatycznie zaczyna zbierać dane dotyczące ładowania strony aplikacji i żądań sieciowych HTTP / S.
Z CDN
Możesz skonfigurować częściowe importowanie pakietu Firebase JavaScript SDK i ładować tylko te biblioteki Firebase, których potrzebujesz. Firebase przechowuje każdą bibliotekę pakietu Firebase JavaScript SDK w naszej globalnej sieci CDN (sieci dostarczania treści).
Aby dołączyć zestaw SDK monitorowania wydajności z sieci CDN, masz dwie opcje:
- samodzielny pakiet SDK - monitorowanie wydajności to jedyny produkt Firebase, którego używasz w swojej aplikacji.
- standardowy pakiet SDK - w swojej aplikacji używasz monitorowania wydajności razem z innymi produktami Firebase.
samodzielny SDK
Jeśli Monitorowanie wydajności jest jedyną usługą Firebase w Twojej aplikacji, użyj samodzielnego pakietu SDK monitorowania wydajności (i zalecanego skryptu nagłówka poniżej), jeśli chcesz:
- zmniejszenie rozmiaru pakietu SDK
- opóźnienie inicjalizacji pakietu SDK do momentu załadowania strony
Aby dołączyć autonomiczny pakiet SDK do monitorowania wydajności w aplikacji i opóźnić jego inicjalizację po załadowaniu strony:
- Dodaj następujący skrypt do nagłówka pliku indeksu.
- Pamiętaj, aby dodać obiekt konfiguracji projektu Firebase do swojej aplikacji.
(function(sa,fbc){function load(f,c){var a=document.createElement('script'); a.async=1;a.src=f;var s=document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(a,s);}load(sa); window.addEventListener('load',function(){firebase.initializeApp(fbc).performance()}); })(performance_standalone, firebaseConfig);
gdzie,
- performance_standalone to
'https://www.gstatic.com/firebasejs/8.4.1/firebase-performance-standalone.js'
- firebaseConfig to obiekt konfiguracyjny Firebase Twojej aplikacji
Powyższy skrypt asynchronicznie ładuje autonomiczny pakiet SDK, a następnie inicjuje Firebase po uruchomieniu zdarzenia onload
okna. Ta taktyka zmniejsza wpływ, jaki SDK może mieć na wskaźniki ładowania strony, ponieważ przeglądarka zgłosiła już swoje wskaźniki ładowania podczas inicjowania pakietu SDK.
standardowy zestaw SDK
Jeśli używasz w swojej aplikacji innych produktów Firebase (takich jak Uwierzytelnianie lub Cloud Firestore, dołącz standardowy pakiet SDK do monitorowania wydajności.
Pamiętaj, że ten pakiet SDK wymaga dołączenia oddzielnego standardowego podstawowego pakietu SDK Firebase oraz zainicjowania Firebase i monitorowania wydajności w osobnym skrypcie.
Aby dołączyć standardowy pakiet SDK do monitorowania wydajności, dodaj następujące skrypty na dole tagu
<body>
, ale przed użyciem jakichkolwiek usług Firebase:<body> <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --> <!-- Firebase App (the core Firebase SDK) is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script> <!-- Add the standard Performance Monitoring library --> <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-performance.js"></script> <body>
Zainicjuj Firebase i monitorowanie wydajności w swojej aplikacji:
<body> <!-- Previously loaded Firebase SDKs --> <script> // TODO: Replace the following with your app's Firebase project configuration var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); // Initialize Performance Monitoring and get a reference to the service var perf = firebase.performance(); </script> </body>
Z adresów URL hostingu
Korzystając z Hostingu Firebase, możesz skonfigurować aplikację tak, aby dynamicznie ładowała biblioteki Firebase JavaScript SDK z zarezerwowanych adresów URL. Dowiedz się więcej o dodawaniu pakietów SDK za pośrednictwem zarezerwowanych adresów URL hostingu .
W przypadku tej opcji konfiguracji po wdrożeniu w Firebase aplikacja automatycznie pobiera obiekt konfiguracyjny Firebase z projektu Firebase, w którym został wdrożony. Możesz wdrożyć tę samą bazę kodu w wielu projektach Firebase, ale nie musisz śledzić konfiguracji Firebase, której używasz dla firebase.initializeApp()
.
Aby dołączyć pakiet SDK do monitorowania wydajności, dodaj następujące skrypty na dole tagu
<body>
, ale przed użyciem jakichkolwiek usług Firebase:<body> <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --> <!-- Firebase App (the core Firebase SDK) is always required and must be listed first --> <script src="/__/firebase/8.4.1/firebase-app.js"></script> <!-- Add the Performance Monitoring library --> <script src="/__/firebase/8.4.1/firebase-performance.js"></script> </body>
Zainicjuj Firebase i monitorowanie wydajności w swojej aplikacji (nie ma potrzeby dołączania obiektu konfiguracyjnego Firebase w przypadku korzystania z zarezerwowanych adresów URL hostingu):
<body> <!-- Previously loaded Firebase SDKs --> <!-- Initialize Firebase --> <script src="/__/firebase/init.js"></script> <!-- Initialize Performance Monitoring and get a reference to the service --> <script> var perf = firebase.performance(); // ... </script> </body>
Korzystanie z pakietu modułów
Możesz skonfigurować częściowe importowanie pakietu Firebase JavaScript SDK i ładować tylko te produkty Firebase, których potrzebujesz. Jeśli używasz pakietu (takiego jak Browserify lub webpack), możesz import
poszczególne produkty Firebase, kiedy ich potrzebujesz.
Zainstaluj pakiet
firebase
npm i zapisz go w plikupackage.json
, uruchamiając:npm install --save firebase
Aby dołączyć pakiet SDK do monitorowania wydajności,
import
moduły Firebase:// Firebase App (the core Firebase SDK) is always required and must be listed first import firebase from "firebase/app"; // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import // import * as firebase from "firebase/app" // Add the Performance Monitoring library import "firebase/performance";
Zainicjuj Firebase i monitorowanie wydajności w swojej aplikacji:
// TODO: Replace the following with your app's Firebase project configuration 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 , należy dodać bibliotekę wypełniaczy dla tej metryki. Instrukcje dotyczące instalacji można znaleźć w dokumentacji biblioteki.
Dodanie tej biblioteki polyfill nie jest wymagane do monitorowania wydajności w celu raportowania innych metryk aplikacji sieci Web.
Krok 3 : Wygeneruj zdarzenia wydajności do początkowego wyświetlenia danych
Firebase rozpocznie przetwarzanie zdarzeń, gdy pomyślnie dodasz pakiet SDK do swojej aplikacji. Jeśli nadal tworzysz lokalnie, korzystaj z aplikacji, aby generować zdarzenia do początkowego gromadzenia i przetwarzania danych.
Udostępniaj i wyświetlaj swoją aplikację internetową w środowisku lokalnym.
Generuj zdarzenia, ładując podstrony swojej witryny, wchodząc w interakcję z Twoją aplikacją i / lub uruchamiając żądania sieciowe. Upewnij się, że karta przeglądarki jest otwarta przez co najmniej 10 sekund po załadowaniu strony.
Przejdź do panelu Wydajność w konsoli Firebase. Pierwsze dane powinny zostać wyświetlone 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ć dla narzędzi deweloperskich przeglądarki Chrome lub Monitor sieci dla przeglądarki 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 dotyczące 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 dotyczące wydajności skojarzone z określonym 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ń, takich jak ładowanie zestawu obrazów lub wysyłanie zapytań do bazy danych. Metryką domyślną dla śledzenia kodu niestandardowego jest jego czas trwania, ale można również dodać metryki niestandardowe, takie jak trafienia w pamięci podręcznej i ostrzeżenia dotyczące pamięci.
W kodzie definiujesz początek i koniec niestandardowego śledzenia kodu (i dodajesz dowolne metryki niestandardowe) za pomocą interfejsu API dostarczonego przez zestaw SDK monitorowania wydajności.
Odwiedź stronę Dodaj monitorowanie dla określonego kodu, aby dowiedzieć się więcej o tych funkcjach i o tym, jak dodać je do swojej aplikacji.
Krok 6 : Wdróż aplikację, a następnie przejrzyj 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ść w konsoli Firebase.
Następne kroki
Zdobądź praktyczne doświadczenie z monitorowaniem wydajności Firebase dla Web Codelab .
Dowiedz się więcej o danych zbieranych automatycznie przez monitorowanie wydajności:
- Dane do wczytywania strony w Twojej aplikacji
- Dane dotyczące żądań sieciowych HTTP / S wysłanych przez Twoją aplikację
Wyświetlaj, śledź i filtruj dane dotyczące wydajności w konsoli Firebase
Dodaj monitorowanie dla określonych zadań lub przepływów pracy w aplikacji poprzez instrumentowanie niestandardowych śladów kodu