A seção Serviços em segundo plano do Chrome DevTools é um conjunto de ferramentas para as APIs JavaScript que permite que seu site envie e receba atualizações mesmo quando um usuário não o tem aberto. 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 em segundo plano:
- 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 o DevTools 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, as DevTools podem:
- Mostrar relatórios que o Chrome já enviou ou está prestes a enviar usando a API Reporting.
- Permite depurar e testar o cache de avanço e retorno com um clique.
Busca em segundo plano
A API Background Fetch permite que um worker de serviço faça o download confiável de recursos grandes, como filmes ou podcasts, 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 está aberto:
- Abra o DevTools, por exemplo, nesta página de demonstração.
Navegue até Aplicativo > Serviços em segundo plano > Busca em segundo plano e clique em
Gravar.
Na página de demonstração, clique em Armazenar recursos localmente. Isso aciona algumas atividades de busca em segundo plano. O DevTools registra os eventos na tabela.
Clique em um evento para conferir os detalhes dele no espaço abaixo da tabela.
Você pode fechar o DevTools e deixar a execução da gravação por até três dias. Para interromper a gravação, clique em
Parar.
Sincronização em segundo plano
A API Background Sync permite que um service worker off-line envie dados para um servidor depois de 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:
- Abra o DevTools, por exemplo, nesta página de demonstração.
Acesse Aplicativo > Serviços em segundo plano > Sincronização em segundo plano e clique em
Gravar.
Na página de demonstração, clique em Registrar sincronização em segundo plano para registrar o respectivo worker de serviço e clique em Permitir quando solicitado.
O registro do worker do serviço é uma atividade de sincronização em segundo plano. O DevTools registra os eventos na tabela.
Clique em um evento para conferir os detalhes dele no espaço abaixo da tabela.
Você pode fechar o DevTools e deixar a execução da gravação por até três dias. Para interromper a gravação, clique em
Parar.
(Experimental) Mitigações de rastreio por redirecionamento
O experimento Mitigations 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 rastreio por redirecionamento. É possível forçar manualmente as mitigações de rastreamento e conferir uma lista de sites que tiveram os estados excluídos.
Para forçar mitigações de rastreamento:
- Bloquear cookies de terceiros no Chrome. Acesse e ative
> Configurações > 
Privacidade e segurança > Cookies e outros dados do site > 
Bloquear cookies de terceiros. - Em
chrome://flags, defina o experimento Mitigações de rastreio por redirecionamento como Ativado com exclusão. - Abra as Ferramentas do desenvolvedor, por exemplo, na página de demonstração e navegue até Application > Background services > Bounce tracking mitigations.
- Na página de demonstração, clique em um link de rejeição e aguarde (10 segundos) para que o Chrome grave a rejeição. A guia Issues avisa sobre a próxima exclusão do estado.
- Clique em Forçar execução para excluir o estado imediatamente.
Notificações
Depois que um service worker recebe uma mensagem push de um servidor, ele usa a API Notifications para mostrar os dados ao usuário. Para registrar notificações por três dias, mesmo quando o DevTools não estiver aberto:
- Abra o DevTools, por exemplo, nesta página de demonstração.
Navegue até Aplicativo > Serviços em segundo plano > Notificações e clique em
Gravar.
Na página de demonstração, clique em Programar notificação e Permitir quando solicitado.
Aguarde a notificação aparecer. As ferramentas do desenvolvedor registram os eventos de notificação na tabela.
Clique em um evento para conferir os detalhes dele no espaço abaixo da tabela.
Você pode fechar o DevTools e deixar a execução da gravação por até três dias. Para interromper a gravação, clique em
Parar.
Cargas especulativas
Os carregamentos especulativos permitem um carregamento de página quase instantâneo com base em regras de especulação que você define. Isso permite que o site faça o pré-carregamento e a pré-renderização da maioria das páginas acessadas.
A pré-busca 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 cargas especulativas 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 Elementos e o status geral das especulações.
- Especulação. Contém uma tabela com informações sobre tentativas de carregamento especulativo e os respectivos status. Se uma tentativa falhar, clique nela na tabela para conferir informações detalhadas e o motivo da falha.
Tente depurar cargas especulativas nesta página de demonstração:
Abra as Ferramentas do desenvolvedor na página e navegue até Application > Background services > Speculative loads. Se não houver nenhum carregamento especulativo iniciado pela página, atualize-a.
A página inicial da demonstração pré-renderiza duas páginas e falha em pré-renderizar uma. Clique em Conferir todas as especulações.
Em Especulação, selecione a especulação com o status Falha para ver o Motivo da falha 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.htmlno site.Abra a seção Regras e clique em Status para conferir o conjunto de regras na parte de baixo. Ao clicar no link Rule set, você vai para o painel Elements e descobre onde a regra de especulação foi definida.
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 está pronto para mostrar a notificação, ele usa a API Notifications. Para registrar mensagens push por três dias, mesmo quando o DevTools não está aberto:
- Abra o DevTools, por exemplo, nesta página de demonstração.
Navegue até Aplicativo > Serviços em segundo plano > Mensagens push e clique em
Gravar.
Na página de demonstração, ative a opção Ativar notificações push, clique em Permitir quando solicitado, digite uma mensagem e a envie. Os registros do DevTools enviam eventos de notificação para a tabela.
Clique em um evento para conferir os detalhes dele no espaço abaixo da tabela.
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
Parar.
API Reporting
Alguns erros acontecem apenas na produção. Você nunca as vê 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 essenciais. Novos usuários em todo o mundo acessam seu site, mas talvez eles tenham conexões mais lentas do que as 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, fique de olho nas APIs descontinuadas ou que serão descontinuadas em breve que sua base de código pode estar usando.
A API Reporting foi criada para ajudar você a monitorar chamadas de API descontinuadas, 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:
- Acesse
chrome://flags/#enable-experimental-web-platform-features, defina Recursos experimentais da plataforma da Web como Ativado e reinicie o Chrome. Abra as Ferramentas do desenvolvedor e navegue até Application > Background services > API Reporting. Por exemplo, você pode conferir relatórios nesta página de demonstração.
A guia API Reporting é dividida em três partes:
- A tabela Relatórios com as seguintes informações em cada relatório:
- URL que causou a geração do relatório
- Tipo de violação
- Relatório Status
- Endpoint de destino
- Carimbo de data/hora Generated at
- Corpo do relatório
- A seção de visualização do Corpo do relatório. Para conferir 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 com sucesso, se está prestes a enviar ou se houve uma falha.
| 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:
|
MarkedForRemoval |
Depois de tentar por um tempo (Queued), o navegador para de tentar enviar o relatório e o remove da lista de relatórios a serem enviados. |
Os relatórios são removidos após algum tempo, mesmo que sejam enviados.