Zanim zaczniesz
Jeśli jeszcze nie masz tego za sobą, zapoznaj się z artykułem Dodawanie Firebase do projektu JavaScript, aby dowiedzieć się, jak:
Tworzenie projektu Firebase
Zarejestruj swoją aplikację internetową w Firebase
Pamiętaj, że po dodaniu Firebase do aplikacji możesz wykonać niektóre kroki opisane poniżej na tej stronie (np. dodać pakiet SDK i zainicjować Firebase).
Krok 1. Dodaj i zainicjuj Monitorowanie wydajności
Jeśli jeszcze nie masz tego za sobą, zainstaluj pakiet SDK Firebase JS i zainicjuj Firebase.
Dodaj pakiet SDK Performance Monitoring JS i zainicjuj monitorowanie wydajności:
Web
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
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 bibliotekę polyfill na potrzeby pierwszego opóźnienia wejściowego
Aby mierzyć dane opóźnienia przy pierwszym działaniu, musisz dodać do nich bibliotekę polyfill. Instrukcje instalacji znajdziesz w dokumentacji biblioteki.
Dodanie tej biblioteki polyfill nie jest wymagane, aby Monitorowanie wydajności mogło raportować inne dane dotyczące aplikacji internetowej.
Krok 3. Wygeneruj zdarzenia dotyczące skuteczności na potrzeby początkowego wyświetlania danych
Firebase rozpocznie przetwarzanie zdarzeń, gdy dodasz pakiet SDK do aplikacji. Jeśli nadal tworzysz aplikację lokalnie, użyj jej, aby wygenerować zdarzenia do wstępnego zbierania i przetwarzania danych.
Udostępnianie i wyświetlanie aplikacji internetowej w środowisku lokalnym.
Zdarzenia możesz generować przez wczytywanie podstron witryny, interakcję z aplikacją lub wywoływanie żądań sieciowych. Karta przeglądarki musi być otwarta przez co najmniej 10 sekund po załadowaniu strony.
Otwórz panel Skuteczność w konsoli Firebase. Pierwsze dane powinny wyświetlić się w ciągu kilku minut.
Jeśli nie widzisz swoich danych początkowych, przeczytaj wskazówki dotyczące rozwiązywania problemów.
Krok 4. (Opcjonalnie) Wyświetl komunikaty z dziennika dotyczące zdarzeń związanych z wydajnością
Otwórz narzędzia dla programistów w przeglądarce (np. kartę Network (Sieć) w Narzędziach deweloperskich w Chrome lub Network Monitor w Firefoksie).
Odśwież aplikację internetową w przeglądarce.
Sprawdź, czy w komunikatach logu nie ma żadnych komunikatów o błędach.
Po kilku sekundach poszukaj w narzędziach dla programistów w przeglądarce wywołania sieciowego do
firebaselogging.googleapis.com
. Obecność tego wywołania sieci wskazuje, że przeglądarka wysyła dane dotyczące wydajności do Firebase.
Jeśli 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 aplikacji, możesz skorzystać z niestandardowych logów czasu.
Niestandardowy ślad kodu pozwala sprawdzić, ile czasu zajmuje aplikacji wykonanie określonego zadania lub zestawu zadań, takich jak wczytanie zestawu obrazów czy wysłanie zapytania do bazy danych. Domyślnym wskaźnikiem niestandardowego śledzenia kodu jest jego czas trwania, ale możesz też dodać wskaźniki niestandardowe, takie jak trafienia w pamięci podręcznej i ostrzeżenia dotyczące pamięci.
W swoim kodzie definiujesz początek i koniec niestandardowego logu czasu (oraz dodajesz dowolne odpowiednie dane niestandardowe) za pomocą interfejsu API dostępnego w pakiecie SDK Performance Monitoring.
Więcej informacji o tych funkcjach i dodawaniu ich do aplikacji znajdziesz w artykule Dodawanie monitorowania na potrzeby określonego kodu.
Krok 6. Wdróż aplikację i sprawdź jej wyniki
Po sprawdzeniu monitorowania wydajności możesz wdrożyć u użytkowników zaktualizowaną wersję aplikacji.
Dane o skuteczności możesz sprawdzać w panelu Wydajność w konsoli Firebase.
Dalsze kroki
Dowiedz się, jak to zrobić dzięki ćwiczeniom z programowania dotyczącym monitorowania wydajności Firebase w internecie.
Więcej informacji o danych zbieranych automatycznie przez Monitorowanie wydajności:
- dane na temat wczytywania stron w aplikacji,
- Dane o żądaniach sieciowych HTTP/S wysyłanych przez Twoją aplikację
wyświetlać, śledzić i filtrować dane o skuteczności w konsoli Firebase,
Dodaj monitorowanie pod kątem określonych zadań lub przepływów pracy w aplikacji, korzystając z niestandardowych logów czasu