Avant de commencer
Si vous ne l'avez pas déjà fait, accédez à la page Ajoutez Firebase à votre projet JavaScript pour découvrir comment:
Créer un projet Firebase
Enregistrer votre application Web auprès de Firebase
Notez que lorsque vous ajoutez Firebase à votre application, vous pouvez suivre certaines les étapes décrites plus loin sur cette page (par exemple, ajouter le SDK et initialiser Firebase, par exemple).
Étape 1: Ajoutez et initialisez Performance Monitoring
Si ce n'est pas déjà fait, installez le SDK JS Firebase et initialisez Firebase.
Ajoutez le SDK JS Performance Monitoring et initialisez 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();
Étape 2: Ajouter la première bibliothèque de polyfills de délai d'entrée
Pour mesurer la première métrique de délai d'entrée, vous devez ajouter la bibliothèque polyfill pour cette métrique. Installation reportez-vous aux instructions documentation.
L'ajout de cette bibliothèque de polyfill n'est pas nécessaire pour que Performance Monitoring signale les autres métriques de l'application Web.
Étape 3 : Générez des événements de performances pour l'affichage initial des données
Firebase commence à traiter les événements une fois que vous avez ajouté le SDK à votre l'application. Si vous développez encore en local, interagissez avec votre appli pour générer pour la collecte et le traitement initiaux des données.
<ph type="x-smartling-placeholder">- </ph>
Diffusez et affichez votre application Web dans un environnement local.
générer des événements en chargeant des sous-pages pour votre site, en interagissant avec l'application et/ou le déclenchement de requêtes réseau. Veillez à conserver l'onglet du navigateur s'ouvrent pendant au moins 10 secondes après le chargement de la page.
Accédez au tableau de bord des performances de la console Firebase. Vos données initiales doivent s'afficher dans quelques minutes.
Si vous ne voyez pas vos données initiales, consultez la section conseils.
Étape 4: (Facultatif) Affichez les messages de journal pour les événements liés aux performances
Ouvrez les outils pour les développeurs de votre navigateur (par exemple, Onglet "Network" (Réseau) des outils pour les développeurs Chrome ou dans Moniteur réseau pour Firefox).
Actualisez votre application Web dans le navigateur.
Recherchez d'éventuels messages d'erreur dans les messages de journal.
Au bout de quelques secondes, recherchez un appel réseau
firebaselogging.googleapis.com
dans les outils pour les développeurs de votre navigateur. La la présence de cet appel réseau indique que le navigateur envoie des alertes vers Firebase.
Si votre application n'enregistre pas les événements liés aux performances, consultez le guide de dépannage conseils.
Étape 5 : (Facultatif) Ajouter une surveillance personnalisée pour un code spécifique
Pour surveiller les données de performances associées à un code spécifique dans votre application, vous pouvez : instrumenter des traces de code personnalisés.
Avec une trace de code personnalisée, vous pouvez mesurer le temps nécessaire à l'exécution de votre application une tâche ou un ensemble de tâches spécifique, comme le chargement d'un ensemble d'images ou l'interrogation votre base de données. La métrique par défaut d'une trace de code personnalisé est sa durée, mais vous pouvez également ajouter des métriques personnalisées, telles que des succès de cache et des avertissements concernant la mémoire.
Dans votre code, vous définissez le début et la fin d'une trace de code personnalisé (et ajouter les métriques personnalisées de votre choix) à l'aide de l'API fournie par le SDK Performance Monitoring.
Consultez Ajouter la surveillance d'un code spécifique pour en savoir plus sur ces fonctionnalités et découvrir comment les ajouter à votre application.
Étape 6: Déployer l'application, puis examiner les résultats
Après avoir validé Performance Monitoring, vous pouvez déployer la version mise à jour de votre à vos utilisateurs.
Vous pouvez surveiller les données sur les performances dans la page Performances tableau de bord de la console Firebase.
Étapes suivantes
Familiarisez-vous avec l'atelier de programmation Firebase Performance Monitoring pour le Web.
En savoir plus sur les données collectées automatiquement par Performance Monitoring:
- Données pour le chargement des pages dans votre application
- Données sur les requêtes réseau HTTP/S émises par votre application
Consultez, suivez et filtrez vos données de performances dans la console Firebase
Ajoutez la surveillance de tâches ou de workflows spécifiques dans votre application en Instrumentation de traces de code personnalisées
Filtrer les données sur les performances à l'aide d'attributs