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

Inizia con il monitoraggio delle prestazioni per il Web

Prima di iniziare

Se non l'hai già fatto, visita Aggiungi Firebase al tuo progetto JavaScript per scoprire come:

  • 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, aggiungere l'SDK e inizializzare Firebase).

Passaggio 1 : aggiungere e inizializzare il monitoraggio delle prestazioni

  1. Se non lo hai già fatto, installa Firebase JS SDK e inizializza Firebase .

  2. Aggiungere Performance Monitoring JS SDK e inizializzare 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();

Passaggio 2 : aggiungi la prima libreria polyfill con ritardo di input

Per misurare la prima metrica del ritardo di input , devi aggiungere la libreria polyfill per questa metrica. Per istruzioni sull'installazione, fare riferimento alla documentazione della libreria .

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

Passaggio 3 : Genera eventi di prestazioni per la visualizzazione iniziale dei dati

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

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

  2. Genera eventi caricando sottopagine 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 dashboard delle prestazioni della console Firebase. Dovresti visualizzare i dati iniziali entro pochi minuti.

    Se non visualizzi i dati iniziali, consulta i suggerimenti per la risoluzione dei problemi .

Passaggio 4 : (facoltativo) visualizzare i messaggi di registro per gli eventi relativi alle prestazioni

  1. Apri gli strumenti per sviluppatori del tuo browser (ad esempio, la scheda Rete per Chrome Dev Tools o in 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 alcuni secondi, cerca una chiamata di rete a firebaselogging.googleapis.com negli strumenti per sviluppatori del tuo browser. La presenza di quella chiamata di rete mostra che il browser sta inviando dati sulle prestazioni a Firebase.

Se la tua app non registra gli eventi relativi alle prestazioni, consulta i suggerimenti per la risoluzione dei problemi .

Passaggio 5 : (facoltativo) aggiungere il monitoraggio personalizzato per codice specifico

Per monitorare i dati sulle prestazioni associati a un codice specifico nella tua app, puoi instrumentare tracce di codice personalizzate .

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 del codice personalizzata è la sua durata, ma puoi anche aggiungere metriche personalizzate, ad esempio riscontri nella cache e avvisi di memoria.

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

Visita Aggiungi monitoraggio per codice specifico per saperne di più su queste funzionalità e su come aggiungerle alla tua app.

Passaggio 6 : distribuisci la tua app, quindi esamina i risultati

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

Puoi monitorare i dati sulle prestazioni nella dashboard Prestazioni della console Firebase.

Prossimi passi