Depurar serviços em segundo plano

Kayce Basques

Sofia Emelianova

A seção Serviços em segundo plano do Chrome DevTools é uma coleção de ferramentas para as APIs JavaScript que permitem que seu site envie e receba atualizações mesmo quando um usuário não o abre. Um serviço em segundo plano é funcionalmente semelhante a um processo em segundo plano.

A seção Serviços em segundo plano permite depurar os seguintes serviços:

• Busca em segundo plano
• Sincronização em segundo plano
• Notificações
• Carregamentos especulativos
• Mensagens push

O Chrome DevTools pode registrar eventos de busca, sincronização e notificação por três dias, mesmo quando não está aberto. Isso pode ajudar a garantir que os eventos sejam enviados e recebidos conforme o esperado.

Além dos eventos de serviço em segundo plano, o DevTools pode:

• Mostrar relatórios que o Chrome já enviou ou está prestes a enviar usando a API Reporting.
• Permitir que você depure e teste o cache de avanço e retorno com um clique.

Busca em segundo plano

A API Background Fetch permite que um service worker faça o download de recursos grandes, como filmes ou podcasts, de maneira confiável como um serviço em segundo plano. Para registrar eventos de busca em segundo plano por três dias, mesmo quando o DevTools não estiver aberto:

1. Abra o DevTools em uma página usando a API Background Fetch.

2. Navegue até Application > Background services > Background fetch e clique em Record.

   

3. Na página, acione alguma atividade de busca em segundo plano. O DevTools registra os eventos na tabela.

   

4. Clique em um evento para conferir os detalhes dele no espaço abaixo da tabela.

5. Você pode fechar o DevTools e deixar a gravação em execução por até três dias. Para interromper a gravação, clique em Stop.

Sincronização em segundo plano

A API Background Sync permite que um service worker off-line envie dados a um servidor depois que ele restabelecer uma conexão de Internet confiável. Para registrar eventos de sincronização em segundo plano por três dias, mesmo quando o DevTools não estiver aberto:

1. Abra o DevTools, por exemplo, nesta página de demonstração.

2. Navegue até Application > Background services > Background sync e clique em Record.

   

3. Na página de demonstração, clique em Register background sync para registrar o service worker correspondente e clique em Allow quando solicitado.

   Observação: para saber como depurar service workers no DevTools, consulte Service workers.

   O registro do service worker é uma atividade de sincronização em segundo plano. O DevTools registra os eventos na tabela.

   

4. Clique em um evento para conferir os detalhes dele no espaço abaixo da tabela.

5. Você pode fechar o DevTools e deixar a gravação em execução por até três dias. Para interromper a gravação, clique em Stop.

(Experimental) Mitigações de rastreio por redirecionamento

Observação:esse é um recurso experimental disponível na versão 115 do Chrome.

O experimento de mitigações de rastreio por redirecionamento no Chrome permite identificar e excluir o estado de sites que parecem realizar o rastreamento entre sites usando a técnica de rastreamento por redirecionamento. É possível forçar manualmente as mitigações de rastreamento e conferir uma lista de sites cujos estados foram excluídos.

Para forçar as mitigações de rastreamento:

1. Bloqueie cookies de terceiros no Chrome. Navegue até e ative > Configurações > Privacidade e segurança > Cookies e outros dados do site > Bloquear cookies de terceiros.
2. Em chrome://flags, defina o experimento mitigações de rastreio como Enabled With Deletion.
3. Abra o DevTools e navegue até Application > Background services > Mitigações de rastreio de salto.
4. Clique em um link de redirecionamento e aguarde (10 segundos) para que o Chrome registre o redirecionamento. A guia Issues avisa sobre a exclusão de estado.
5. Clique em Force run para excluir o estado imediatamente.

Notificações

Depois que um service worker recebe uma mensagem push de um servidor, o service worker usa a API Notifications para mostrar os dados a um usuário. Para registrar notificações por três dias, mesmo quando o DevTools não estiver aberto:

