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

Inizia con il monitoraggio delle prestazioni per il web

Prima di iniziare

Se non l'hai già, visitare Aggiungi Firebase al progetto JavaScript per imparare a:

  • Crea un progetto Firebase

  • Registra la tua app web con Firebase

Tieni presente che quando aggiungi Firebase alla tua app, potresti completare alcuni dei passaggi descritti più avanti in questa pagina (ad esempio, aggiungendo l'SDK e inizializzando Firebase).

Passo 1: Aggiungere e inizializzare monitoraggio delle prestazioni

  1. Se non l'hai già, installare l'SDK Firebase JS e inizializzare Firebase .

  2. Aggiungi il Performance Monitoring JS SDK e inizializza Performance Monitoring:

    Versione web 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);
    

    Versione web 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();
    

Fase 2: Aggiungere la libreria ritardo polyfill primo ingresso

Per misurare la prima metrica ritardo di ingresso , è necessario aggiungere la libreria polyfill per questa metrica. Per le istruzioni di installazione, consultare la biblioteca di documentazione .

L'aggiunta di questa libreria polyfill non è necessaria per il monitoraggio delle prestazioni per segnalare le altre metriche dell'app Web.

Fase 3: Generare eventi performativi per la visualizzazione dei dati iniziali

Firebase inizia a elaborare gli eventi quando aggiungi correttamente l'SDK alla tua app. Se stai ancora sviluppando in locale, interagisci con la tua app per generare eventi per la raccolta e l'elaborazione iniziali dei dati.

  1. Servi e visualizza la tua app Web in un ambiente locale.

  2. Genera eventi caricando pagine secondarie per il tuo sito, interagendo con la tua app e/o attivando richieste di rete. Assicurati di tenere aperta la scheda del browser per almeno 10 secondi dopo il caricamento della pagina.

  3. Vai alla performance dashboard della console Firebase. Dovresti vedere la visualizzazione dei dati iniziali entro pochi minuti.

    Se non si vede una visualizzazione dei dati iniziali, rivedere i suggerimenti di risoluzione dei problemi .

Fase 4: (facoltativo) Visualizza i messaggi di log per gli eventi di performance

  1. Aprire gli strumenti di sviluppo del browser (ad esempio, scheda per Chrome Dev Tools Network o nel Network Monitor per Firefox ).

  2. Aggiorna la tua app web nel browser.

  3. Controlla i tuoi messaggi di registro per eventuali messaggi di errore.

  4. Dopo pochi secondi, per cercare una chiamata di rete per firebaselogging.googleapis.com nei tool di sviluppo del browser. La presenza di quella chiamata di rete mostra che il browser sta inviando dati sulle prestazioni a Firebase.

Se l'applicazione non sta registrando eventi di prestazioni, rivedere i suggerimenti di risoluzione dei problemi .

Passo 5: (facoltativo) aggiungere personalizzato monitoraggio di codice specifico

Per monitorare i dati delle prestazioni associati a codice specifico nella vostra applicazione, è possibile strumento tracce di codice personalizzato .

Con una traccia del codice personalizzata, puoi misurare quanto tempo impiega la tua app per completare un'attività specifica o una serie di attività, come il caricamento di una serie di immagini o l'esecuzione di query sul database. La metrica predefinita per una traccia di codice personalizzata è la sua durata, ma puoi anche aggiungere metriche personalizzate, come riscontri nella cache e avvisi di memoria.

Nel codice, definisci l'inizio e la fine di una traccia del codice personalizzato (e aggiungi eventuali metriche personalizzate desiderate) utilizzando l'API fornita dall'SDK di monitoraggio delle prestazioni.

Visita Aggiungi il monitoraggio di codice specifico per saperne di più su queste funzioni e come per aggiungerli alla vostra applicazione.

Passo 6: distribuire l'applicazione poi risultati recensione

Dopo aver convalidato il monitoraggio delle prestazioni, puoi distribuire la versione aggiornata della tua app ai tuoi utenti.

È possibile monitorare i dati sulle prestazioni nella performance dashboard della console Firebase.

Prossimi passi