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

Bevor Sie beginnen

Wenn Sie es noch nicht getan haben, 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. das Hinzufügen des SDK und das Initialisieren von Firebase).

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 Performance Monitoring:

Modulare Web-API

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-Namespace-API

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 : Fügen Sie die erste Polyfill-Bibliothek für die Eingabeverzögerung 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 für die Leistungsüberwachung nicht erforderlich, um die anderen Web-App-Metriken zu melden.

Schritt 3 : Leistungsereignisse für die erste Datenanzeige generieren

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 erste 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. Stellen Sie sicher, dass der Browser-Tab nach dem Laden der Seite mindestens 10 Sekunden lang geöffnet bleibt.

  3. Gehen Sie zum Performance- Dashboard der Firebase-Konsole. Innerhalb weniger Minuten sollten Sie Ihre erste Datenanzeige sehen.

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

Schritt 4 : (Optional) Protokollmeldungen für Leistungsereignisse anzeigen

  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 Protokollnachrichten auf etwaige Fehlermeldungen.

  4. Suchen Sie nach ein paar Sekunden in den Entwicklertools Ihres Browsers nach einem Netzwerkaufruf an 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 zu überwachen, die einem bestimmten Code in Ihrer App zugeordnet sind, 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. Sie können jedoch auch benutzerdefinierte Metriken hinzufügen, z. B. Cache-Treffer und Speicherwarnungen.

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 bestimmten 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 dann 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