1. Abra o DevTools.

2. Navegue até Application > Background services > Notifications e clique em Record.

   

3. Clique em Schedule Notification e Allow quando solicitado.

4. Aguarde a notificação aparecer. O DevTools registra os eventos de notificação na tabela.

   

5. Clique em um evento para conferir os detalhes dele no espaço abaixo da tabela.

6. Você pode fechar o DevTools e deixar a gravação em execução por até três dias. Para interromper a gravação, clique em Stop.

Carregamentos especulativos

Os carregamentos especulativos permitem um carregamento de página quase instantâneo com base em regras de especulação definidas por você. Isso permite que seu site pré-busque e pré-renderize a maioria das páginas navegadas.

A busca prévia busca um recurso com antecedência, e a pré-renderização vai além e renderiza a página inteira em um processo de renderização em segundo plano oculto.

É possível depurar carregamentos especulativos na seção Application > Background services > Speculative loads. A seção contém três visualizações:

• Carregamentos especulativos. Contém o status especulativo da página atual, o URL atual, as páginas que a página atual tenta carregar especulativamente e os status delas.
• Regras. Contém os conjuntos de regras na página atual no painel Elements e o status geral das especulações.
• Especulações. Contém uma tabela com informações sobre tentativas de carregamento especulativo e os status delas. Se uma tentativa falhar, clique nela na tabela para conferir informações detalhadas e o motivo da falha.

Tente depurar carregamentos especulativos nesta página de demonstração de pré-renderização:

1. Abra o DevTools na página e navegue até Application > Background services > Speculative loads. Se você não encontrar nenhum carregamento especulativo iniciado pela página, recarregue-a.

   

2. A página inicial da demonstração pré-renderiza duas páginas e não consegue pré-renderizar uma. Clique em View all speculations.

3. Em Speculations, selecione a especulação com o status Failure para conferir o Failure reason na seção com informações detalhadas na parte de baixo.

   

   Nesse caso, a pré-renderização falhou porque não há uma página /next3.html no site.

4. Abra a seção Rules e clique em Status para conferir o conjunto de regras na parte de baixo. Ao clicar no link Rule set , você é direcionado ao painel Elements e mostra onde a regra de especulação está definida.

   

   Dica: não é possível corrigir a regra nessa tela ou no painElements porque o DevTools não mantém mudanças arbitrárias do DOM em carregamentos de página. É necessário corrigir a regra na origem configurando um espaço de trabalho ou simulando a mudança substituindo o conteúdo.

Para um tutorial mais detalhado, consulte Depurar regras de especulação.

Mensagens push

Para mostrar uma notificação push a um usuário, um service worker precisa primeiro usar a API Push Message para receber dados de um servidor. Quando o service worker estiver pronto para mostrar a notificação, ele usará a API Notifications. Para registrar mensagens push por três dias, mesmo quando o DevTools não estiver aberto:

1. Abra o DevTools, por exemplo, nesta página de demonstração.

2. Navegue até Application > Background services > Push Messaging e clique em Record.

   

3. Na página de demonstração, ative Enable push notifications, clique em Allow quando solicitado, digite uma mensagem e envie-a. O DevTools registra eventos de notificação push na tabela.

   

   Observação: além disso, em Application > Service Workers, é possível clicar em Push para enviar notificações de teste do DevTools.

4. Clique em um evento para conferir os detalhes dele no espaço abaixo da tabela.

5. Você pode fechar o DevTools e deixar a gravação em execução por até três dias. Para interromper a gravação, clique em Stop.

API Reporting

Alguns erros acontecem apenas na produção. Eles nunca aparecem localmente ou durante o desenvolvimento porque usuários, redes e dispositivos reais mudam o jogo.

