Visão geral do painel do aplicativo

Dale St. Marthe

Use o painel Application para inspecionar, modificar e depurar muitos aspectos do seu app da Web, incluindo manifestos, service workers, armazenamento e dados em cache.

Visão geral

O painel Aplicativo é dividido em quatro seções que contêm submenus. Veja a seguir as seções e os submenus:

Aplicativo: contém informações abrangentes sobre o app, incluindo o manifesto, os service workers e o armazenamento.

• A guia Manifesto apresenta informações de manifest.json de maneira fácil de usar. Ele também exibe erros e avisos, se houver, na seção correspondente.
• A guia Service workers permite inspecionar e depurar service workers emulando eventos de push, atualizando um serviço e muito mais.
• A guia Armazenamento contém um gráfico de pizza que mostra a distribuição da memória usada pelo armazenamento em cache, pelo IndexedDB e pelos service workers. Também é possível limpar os dados do site e simular uma cota de armazenamento personalizada.

Armazenamento: confira e edite os diferentes métodos de armazenamento usados por um app da Web.

• As listas Local e Armazenamento de sessão permitem selecionar uma origem e editar os pares de chave-valor dos métodos de armazenamento associados.
• A lista IndexedDB contém bancos de dados e permite inspecionar armazenamentos de objetos do navegador.
• A lista Cookies permite que você selecione uma origem e edite os pares de chave-valor.
• Com os tokens de estado particular e grupos de interesse, é possível inspecionar os tokens e grupos correspondentes, se houver.
• A lista Armazenamento compartilhado permite selecionar uma origem, além de inspecionar e editar pares de chave-valor associados.
• A lista Armazenamento de cache contém caches disponíveis e permite inspecionar, filtrar e excluir os recursos deles.

Serviços em segundo plano: inspecione, teste e depure serviços em segundo plano.

• A guia Cache de avanço e retorno permite executar testes no cache de avanço e retorno do navegador. Ele também relata problemas que podem estar impedindo o armazenamento em cache de avanço e retorno.
• A guia Busca em segundo plano permite registrar a atividade da API Background Fetch por até três dias.
• A guia Background Sync permite que você registre a atividade da API Background Sync por até três dias.
• A guia Mitigações de rastreamento de rejeição permite identificar e excluir o estado de sites que parecem realizar o rastreamento entre sites usando a técnica de rastreamento de rejeições.
• A guia Notificações permite gravar mensagens push por até três dias.
• A guia Gerenciador de pagamentos permite registrar eventos do gerenciador de pagamentos por até três dias.
• A guia Sincronização periódica em segundo plano permite gravar eventos importantes por até três dias no ciclo de vida periódico da sincronização em segundo plano, como registrar um evento, executar uma sincronização em segundo plano e cancelar registro.
• A guia Carregamentos especulativos permite depurar Carregamentos especulativos. Mostra o status especulativo, os conjuntos de regras e as tentativas de carregamento especulativo.
• A guia Mensagens push permite gravar mensagens push por até três dias e registrá-las.
• A guia API Reporting monitora seu site e informa chamadas de API descontinuadas e violações de segurança.

Frames: divide páginas e recursos em várias visualizações e mostra informações relevantes, como Segurança e isolamento, Política de segurança de conteúdo, disponibilidade da API, entre outras.

Abrir o painel do aplicativo

Para abrir o painel Aplicativo:

1. Abra o DevTools.
2. Abra o menu de comando pressionando:
   • macOS: Command+Shift+P
   • Windows, Linux e ChromeOS: Control + Shift + P
3. Comece a digitar application, selecione Mostrar aplicativo e pressione Enter. O DevTools exibe o painel Application na parte superior da janela do DevTools.

Como alternativa, é possível abrir o painel Application das seguintes maneiras:

• Na barra de ações localizada na parte superior, clique em double_arrow Mais painéis e selecione Aplicativo na lista suspensa.
• No canto superior direito, selecione more_vert Mais opções > Mais ferramentas > Aplicativo.