Catch up on everthing we announced at this year's Firebase Summit. Learn more

Erste Schritte mit Leistungsüberwachung für das Web

Bevor Sie beginnen

Wenn Sie nicht bereits haben, rufen Sie zu Ihrem JavaScript Projekt hinzufügen Firebase zu lernen , wie man:

  • 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 weiter unten auf dieser Seite beschriebenen Schritte ausführen (z. B. das SDK hinzufügen und Firebase initialisieren).

Schritt 1: Hinzufügen und Performance Monitoring initialisieren

  1. Wenn Sie nicht bereits haben, installieren Sie die Firebase JS SDK und Firebase initialisieren .

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

    Webversion 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);
    

    Webversion 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ögerung polyfill Bibliothek

Um die Messung der ersten Eingangsverzögerung Metrik , müssen Sie die polyfill Bibliothek für diese Metrik hinzuzufügen. Installationsanweisungen finden Sie in der Bibliothek Dokumentation .

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

Schritt 3: Generieren 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. Bereitstellen und Anzeigen Ihrer Web-App in einer lokalen Umgebung.

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

  3. Gehen Sie auf die Performance - Dashboard der Konsole Firebase. Sie sollten innerhalb weniger Minuten Ihre erste Datenanzeige sehen.

    Wenn Sie nicht über eine Anzeige Ihrer ersten Daten, die überprüfen Tipps zur Fehlerbehebung .

Schritt 4: (Optional) Ansicht Log - Meldungen für Performance - Events

  1. Öffnen Sie Ihren Browser-Entwickler - Tools (zB 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 Fehlermeldungen.

  4. Nach ein paar Sekunden, nach einem Netzanruf zu firebaselogging.googleapis.com in Ihrem Browser - Entwickler - Tools. Das Vorhandensein dieses Netzwerkaufrufs zeigt an, dass der Browser Leistungsdaten an Firebase sendet.

Wenn Ihre App nicht Performance - Events anmelden, die überprüfen Tipps zur Fehlerbehebung .

Schritt 5: (Optional) Fügen Sie die Überwachung speziell für spezifischen Code

Leistungsdaten mit spezifischem Code in Ihrer Anwendung verbunden zu überwachen, können Sie Instrument benutzerdefinierten Code Spuren .

Mit einer benutzerdefinierten Codeablaufverfolgung können Sie messen, wie lange Ihre App benötigt, um eine bestimmte Aufgabe oder einen Satz von Aufgaben abzuschließen, z. B. das Laden einer Reihe von Bildern oder das Abfragen Ihrer Datenbank. Die Standardmetrik für einen benutzerdefinierten Codetrace ist die 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 beliebige benutzerdefinierte Metriken hinzu), indem Sie die vom Performance Monitoring SDK bereitgestellte API verwenden.

Besuche hinzu spezifische Code Überwachung mehr über diese Funktionen zu erfahren , und wie sie zu Ihrer Anwendung hinzuzufügen.

Schritt 6: Stellen Sie Ihre App dann als Ergebnis hieraus

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

Sie können Leistungsdaten in der Überwachung der Performance - Dashboard der Konsole Firebase.

Nächste Schritte