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

Caso ainda não tenha feito isso, acesse Adicionar o Firebase ao seu projeto JavaScript para saber como:

  • Criar um projeto do Firebase

  • Registre seu aplicativo da Web no 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 SDK JS do Monitoramento de Desempenho e inicialize o Monitoramento de Desempenho:

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 : adicione 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 do aplicativo 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 de dados iniciais.

  1. Sirva e visualize seu aplicativo 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 Desempenho do console do Firebase. Você deverá ver sua exibição de dados inicial em alguns minutos.

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

Etapa 4 : (opcional) visualizar mensagens de log para eventos de desempenho

  1. Abra as ferramentas de desenvolvedor do seu navegador (por exemplo, guia Rede para Chrome Dev Tools ou no Monitor de rede 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, consulte as dicas de solução de problemas .

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

Para monitorar 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 as métricas personalizadas desejadas) usando a API fornecida pelo SDK do 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 do seu aplicativo para seus usuários.

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

Próximos passos