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:
- Problemas com cookies
- Conteúdo misto
- Problemas de COEP
- Erros do CORS
- Problemas com o modo quirks
- (Prévia) 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 atributo de preenchimento automático
As próximas versões do Chrome serão compatíveis com mais tipos de problemas.
Abrir o painel "Issues"
- Acesse uma página com problemas que precisam ser corrigidos, como samesite-sandbox.glitch.me.
- Abra o DevTools.
Clique no botão Open issues (Abrir problemas) ao lado de 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 , amarelo ou azul .
Você também pode selecionar Problemas no menu Mais ferramentas do .
Ao acessar o painel Problemas, atualize a página para detectar ainda mais problemas, que ocorrem 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 Problemas mostra insights úteis.
Conferir itens no painel "Problemas"
O painel Issues apresenta avisos do navegador de maneira estruturada, agregada e acionável.
Clique em um item no painel Problemas para abrir o erro, conferir as instruções de correção 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 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.
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:
- Erros de página relatados 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 Issues.
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.
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 como este no menu de três pontos ao lado do problema.
Para ver 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 revelar 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:
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.Role a tela para conferir 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.