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 alcune i passaggi descritti più avanti in questa pagina (ad esempio, aggiungere l'SDK e inizializzare Firebase).
Passaggio 1: aggiungi e inizializza Performance Monitoring
Se non l'hai già fatto, installare l'SDK Firebase JS e inizializzare Firebase.
Aggiungi l'SDK JS Performance Monitoring e inizializza Performance Monitoring:
Web
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
import firebase from "firebase/compat/app"; import "firebase/compat/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 per il ritardo di input
Per misurare metrica di First Input Delay, devi aggiungere la libreria di polyfill per questa metrica. Per installazione istruzioni, consulta la sezione documentazione.
Non è necessario aggiungere questa libreria di polyfill per consentire a Performance Monitoring di segnalare l'altro metriche delle app web.
Passaggio 3. Genera eventi relativi al rendimento per la visualizzazione iniziale dei dati
Firebase avvia l'elaborazione degli eventi quando aggiungi correttamente l'SDK al tuo dell'app. Se stai ancora sviluppando localmente, interagisci con la tua app per generare per la raccolta e l'elaborazione iniziali dei dati.
Pubblica e visualizza la tua app web in un ambiente locale.
Genera eventi caricando pagine secondarie per il tuo sito, interagendo con i tuoi dell'app e/o l'attivazione di richieste di rete. Assicurati di mantenere aperta la scheda del browser per almeno 10 secondi dopo il caricamento della pagina.
Vai alla dashboard Rendimento. della console Firebase. Dovresti visualizzare i dati iniziali entro qualche minuto.
Se i dati iniziali non vengono visualizzati, consulta la Risoluzione dei problemi suggerimenti.
Passaggio 4: (facoltativo) visualizza i messaggi di log per gli eventi di prestazioni
Apri gli strumenti per sviluppatori del browser (ad esempio, Scheda Rete per Chrome Dev Tools o in Network Monitor per Firefox).
Aggiorna l'app web nel browser.
Controlla se nei messaggi di log sono presenti messaggi di errore.
Dopo alcuni secondi, cerca una chiamata di rete a
firebaselogging.googleapis.com
negli strumenti per sviluppatori del browser. La presenza di questa chiamata di rete indica che il browser sta inviando i dati sul rendimento a Firebase.
Se la tua app non registra gli eventi relativi alle prestazioni, consulta la risoluzione dei problemi suggerimenti.
Passaggio 5: (facoltativo) Aggiungi un monitoraggio personalizzato per un codice specifico
Per monitorare i dati sul rendimento associati a un codice specifico nella tua app, puoi: tracce di codice personalizzate dello strumento.
Con una traccia di codice personalizzata, puoi misurare il tempo necessario alla tua app per completare un'attività o un insieme di attività specifiche, ad esempio il caricamento di un insieme di immagini o l'esecuzione di query sul tuo database. La metrica predefinita per una traccia di codice personalizzata è la sua durata, ma puoi anche aggiungere metriche personalizzate, come hit della cache e avvisi sulla memoria.
Nel codice definisci l'inizio e la fine di una traccia di codice personalizzata (e aggiungere eventuali metriche personalizzate desiderate) utilizzando l'API fornita dall'SDK Performance Monitoring.
Consulta Aggiungere il monitoraggio per un codice specifico per scoprire di più su queste funzionalità e su come aggiungerle alla tua app.
Passaggio 6: esegui il deployment dell'app ed esamina i risultati
Dopo aver convalidato Performance Monitoring, puoi eseguire il deployment della versione aggiornata del tuo ai tuoi utenti.
Puoi monitorare i dati sul rendimento nella sezione Rendimento dashboard di la console Firebase.
Passaggi successivi
Fai esperienza pratica con Firebase Performance Monitoring per codelab web.
Scopri di più sui dati raccolti automaticamente da Performance Monitoring:
- Dati per il caricamento della pagina nella tua app
- Dati per le richieste di rete HTTP/S fornito dalla tua app
Visualizza, monitora e filtra i tuoi sul rendimento nella console Firebase
Aggiungi il monitoraggio per attività o flussi di lavoro specifici nell'app strumentare tracce di codice personalizzate