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
Se non lo hai già fatto, installa Firebase JS SDK e inizializza Firebase .
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.
Servi e visualizza la tua app Web in un ambiente locale.
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.
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
Apri gli strumenti per sviluppatori del tuo browser (ad esempio, la scheda Rete per Chrome Dev Tools o in Network Monitor per Firefox ).
Aggiorna la tua app web nel browser.
Controlla i tuoi messaggi di registro per eventuali messaggi di errore.
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
Ottieni un'esperienza pratica con Firebase Performance Monitoring per Web Codelab .
Ulteriori informazioni sui dati raccolti automaticamente dal monitoraggio delle prestazioni:
- Dati per il caricamento della pagina nella tua app
- Dati per le richieste di rete HTTP/S emesse dalla tua app
Visualizza, monitora e filtra i dati sulle prestazioni nella console di Firebase
Aggiungi il monitoraggio per attività o flussi di lavoro specifici nella tua app strumentando tracce di codice personalizzate
Utilizza gli attributi per filtrare i dati sulle prestazioni