Zanim zaczniesz
Jeśli jeszcze tego nie zrobiłeś, zapoznaj się z artykułem Dodawanie Firebase do projektu JavaScript, aby dowiedzieć się, jak:
Tworzenie projektu Firebase
Rejestrowanie aplikacji internetowej w Firebase
Podczas dodawania Firebase do aplikacji możesz wykonać niektóre czynności opisane dalej na tej stronie (np. dodanie pakietu SDK i inicjowanie Firebase).
Krok 1. Dodaj i zainicjuj Performance Monitoring.
Jeśli jeszcze tego nie zrobiono, zainstaluj pakiet SDK Firebase JS i zainicjuj Firebase.
Dodaj pakiet SDK JS Performance Monitoring i inicjuj Performance Monitoring:
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 do obsługi opóźnienia pierwszego wejścia
Aby mierzyć dane o czasie oczekiwania na pierwszy element wejścia, musisz dodać bibliotekę polyfill dla tych danych. Instrukcje instalacji znajdziesz w dokumentacji biblioteki.
Dodanie tej biblioteki polyfill nie jest wymagane, aby Performance Monitoring mogła raportować inne dane o aplikacji internetowej.
Krok 3. Wygeneruj zdarzenia dotyczące skuteczności na potrzeby wyświetlania początkowych danych
Firebase zaczyna przetwarzać zdarzenia, gdy dodasz pakiet SDK do aplikacji. Jeśli nadal tworzysz aplikację lokalnie, generuj zdarzenia, aby umożliwić początkowe gromadzenie i przetwarzanie danych.
wyświetlać aplikację internetową w środowisku lokalnym;
generować zdarzenia przez wczytywanie podstron witryny, interakcję z aplikacją lub wywoływanie żądań sieciowych. Pamiętaj, aby karta przeglądarki była otwarta przez co najmniej 10 sekund po załadowaniu strony.
Otwórz panel Wydajność w konsoli Firebase. Pierwsze dane powinny się wyświetlić w ciągu kilku minut.
Jeśli nie widzisz wyświetlanych danych początkowych, zapoznaj się z wskazówkami dotyczącymi rozwiązywania problemów.
Krok 4. (Opcjonalnie) Wyświetlaj komunikaty dziennikowe dotyczące zdarzeń związanych z wydajnością
Otwórz narzędzia dla deweloperów w przeglądarce (np. kartę Sieć w Narzędziach deweloperskich w Chrome lub Network Monitor w Firefoksie).
Odśwież aplikację internetową w przeglądarce.
Sprawdź, czy w logach nie ma komunikatów o błędach.
Po kilku sekundach w narzędziach dla deweloperów w przeglądarce poszukaj wywołania sieci do
firebaselogging.googleapis.com
. Obecność tego wywołania sieci wskazuje, ż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ę z wskazówkami dotyczącymi rozwiązywania problemów.
Krok 5. (Opcjonalnie) Dodaj niestandardowe monitorowanie określonego kodu
Aby monitorować dane o wydajności powiązane z konkretnym kodem w aplikacji, możesz użyć niestandardowych logów kodu.
Dzięki niestandardowemu śledzeniu kodu możesz mierzyć, ile czasu zajmuje aplikacji wykonanie określonego zadania lub zestawu zadań, np. wczytywanie zestawu obrazów lub zapytanie do bazy danych. Domyślnym rodzajem danych dla śledzenia kodu niestandardowego jest jego czas trwania, ale możesz też dodać niestandardowe dane, takie jak trafienia do pamięci podręcznej i ostrzeżenia dotyczące pamięci.
W kodzie definiujesz początek i koniec niestandardowego logu czasu (oraz dodajesz dowolne niestandardowe dane) za pomocą interfejsu API udostępnianego przez pakiet SDK Performance Monitoring.
Aby dowiedzieć się więcej o tych funkcjach i sposobie ich dodawania do aplikacji, przeczytaj artykuł Dodawanie monitorowania określonego kodu.
Krok 6. Wdróż aplikację, a potem sprawdź wyniki.
Po zweryfikowaniu Performance Monitoring możesz wdrożyć zaktualizowaną wersję aplikacji dla użytkowników.
Dane o skuteczności możesz sprawdzać w panelu Skuteczność w konsoli Firebase.
Dalsze kroki
Zdobądź praktyczne doświadczenie w korzystaniu z Firebase Performance Monitoring w ramach Codelab na temat stron internetowych.
Dowiedz się więcej o danych automatycznie zbieranych przez Performance Monitoring:
- Dane dotyczące wczytywania strony w aplikacji
- Dane dotyczące żądań sieciowych HTTP/S wysyłanych przez Twoją aplikację
Wyświetlanie, śledzenie i filtrowanie danych o skuteczności w konsoli Firebase
Dodaj monitorowanie określonych zadań lub przepływów pracy w aplikacji, za pomocą niestandardowych logów kodu.