Wprowadzenie do Monitorowania wydajności w internecie

Zanim zaczniesz

Odwiedź stronę Dodaj Firebase do projektu JavaScript, aby dowiedzieć się, jak:

  • Tworzenie projektu Firebase

  • Zarejestruj swoją aplikację internetową w Firebase

Pamiętaj, że dodanie Firebase do aplikacji może wymagać wykonania niektórych czynności opisane poniżej (na przykład dodanie pakietu SDK i zainicjowanie Firebase).

Krok 1. Dodaj i zainicjuj Monitorowanie wydajności

  1. zainstaluj pakiet SDK Firebase JS i zainicjuj Firebase.

  2. 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 zmierzyć dane opóźnienia przy pierwszym działaniu, musisz dodać bibliotekę polyfill na potrzeby tego rodzaju danych. Do montażu znajdziesz w dokumentacja.

Dodanie tej biblioteki polyfill nie jest wymagane, aby Monitorowanie wydajności mogło raportować inne dane. danych aplikacji internetowych.

Krok 3. Wygeneruj zdarzenia dotyczące skuteczności na potrzeby początkowego wyświetlania danych

Firebase rozpocznie przetwarzanie zdarzeń, gdy dodasz pakiet SDK do . Jeśli nadal tworzysz aplikację lokalnie, użyj jej, aby wygenerować zdarzenia do początkowego zbierania i przetwarzania danych.

  1. Udostępnianie i wyświetlanie aplikacji internetowej w środowisku lokalnym.

  2. Generuj zdarzenia, wczytując podstrony witryny, wchodzą w interakcję z lub wywoływania żądań sieciowych. Zachowaj kartę przeglądarki otwarte przez co najmniej 10 sekund po załadowaniu strony.

  3. Otwórz panel Skuteczność. w konsoli Firebase. Początkowe dane powinny się wyświetlić w ciągu za kilka minut.

    Jeśli nie widzisz swoich danych początkowych, zapoznaj się z sekcją dotyczącą rozwiązywania problemów .

Krok 4. (Opcjonalnie) Wyświetl komunikaty z dziennika dotyczące zdarzeń związanych z wydajnością

  1. Otwórz w przeglądarce narzędzia dla programistów (na przykład Karta Network (Sieć) w Narzędziach deweloperskich w Chrome lub w Monitorze sieci w Firefoksie).

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

  3. Sprawdź, czy w komunikatach logu nie ma żadnych komunikatów o błędach.

  4. Po kilku sekundach poszukaj połączenia sieciowego z firebaselogging.googleapis.com w narzędziach dla programistów w przeglądarce. to wywołanie sieciowe wskazuje, że przeglądarka wysyła dane o wydajności do Firebase.

Jeśli aplikacja nie rejestruje zdarzeń związanych z wydajnością, zapoznaj się z informacjami na temat 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: instrumentów niestandardowych logów czasu.

Dzięki niestandardowemu śledzeniu kodu możesz sprawdzić, ile czasu zajmuje uruchomienie aplikacji określonego zadania lub zestawu zadań, np. wczytanie zestawu obrazów lub wysłanie zapytań; w bazie danych. Domyślnym wskaźnikiem niestandardowego śledzenia kodu jest jego czas trwania, ale możesz też dodawać wskaźniki niestandardowe, takie jak trafienia w pamięci podręcznej i ostrzeżenia związane z pamięcią.

W kodzie definiujesz początek i koniec niestandardowego logu czasu (oraz dodaj dowolne wymagane dane niestandardowe) za pomocą interfejsu API dostępnego w pakiecie SDK Performance Monitoring.

Zapoznaj się z artykułem Dodawanie monitorowania dla określonego kodu. , by dowiedzieć się więcej o tych funkcjach i sposobach ich dodawania do aplikacji.

Krok 6. Wdróż aplikację i sprawdź jej wyniki

Po sprawdzeniu poprawności narzędzia Monitorowanie wydajności możesz wdrożyć zaktualizowaną wersję swojego użytkownikom.

Dane o skuteczności możesz sprawdzać na stronie Skuteczność. panel w konsoli Firebase.

Dalsze kroki