Catch up on highlights from Firebase at Google I/O 2023. Learn more

Beginnen Sie mit der Leistungsüberwachung für das Web

Bevor Sie beginnen

Falls noch nicht geschehen, besuchen Sie Firebase zu Ihrem JavaScript-Projekt hinzufügen , um zu erfahren, wie Sie:

  • Erstellen Sie ein Firebase-Projekt

  • Registrieren Sie Ihre Web-App bei Firebase

Beachten Sie, dass Sie beim Hinzufügen von Firebase zu Ihrer App möglicherweise einige der später auf dieser Seite beschriebenen Schritte ausführen (z. B. SDK hinzufügen und Firebase initialisieren).

Schritt 1 : Leistungsüberwachung hinzufügen und initialisieren

  1. Falls noch nicht geschehen, installieren Sie das Firebase JS SDK und initialisieren Sie Firebase .

  2. Fügen Sie das Performance Monitoring JS SDK hinzu und initialisieren Sie das Performance Monitoring:

Web version 9

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 version 8

import firebase from "firebase/app";
import "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
firebase.initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = firebase.performance();

Schritt 2 : Fügen Sie die erste Eingangsverzögerungs-Polyfill-Bibliothek hinzu

Um die erste Eingabeverzögerungsmetrik zu messen, müssen Sie die Polyfill-Bibliothek für diese Metrik hinzufügen. Anweisungen zur Installation finden Sie in der Dokumentation der Bibliothek.

Das Hinzufügen dieser Polyfill-Bibliothek ist nicht erforderlich, damit die Leistungsüberwachung die anderen Web-App-Metriken meldet.

Schritt 3 : Generieren Sie Leistungsereignisse für die anfängliche Datenanzeige

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

  1. Stellen Sie Ihre Web-App in einer lokalen Umgebung bereit und zeigen Sie sie an.

  2. Generieren Sie Ereignisse, indem Sie Unterseiten für Ihre Website laden, mit Ihrer App interagieren und/oder Netzwerkanfragen auslösen. Achten Sie darauf, den Browser-Tab nach dem Laden der Seite mindestens 10 Sekunden lang geöffnet zu lassen.

  3. Gehen Sie zum Leistungs- Dashboard der Firebase-Konsole. Sie sollten Ihre anfängliche Datenanzeige innerhalb weniger Minuten sehen.

    Wenn Ihre Anfangsdaten nicht angezeigt werden, lesen Sie die Tipps zur Fehlerbehebung .

Schritt 4 : (Optional) Zeigen Sie Protokollmeldungen für Leistungsereignisse an

  1. Öffnen Sie die Entwicklertools Ihres Browsers (z. B. die Registerkarte Netzwerk für Chrome Dev Tools oder im Netzwerkmonitor für Firefox ).

  2. Aktualisieren Sie Ihre Web-App im Browser.

  3. Überprüfen Sie Ihre Protokollmeldungen auf Fehlermeldungen.

  4. Suchen Sie nach einigen Sekunden in den Entwicklertools Ihres Browsers nach einem Netzwerkaufruf für firebaselogging.googleapis.com . Das Vorhandensein dieses Netzwerkaufrufs zeigt, dass der Browser Leistungsdaten an Firebase sendet.

Wenn Ihre App keine Leistungsereignisse protokolliert, lesen Sie die Tipps zur Fehlerbehebung .

Schritt 5 : (Optional) Fügen Sie eine benutzerdefinierte Überwachung für bestimmten Code hinzu

Um Leistungsdaten im Zusammenhang mit bestimmtem Code in Ihrer App zu überwachen, können Sie benutzerdefinierte Code-Traces instrumentieren .

Mit einem benutzerdefinierten Code-Trace können Sie messen, wie lange Ihre App benötigt, um eine bestimmte Aufgabe oder eine Reihe von Aufgaben abzuschließen, z. B. das Laden einer Reihe von Bildern oder das Abfragen Ihrer Datenbank. Die Standardmetrik für einen benutzerdefinierten Code-Trace ist seine Dauer, aber Sie können auch benutzerdefinierte Metriken wie Cache-Treffer und Speicherwarnungen hinzufügen.

In Ihrem Code definieren Sie den Anfang und das Ende eines benutzerdefinierten Code-Trace (und fügen alle gewünschten benutzerdefinierten Metriken hinzu), indem Sie die vom Performance Monitoring SDK bereitgestellte API verwenden.

Besuchen Sie Überwachung für spezifischen Code hinzufügen, um mehr über diese Funktionen zu erfahren und wie Sie sie Ihrer App hinzufügen können.

Schritt 6 : Stellen Sie Ihre App bereit und überprüfen Sie die Ergebnisse

Nachdem Sie die Leistungsüberwachung validiert haben, können Sie die aktualisierte Version Ihrer App für Ihre Benutzer bereitstellen.

Sie können Leistungsdaten im Leistungs- Dashboard der Firebase-Konsole überwachen.

Nächste Schritte