Check out what’s new from Firebase at Google I/O 2022. 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. Aggiungi l'SDK JS di monitoraggio delle prestazioni e inizializza il monitoraggio delle prestazioni:

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 di polyfill del ritardo di input

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

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

Passaggio 3 : generare 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 dei dati iniziali.

  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 vedere i tuoi dati iniziali visualizzati entro pochi minuti.

    Se non vedi una visualizzazione dei tuoi 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 di sviluppo del tuo browser (ad esempio, scheda Rete per Chrome Dev Tools o in Network Monitor per Firefox ).

  2. Aggiorna la tua app web nel browser.

  3. Controlla i 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 i 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) aggiungi il monitoraggio personalizzato per codice specifico

Per monitorare i dati sulle prestazioni associati a codice specifico nella tua app, puoi strumentare 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 di codice personalizzata è la sua durata, ma puoi anche aggiungere metriche personalizzate, come hit cache e avvisi di memoria.

Nel 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 ulteriori informazioni su queste funzionalità e su come aggiungerle alla tua app.

Passaggio 6 : distribuisci la tua app, quindi rivedi 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 delle prestazioni della console Firebase.

Prossimi passi