Rozpocznij korzystanie z monitorowania wydajności w Internecie

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

  1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj pakiet SDK Firebase JS i zainicjuj Firebase .

  2. 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.

  1. Udostępniaj i przeglądaj swoją aplikację internetową w środowisku lokalnym.

  2. 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.

  3. 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ą

  1. 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 ).

  2. Odśwież swoją aplikację internetową w przeglądarce.

  3. Sprawdź komunikaty dziennika pod kątem komunikatów o błędach.

  4. 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