Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

Comece a usar o Monitoramento de desempenho para a Web

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Antes de você começar

Se ainda não o fez, visite Adicionar Firebase ao seu projeto JavaScript para saber como:

  • Criar um projeto do Firebase

  • Registre seu aplicativo da web com o Firebase

Observe que, ao adicionar o Firebase ao seu aplicativo, você pode concluir algumas das etapas descritas posteriormente nesta página (por exemplo, adicionar o SDK e inicializar o Firebase).

Etapa 1 : adicionar e inicializar o monitoramento de desempenho

  1. Se ainda não o fez, instale o Firebase JS SDK e inicialize o Firebase .

  2. Adicione o Performance Monitoring JS SDK e inicialize o 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();

Etapa 2 : adicionar a primeira biblioteca polyfill de atraso de entrada

Para medir a primeira métrica de atraso de entrada , você precisa adicionar a biblioteca polyfill para essa métrica. Para obter instruções de instalação, consulte a documentação da biblioteca.

A adição dessa biblioteca polyfill não é necessária para que o Monitoramento de desempenho relate as outras métricas de aplicativos da web.

Etapa 3 : Gerar eventos de desempenho para exibição de dados inicial

O Firebase começa a processar os eventos quando você adiciona o SDK ao seu aplicativo. Se você ainda estiver desenvolvendo localmente, interaja com seu aplicativo para gerar eventos para coleta e processamento inicial de dados.

  1. Sirva e exiba seu aplicativo da web em um ambiente local.

  2. Gere eventos carregando subpáginas para seu site, interagindo com seu aplicativo e/ou acionando solicitações de rede. Certifique-se de manter a guia do navegador aberta por pelo menos 10 segundos após o carregamento da página.

  3. Acesse o painel de desempenho do console do Firebase. Você deve ver sua exibição de dados inicial em alguns minutos.

    Se você não vir uma exibição de seus dados iniciais, revise as dicas de solução de problemas.

Etapa 4 : (Opcional) Exibir mensagens de log para eventos de desempenho

  1. Abra as ferramentas de desenvolvedor do seu navegador (por exemplo, guia Network para Chrome Dev Tools ou no Network Monitor para Firefox ).

  2. Atualize seu aplicativo da web no navegador.

  3. Verifique suas mensagens de log para quaisquer mensagens de erro.

  4. Após alguns segundos, procure uma chamada de rede para firebaselogging.googleapis.com nas ferramentas de desenvolvedor do seu navegador. A presença dessa chamada de rede mostra que o navegador está enviando dados de desempenho para o Firebase.

Se seu aplicativo não estiver registrando eventos de desempenho, revise as dicas de solução de problemas.

Etapa 5 : (opcional) adicionar monitoramento personalizado para código específico

Para monitorar os dados de desempenho associados a um código específico em seu aplicativo, você pode instrumentar rastreamentos de código personalizados .

Com um rastreamento de código personalizado, você pode medir quanto tempo seu aplicativo leva para concluir uma tarefa específica ou um conjunto de tarefas, como carregar um conjunto de imagens ou consultar seu banco de dados. A métrica padrão para um rastreamento de código personalizado é sua duração, mas você também pode adicionar métricas personalizadas, como acertos de cache e avisos de memória.

Em seu código, você define o início e o fim de um rastreamento de código personalizado (e adiciona quaisquer métricas personalizadas desejadas) usando a API fornecida pelo SDK de monitoramento de desempenho.

Visite Adicionar monitoramento para código específico para saber mais sobre esses recursos e como adicioná-los ao seu aplicativo.

Etapa 6 : implante seu aplicativo e analise os resultados

Depois de validar o Monitoramento de desempenho, você pode implantar a versão atualizada de seu aplicativo para seus usuários.

Você pode monitorar os dados de desempenho no painel de desempenho do Firebase console.

Próximos passos