Problemas: encontrar e corrigir problemas

Sam Dutton

Sofia Emelianova

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

Observação: o painel Issues continua disponível para novos tipos de problemas.

Visão geral

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

No momento, o painel Problemas informa:

• Problemas com cookies
• Conteúdo misto
• Problemas de COEP
• Erros de CORS
• Problemas com o modo quirks
• (Visualização) Problemas de baixo contraste
• Problemas confiáveis da Atividade na Web
• Problemas de carregamento da folha de estilo
• Regras CSS @property inválidas
• Violações da Política de Segurança de Conteúdo
• Problemas de atributos de preenchimento automático

As próximas versões do Chrome serão compatíveis com mais tipos de problemas.

Abrir o painel "Problemas"

1. Acesse uma página com problemas para corrigir, como samesite-sandbox.glitch.me.
2. Abra o DevTools.

3. Clique no botão Abrir problemas 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 .

   

   Você também pode selecionar Problemas no menu Mais ferramentas.

   

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

   

O Console também pode mostrar problemas informados pelo navegador. No entanto, esses problemas (como o aviso de cookie na captura de tela abaixo) são difíceis de entender. Não está claro o que você precisa fazer para corrigi-lo.

Por outro lado, o painel Issues mostra insights úteis.

Ver itens no painel "Problemas"

O painel Issues apresenta avisos do navegador de forma estruturada, agregada e útil. de um jeito fácil.

1. Clique em um item no painel Issues para expandi-lo e receber orientações sobre como corrigir e encontrar os recursos afetados.

   

   Cada item tem quatro componentes:

   • Um título descrevendo o problema.
   • Uma descrição que fornece o contexto e a solução.
   • Uma seção de RECURSOS AFETADOS com links para recursos no DevTools adequado contexto, como Rede, Fontes, Elementos e outros painéis.
   • Links para mais orientações.

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

Agrupar problemas por tipo

Observação:esse é um recurso de pré-lançamento desativado por padrão. Para ativá-lo, acesse Configurações > Experimentos > Permitir o agrupamento e a ocultação de problemas por tipo de problema.

O painel Issues conta o número de recursos afetados para cada problema e o mostra ao lado das manchetes. Além disso, é possível organizar os problemas pela gravidade em três tipos de grupo:

• Erros de página informados pelo Chrome.
• Alterações interruptivas, 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.

É possível encontrar problemas de cookies de terceiros na seção RECURSOS AFETADOS sem um link.

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

Ocultar problemas

Para ocultar um problema, selecione Ocultar problemas como este no menu de três pontos ao lado do problema.

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

Para mostrar todos os problemas, clique em Mostrar tudo. Para mostrar um problema específico, selecione Reexibir 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 no DevTools. Neste exemplo, clique em samesite-sandbox.glitch.me para mostrar os cookies anexados à solicitação. O link leva você ao painel Network.

   

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