Google 致力于为黑人社区推动种族平等。查看具体举措

Premiers pas avec la surveillance des performances pour le Web

Avant que tu commences

Si vous avez pas encore, visitez Ajouter Firebase à votre projet JavaScript pour apprendre à:

  • Créer un projet Firebase

  • Enregistrez votre application Web avec Firebase

Notez que lorsque vous ajoutez Firebase à votre application, vous pouvez effectuer certaines des étapes décrites plus loin sur cette page (par exemple, ajouter le SDK et initialiser Firebase).

Étape 1: Ajouter et initialiser la surveillance de la performance

  1. Si vous avez pas déjà, installez le Firebase JS SDK et initialiser Firebase .

  2. Ajoutez le SDK Performance Monitoring JS et initialisez 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();
    

Étape 2: Ajouter la première bibliothèque polyfil de retard d'entrée

Pour mesurer la première mesure de retard d'entrée , vous devez ajouter la bibliothèque polyfil pour cette mesure. Pour obtenir des instructions d'installation, reportez - vous à la bibliothèque de documentation .

L'ajout de cette bibliothèque polyfill n'est pas nécessaire pour que la surveillance des performances rapporte les autres métriques de l'application Web.

Étape 3: Générer des événements de performance pour l' affichage des données initiales

Firebase commence à traiter les événements lorsque vous ajoutez avec succès le SDK à votre application. Si vous développez toujours localement, interagissez avec votre application pour générer des événements pour la collecte et le traitement initiaux des données.

  1. Servez et affichez votre application Web dans un environnement local.

  2. Générez des événements en chargeant des sous-pages pour votre site, en interagissant avec votre application et/ou en déclenchant des requêtes réseau. Assurez-vous de garder l'onglet du navigateur ouvert pendant au moins 10 secondes après le chargement de la page.

  3. Accédez au tableau de bord de performance de la console Firebase. Vous devriez voir vos données initiales s'afficher dans quelques minutes.

    Si vous ne voyez pas un affichage de vos données initiales, consultez les conseils de dépannage .

Étape 4: (Facultatif) Voir les messages du journal d'événements de performance

  1. Ouvrez votre outils de développement du navigateur (par exemple, onglet Réseau pour les outils Chrome Dev ou dans le Moniteur réseau pour Firefox ).

  2. Actualisez votre application Web dans le navigateur.

  3. Vérifiez vos messages de journal pour tout message d'erreur.

  4. Au bout de quelques secondes, cherchez un appel réseau firebaselogging.googleapis.com dans les outils de développement de votre navigateur. La présence de cet appel réseau montre que le navigateur envoie des données de performances à Firebase.

Si votre application n'est pas des événements de performance logging, consultez les conseils de dépannage .

Étape 5: (Facultatif) Ajouter le suivi personnalisé pour le code spécifique

Pour surveiller les données de performance associées à un code spécifique dans votre application, vous pouvez instrumenter des traces de code personnalisé .

Avec une trace de code personnalisée, vous pouvez mesurer le temps qu'il faut à votre application pour effectuer une tâche ou un ensemble de tâches spécifiques, comme le chargement d'un ensemble d'images ou l'interrogation de votre base de données. La métrique par défaut pour une trace de code personnalisé est sa durée, mais vous pouvez également ajouter des métriques personnalisées, telles que les accès au cache et les avertissements de mémoire.

Dans votre code, vous définissez le début et la fin d'une trace de code personnalisé (et ajoutez les métriques personnalisées souhaitées) à l'aide de l'API fournie par le kit de développement logiciel de surveillance des performances.

Visite Ajouter le suivi pour le code spécifique pour en savoir plus sur ces caractéristiques et comment les ajouter à votre application.

Étape 6: Déployer votre application puis des résultats d'examen

Après avoir validé la surveillance des performances, vous pouvez déployer la version mise à jour de votre application pour vos utilisateurs.

Vous pouvez surveiller les données de performance dans le tableau de bord de performance de la console Firebase.

Prochaines étapes