获取我们在 Firebase 峰会上发布的所有信息,了解 Firebase 可如何帮助您加快应用开发速度并满怀信心地运行应用。了解详情

Comience con Performance Monitoring para web

Antes de que empieces

Si aún no lo ha hecho, visite Agregar Firebase a su proyecto de JavaScript para obtener información sobre cómo:

  • Crear un proyecto de Firebase

  • Registre su aplicación web con Firebase

Tenga en cuenta que cuando agrega Firebase a su aplicación, puede completar algunos de los pasos que se describen más adelante en esta página (por ejemplo, agregar el SDK e inicializar Firebase).

Paso 1 : agregar e inicializar el control del rendimiento

  1. Si aún no lo ha hecho, instale el SDK de Firebase JS e inicialice Firebase .

  2. Agregue el SDK de Performance Monitoring JS e inicialice 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();

Paso 2 : agregue la primera biblioteca de polyfill de retardo de entrada

Para medir la primera métrica de retraso de entrada , debe agregar la biblioteca polyfill para esta métrica. Para obtener instrucciones de instalación, consulte la documentación de la biblioteca.

No es necesario agregar esta biblioteca de polyfill para que Performance Monitoring informe las otras métricas de la aplicación web.

Paso 3 : generar eventos de rendimiento para la visualización inicial de datos

Firebase comienza a procesar los eventos cuando agrega correctamente el SDK a su aplicación. Si todavía está desarrollando localmente, interactúe con su aplicación para generar eventos para la recopilación y el procesamiento de datos iniciales.

  1. Sirva y visualice su aplicación web en un entorno local.

  2. Genere eventos cargando subpáginas para su sitio, interactuando con su aplicación y/o activando solicitudes de red. Asegúrese de mantener abierta la pestaña del navegador durante al menos 10 segundos después de que se cargue la página.

  3. Vaya al panel de rendimiento de la consola de Firebase. Debería ver su pantalla de datos inicial dentro de unos minutos.

    Si no ve una pantalla de sus datos iniciales, revise los consejos para la solución de problemas .

Paso 4 : (Opcional) Ver mensajes de registro para eventos de rendimiento

  1. Abra las herramientas de desarrollo de su navegador (por ejemplo, la pestaña Red para Chrome Dev Tools o en Network Monitor para Firefox ).

  2. Actualice su aplicación web en el navegador.

  3. Verifique sus mensajes de registro para ver si hay mensajes de error.

  4. Después de unos segundos, busque una llamada de red a firebaselogging.googleapis.com en las herramientas para desarrolladores de su navegador. La presencia de esa llamada de red muestra que el navegador está enviando datos de rendimiento a Firebase.

Si su aplicación no registra eventos de rendimiento, consulte los consejos para la solución de problemas .

Paso 5 : (Opcional) Agregar monitoreo personalizado para código específico

Para monitorear los datos de rendimiento asociados con un código específico en su aplicación, puede instrumentar seguimientos de código personalizados .

Con un seguimiento de código personalizado, puede medir cuánto tiempo le toma a su aplicación completar una tarea específica o un conjunto de tareas, como cargar un conjunto de imágenes o consultar su base de datos. La métrica predeterminada para un seguimiento de código personalizado es su duración, pero también puede agregar métricas personalizadas, como aciertos de caché y advertencias de memoria.

En su código, define el principio y el final de un seguimiento de código personalizado (y agrega las métricas personalizadas deseadas) mediante la API proporcionada por el SDK de Performance Monitoring.

Visite Agregar monitoreo para código específico para obtener más información sobre estas funciones y cómo agregarlas a su aplicación.

Paso 6 : implemente su aplicación y luego revise los resultados

Una vez que haya validado el Monitoreo del rendimiento, puede implementar la versión actualizada de su aplicación para sus usuarios.

Puede monitorear los datos de rendimiento en el panel de rendimiento de Firebase console.

Próximos pasos