Por exemplo, digamos que seu novo site dependa de um software de terceiros que usa document.write() para carregar scripts críticos. Novos usuários em todo o mundo abrem seu site, mas podem ter conexões mais lentas do que você testou. Sem que você saiba, seu site começa a falhar para eles porque o Chrome intervém contra document.write() em redes lentas. Como alternativa, talvez você queira ficar de olho nas APIs obsoletas ou que serão obsoletas que sua base de código pode estar usando.

A API Reporting foi projetada para ajudar você a monitorar chamadas de API obsoletas, violações de segurança da sua página e muito mais. É possível configurar relatórios conforme descrito em Monitorar seu aplicativo da Web com a API Reporting.

Para conferir os relatórios gerados por uma página:

1. Acesse chrome://flags/#enable-experimental-web-platform-features, defina Experimental Web Platform features como Enabled e reinicie o Chrome.

2. Abra o DevTools e navegue até Application > Background services > API Reporting.

   

A guia API Reporting é dividida em três partes:

• A tabela Reports com as seguintes informações sobre cada relatório:
  • URL que causou a geração do relatório
  • Tipo de violação
  • **Status** do relatório
  • Endpoint de destino
  • Carimbo de data/hora Generated at
  • Corpo do relatório
• A seção de visualização Report body. Para visualizar um corpo de relatório, clique em um relatório na tabela de relatórios.
• A seção Endpoints com uma visão geral de todos os endpoints configurados no cabeçalho Reporting-Endpoints.

Status do relatório

A coluna Status informa se o Chrome enviou o relatório, está prestes a enviá-lo ou falhou.

Status	Descrição
Success	O navegador enviou o relatório e o endpoint respondeu com um código de sucesso (200 ou outro código de resposta de sucesso 2xx).
Pending	O navegador está tentando enviar o relatório.
Queued	O relatório foi gerado e o navegador ainda não está tentando enviá-lo. Um relatório aparece como Queued em um destes dois casos: O relatório é novo e o navegador está aguardando para ver se mais relatórios chegam antes de tentar enviá-lo. O relatório não é novo. O navegador já tentou enviar esse relatório e falhou, e está aguardando antes de tentar novamente.
MarkedForRemoval	Depois de tentar novamente por um tempo (Queued), o navegador parou de tentar enviar o relatório e em breve o removerá da lista de relatórios a serem enviados.

Os relatórios são removidos após um tempo, sejam enviados ou não.

Ponto principal:o status Queued nem sempre é informativo, porque não indica precisamente se o envio falhou ou ainda não foi tentado. O uso de atrasos curtos de relatórios ajuda: um relatório que permanece Queued nesse caso provavelmente indica que o envio está falhando.

Sessões vinculadas ao dispositivo

As credenciais de sessão vinculadas ao dispositivo (DBSC, na sigla em inglês) são uma API da Web e um protocolo entre user agents e servidores que visa impedir o roubo de cookies, permitindo que um user agent declare a posse de uma chave privada armazenada com segurança.

Para conferir as sessões vinculadas ao dispositivo, as definições e os eventos delas:

1. Abra o DevTools em uma página que usa DBSC.
2. Navegue até Application > Background services > Device bound sessions.

3. Na barra lateral à esquerda, expanda um site para conferir as sessões ativas. Selecione uma sessão para conferir a definição dela.

   

4. A tabela Events registra os eventos DBSC: criação, atualização, desafio e encerramento. Para manter a lista de eventos nas navegações de página, marque check_box Preserve log.

5. Na tabela Events, selecione um evento para conferir os detalhes dele.

6. Se um evento falhar, a mensagem Error vai aparecer na coluna Result. Selecione o evento com falha para conferir os detalhes, o código de erro de resposta e a causa da falha.

   

A seção Device bound sessions na barra lateral pode destacar os seguintes problemas:

• Sessões encerradas: indicadas por um ícone de tachado e um ícone de banco de dados desativado na barra lateral.
• Eventos com falha: destacados com um ícone de aviso. O elemento No session captura eventos com falha que foram vinculados a um site, mas não a uma sessão conhecida.