Problemas: encontrar e corrigir problemas

Sofia Emelianova
Sofia Emelianova

O painel Issues no Chrome DevTools reduz o excesso de notificações e a sobrecarga do Console. Use esse recurso para encontrar soluções para problemas detectados pelo navegador, como problemas com cookies e conteúdo misto.

No momento, o painel Issues oferece suporte para:

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

Abra a guia "Problemas".

  1. Acesse uma página com problemas que precisam ser corrigidos, como samesite-sandbox.glitch.me.
  2. Abra o DevTools.
  3. Clique no botão Open issues ao lado de Configurações. Settings 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 Erro., amarelo Aviso. ou azul Informações..

    Botão "Abrir problemas" com um ícone vermelho.

    Você também pode selecionar Issues no menu Mais ferramentas Menu "Mais ferramentas"..

    Guia "Problemas" no menu "Mais ferramentas"

  4. No painel Problemas, atualize a página para detectar ainda mais problemas, que ocorrem durante o carregamento.

    A guia "Problemas" com mais um problema encontrado após atualizar a página.

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

O console com um aviso de cookie obscuro.

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

Ver itens na guia "Problemas"

O painel Issues apresenta avisos do navegador de maneira estruturada, agregada e acionável.

  1. Clique em um item no painel Problemas para abrir a página e conferir orientações sobre como corrigir e encontrar os recursos afetados.

    A guia "Problemas" com um problema de cookies entre sites foi expandida.

    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 de RECURSOS AFETADOS que se vincula a recursos no contexto apropriado do DevTools, como Rede, Fontes, Elementos e outros painéis.
    • Links para mais orientações.
  2. Clique nos itens em RECURSOS AFETADOS para ver os problemas no contexto.

Agrupar problemas por tipo

O painel Problemas contabiliza o número de recursos afetados para cada problema e o exibe ao lado dos títulos. Além disso, você pode organizar os problemas por gravidade em três tipos de grupo:

  • Erro. Erros de página informados pelo Chrome.
  • Aviso. Alterações interruptivas, como descontinuações.
  • Informações. Melhorias sugeridas pelo DevTools.

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

Problemas agrupados em três tipos: erros de página, alterações interruptivas e melhorias.

Incluir problemas de terceiros

Por padrão, a guia "Problemas" mostra os problemas com cookies de terceiros.

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

Cookie de terceiros sem um recurso vinculado na seção "Recursos afetados".

Para ocultar esses problemas, desmarque a opção claro 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 como este no menu de três pontos Menu de três pontos. ao lado dele.

Opção "Ocultar problemas como esta" no menu de três pontos ao lado de um problema.

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

Seção "Problemas ocultos"

Para revelar todos os problemas, clique em Exibir tudo. Para revelar um problema específico, selecione Exibir problemas como este no menu de três pontos 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.

Menu de três pontos com uma opção para ocultar o grupo de melhorias.

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 conferir o item no contexto apropriado no DevTools. Neste exemplo, clique em samesite-sandbox.glitch.me para mostrar os cookies anexados a essa solicitação. O link levará você para o painel Rede.

    Seção "Recursos afetados" com um link para a solicitação afetada

  2. Role para visualizar o item com problema: neste caso, o cookie ck02. Passe o cursor sobre o ícone de informações Informações. à direita para conferir o problema e a correção.

    O painel "Network" mostra uma dica quando você passa o cursor sobre o ícone de informações.