Erste Schritte mit der Leistungsüberwachung für das Web

Hinweis

Sehen Sie sich Firebase Ihrem JavaScript-Projekt hinzufügen an, um zu erfahren, wie Sie Folgendes tun:

  • Firebase-Projekt erstellen

  • Web-App bei Firebase registrieren

Wenn Sie Firebase Ihrer App hinzufügen, müssen Sie möglicherweise einige der Schritte ausführen, die weiter unten auf dieser Seite beschrieben werden, z. B. das SDK hinzufügen und Firebase initialisieren.

Schritt 1: Performance Monitoring hinzufügen und initialisieren

  1. Installieren und initialisieren Sie das Firebase JS SDK, falls noch nicht geschehen.

  2. Füge das Performance Monitoring JS SDK hinzu und initialisiere 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();

Schritt 2: Polyfill-Bibliothek für die erste Eingabeverzögerung hinzufügen

Wenn Sie den Messwert „Erstverzögerung der Eingabe“ erfassen möchten, müssen Sie die Polyfill-Bibliothek für diesen Messwert hinzufügen. Eine Installationsanleitung finden Sie in der Dokumentation der Bibliothek.

Das Hinzufügen dieser Polyfill-Bibliothek ist nicht erforderlich, damit Performance Monitoring die anderen Messwerte für Webanwendungen erfasst.

Schritt 3: Leistungsereignisse für die erste Datenanzeige generieren

Firebase beginnt mit der Verarbeitung der Ereignisse, sobald Sie das SDK Ihrer App hinzugefügt haben. Wenn Sie noch lokal entwickeln, interagieren Sie mit Ihrer App, um Ereignisse für die anfängliche Datenerhebung und -verarbeitung zu generieren.

  1. Ihre Webanwendung in einer lokalen Umgebung bereitstellen und aufrufen

  2. Ereignisse werden generiert, wenn Sie Unterseiten Ihrer Website laden, mit Ihrer App interagieren und/oder Netzwerkanfragen auslösen. Lassen Sie den Browsertab nach dem Laden der Seite mindestens 10 Sekunden lang geöffnet.

  3. Rufen Sie in der Firebase-Konsole das Dashboard „Leistung“ auf. Die ersten Daten sollten innerhalb weniger Minuten angezeigt werden.

    Wenn Ihre ursprünglichen Daten nicht angezeigt werden, lesen Sie die Tipps zur Fehlerbehebung.

Schritt 4: Optional: Protokollmeldungen für Leistungsereignisse ansehen

  1. Öffnen Sie die Entwicklertools Ihres Browsers (z. B. den Tab „Netzwerk“ in den Chrome-Entwicklertools oder den Netzwerkmonitor in Firefox).

  2. Aktualisieren Sie die Webanwendung im Browser.

  3. Prüfen Sie die Protokollmeldungen auf Fehler.

  4. Suchen Sie nach einigen Sekunden in den Entwicklertools Ihres Browsers nach einem Netzwerkaufruf an firebaselogging.googleapis.com. Wenn dieser Netzwerkaufruf vorhanden ist, sendet der Browser Leistungsdaten an Firebase.

Wenn in Ihrer App keine Leistungsereignisse protokolliert werden, lesen Sie die Tipps zur Fehlerbehebung.

Schritt 5: (Optional) Benutzerdefinierte Überwachung für bestimmten Code hinzufügen

Wenn Sie Leistungsdaten im Zusammenhang mit bestimmtem Code in Ihrer App erfassen möchten, können Sie benutzerdefinierte Code-Traces instrumentieren.

Mit einem benutzerdefinierten Code-Trace können Sie messen, wie lange es dauert, bis Ihre App eine bestimmte Aufgabe oder eine Gruppe von Aufgaben abgeschlossen hat, z. B. das Laden einer Reihe von Bildern oder das Abfragen Ihrer Datenbank. Der Standardmesswert für einen benutzerdefinierten Code-Trace ist seine Dauer. Sie können aber auch benutzerdefinierte Messwerte wie Cachetreffer und Speicherwarnungen hinzufügen.

In Ihrem Code definieren Sie den Anfang und das Ende eines benutzerdefinierten Code-Traces und fügen mithilfe der vom Performance Monitoring SDK bereitgestellten API beliebige benutzerdefinierte Messwerte hinzu.

Unter Monitoring für bestimmten Code hinzufügen finden Sie weitere Informationen zu diesen Funktionen und dazu, wie Sie sie Ihrer App hinzufügen.

Schritt 6: App bereitstellen und Ergebnisse prüfen

Nachdem Sie Performance Monitoring validiert haben, können Sie die aktualisierte Version Ihrer App für Ihre Nutzer bereitstellen.

Sie können Leistungsdaten im Dashboard „Leistung“ der Firebase-Konsole beobachten.

Nächste Schritte