Problemas: encontrar e corrigir problemas

Sam Dutton

Sofia Emelianova

Use o painel Problemas para encontrar soluções para problemas detectados pelo navegador, como problemas de cookies e conteúdo misto.

Observação: o painel Problemas continua adicionando suporte a novos tipos de problemas.

Visão geral

Ao coletar e agrupar problemas comuns, o painel Problemas reduz a fadiga de notificações e a poluição visual no Console.

No momento, o painel Problemas informa:

• Problemas com cookies
• Conteúdo misto
• Problemas com COEP
• Erros de CORS
• Problemas no modo quirks
• (Prévia) Problemas de baixo contraste
• Problemas com a Atividade Confiável na Web
• Problemas no carregamento de folhas de estilo
• Regras de CSS @property inválidas
• Violações da política de segurança de conteúdo
• Problemas com o atributo de preenchimento automático

As versões futuras do Chrome vão oferecer suporte a mais tipos de problemas.

Abrir o painel "Problemas"

1. Acesse uma página com problemas para corrigir.
2. Abra o DevTools.

3. Clique no botão Problemas em aberto ao lado de Configurações no canto direito da barra de ações na parte de cima. Dependendo da gravidade do problema, o botão pode ter um ícone vermelho , amarelo ou azul .

   

   Outra opção é selecionar Problemas no menu Mais ferramentas.

   

4. No painel Problemas, atualize a página para detectar ainda mais problemas, desta vez ocorrendo durante o carregamento da página.

   

O console também pode mostrar problemas informados pelo navegador. No entanto, você vai notar que esses problemas (como o aviso de cookie na captura de tela abaixo) são difíceis de entender. Não fica claro o que você precisa fazer para corrigir.

Por outro lado, o painel Problemas oferece insights úteis.

Ver itens no painel "Issues"

O painel Problemas apresenta avisos do navegador de maneira estruturada, agregada e prática.

1. Clique em um item no painel Problemas para abrir o problema e receber orientações sobre como corrigir e encontrar os recursos afetados.

   

   Cada item tem quatro componentes:

   • Um título que descreve o problema.
   • Uma descrição que fornece o contexto e a solução.
   • Uma seção RECURSOS AFETADOS que vincula recursos no contexto apropriado do DevTools, como os painéis Rede, Fontes, Elementos e outros.
   • Links para mais orientações.

2. Clique nos itens em RECURSOS AFETADOS para ver os problemas no contexto.

Agrupar problemas por tipo

Observação:esse é um recurso em pré-lançamento desativado por padrão. Para ativar, marque Configurações > Experimentos > Permitir o agrupamento e o ocultamento de problemas por tipo.

O painel Problemas conta o número de recursos afetados por cada problema e mostra esse número ao lado dos títulos. Além disso, é possível organizar os problemas por gravidade em três tipos de grupos:

• Erros na página informados pelo Chrome.
• Mudanças significativas, como descontinuações.
• Melhorias sugeridas pelo DevTools.

Para agrupar problemas, marque Agrupar por tipo na barra de ações na parte de cima do painel Problemas.

Incluir problemas de terceiros

O painel Problemas mostra problemas com cookies de terceiros por padrão.

Você pode encontrar problemas de cookies de terceiros na seção RECURSOS AFETADOS sem um link.

Para ocultar esses problemas, desmarque Incluir problemas com cookies de terceiros na barra de ações na parte de cima do painel Problemas.

Ocultar problemas

Para ocultar um problema, selecione Ocultar problemas desse tipo no menu de três pontos ao lado dele.

Para ver a lista de problemas ocultos, role a tela para baixo até a seção Problemas ocultos e expanda-a.

Para revelar todos os problemas, clique em Mostrar tudo. Para mostrar um problema específico, selecione Mostrar problemas como este no menu de três pontos ao lado do problema.

Além disso, com o agrupamento ativado, é possível ocultar grupos inteiros de problemas usando o mesmo menu de três pontos ao lado de um grupo.

Conferir problemas no contexto

Para investigar um problema, faça o seguinte:

1. Na seção RECURSOS AFETADOS, clique em um link de recurso para ver o item no contexto apropriado nas DevTools. O link vai levar você ao painel Rede.

   

2. Role a tela para ver o item com um problema. Neste caso, o cookie ck02. Passe o cursor sobre o ícone de informações à direita para ver o problema e como corrigi-lo.