Problemas: encontrar e corrigir problemas

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

No momento, o painel Issues tem suporte para:

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

Abrir o painel "Issues"

  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 (Abrir problemas) ao lado de Configurações. Settings (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 Erro., amarelo Aviso. ou azul Informações..

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

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

    Painel "Problemas" no menu "Mais ferramentas".

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

    O painel "Problemas" com mais um problema encontrado após o recarregamento 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.

O console com um aviso obscuro de cookies.

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

Conferir itens no painel "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 o erro, conferir as instruções de correção e encontrar os recursos afetados.

    O painel "Problemas" com um problema de cookies entre sites está aberto.

    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 vincula a recursos no contexto apropriado do DevTools, como Rede, Origens, 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

O painel Problemas conta o número de recursos afetados para cada problema e o exibe ao lado dos títulos. Além disso, é possível organizar os problemas de acordo com a gravidade em três tipos de grupo:

  • Erro. Erros de página relatados 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 Issues.

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

Incluir problemas de terceiros

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

É possível encontrar problemas com 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 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 Menu de três pontos. de três pontos ao lado do problema.

Opção "Ocultar problemas como essa" 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.

A seção "Problemas ocultos"

Para mostrar todos os problemas, clique em Mostrar tudo. Para revelar um problema específico, selecione Mostrar 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.

O 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 visualizar 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ê ao painel Network.

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

  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 Informações. à direita para ver o problema e como corrigi-lo.

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