Encontrar e corrigir problemas usando a ferramenta Problemas

A ferramenta Problemas analisa automaticamente a página da Web atual, relata problemas agrupados por tipo e fornece documentação para ajudar a explicar e resolver os problemas.

A ferramenta Problemas fornece comentários nas seguintes categorias:

• da Microsoft.
• Compatibilidade entre navegadores.
• do Desempenho.
• Aplicativos Web progressivos.
• Segurança.
• Outros.

Os comentários na ferramenta Issues são fornecidos por várias fontes, incluindo a plataforma Chromium, o Deque axe e os dados de compatibilidade do navegador MDN. Para obter informações sobre essas fontes de comentários que preenchem a ferramenta Problemas , consulte:

• Visão geral das Ferramentas do Axe
• browser-compat-data repo

Vídeo: Problemas avançados de filtragem no Edge DevTools e VSCode

Abrindo a ferramenta Problemas

1. Acesse uma página da Web que contenha problemas a serem corrigidos. Por exemplo, abra a página de demonstração de teste de acessibilidade em uma nova guia ou janela.

2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar. O DevTools é aberto.

3. Na barra de ferramentas de Visualização Rápida na parte inferior do DevTools, selecione a guia Issues , que está presente por padrão.

   Se o painel Visualização Rápida não for exibido, selecione Personalizar e controlar o DevTools(...) e, em seguida, selecione Alternar painel de Visualização Rápida (Esc). Se a barra de ferramentas Visualização rápida não tiver a guia Problemas , na barra de ferramentas Visualização rápida , clique no botão Mais ferramentas (+) e selecione Problemas.

   A ferramenta Problemas agrupa problemas em categorias, como Acessibilidade, Desempenho, Segurança e Outros:

   

Outras maneiras de abrir a ferramenta Problemas

• Na Barra de Atividades ou na barra de ferramentas Visualização Rápida , clique no botão Mais ferramentas (+) e selecione Problemas.

• Na ferramenta Elementos , na árvore DOM, localize um nome de elemento sublinhado ondulado, pressione e segure Shift e clique no elemento. Ou clique com o botão direito do mouse em um elemento sublinhado ondulado e selecione Exibir problemas. Veja Problemas abertos na árvore DOM, abaixo.

Ferramenta de posicionamento de problemas: Visualização rápida ou Barra de atividades

Por padrão, como no Menu de Comando, a ferramenta Problemas é aberta no painel Visualização Rápida . Em vez disso, você pode abri-lo na Barra de Atividades ou movê-lo para a Barra de Atividades:

• Na barra de ferramentas Visualização Rápida , clique com o botão direito do mouse na guia Inspecionar e selecione Mover para a Barra de Atividades superior.

Os problemas são ordenados automaticamente por severidade

Dentro de cada categoria de problemas, primeiro os erros são listados, depois os avisos e, em seguida, as dicas:

A lista suspensa Severidade controla se os itens Avisos, Erros, Dicas e Informações são listados. Consulte Filtrar problemas por gravidade abaixo.

Expandir entradas na ferramenta Problemas

A ferramenta Issues apresenta documentação adicional e correções recomendadas para aplicar a cada problema. Para expandir um problema para obter essas informações adicionais:

1. Abra uma página da Web e a ferramenta Problemas , conforme descrito acima.

2. Selecione um problema. O problema se expande para mostrar detalhes:

   

Cada problema exibido tem os seguintes componentes:

• Um título descrevendo o problema.

• Uma descrição fornecendo mais contexto e soluções propostas.

• Uma seção RECURSOS AFETADOS vinculada a recursos no DevTools, como a ferramenta Elementos, Fontes ou Rede .

• Links para documentação adicional.

Exibir problemas no contexto de uma ferramenta associada

Um problema na ferramenta Problemas pode incluir um ou mais links que abrem ferramentas diferentes, como a ferramenta Elementos, Fontes ou Rede . Você pode abrir uma dessas ferramentas para executar etapas adicionais de solução de problemas.

Para abrir uma ferramenta vinculada a partir de uma entrada na ferramenta Problemas :

1. Conforme descrito acima, abra uma página da Web, abra DevTools, selecione a ferramenta Issues e expanda um problema.

2. Na seção RECURSOS AFETADOS , em um link Abrir em , clique no nome da ferramenta, como Rede:

   

   O recurso afetado é exibido na ferramenta indicada.

Problemas em aberto na árvore DOM

Se um elemento tiver um problema associado, a árvore DOM na ferramenta Elementos mostrará um sublinhado ondulado sob o nome do elemento. Clique com o botão direito do mouse no elemento e selecione Exibir problemas. Ou mantenha pressionada a tecla Shift e clique no elemento com o sublinhado ondulado.

Para exibir um problema para elementos com sublinhados ondulados na árvore DOM:

1. Abra uma página da Web. Por exemplo, abra a página da Web de demonstração de teste de acessibilidade em uma nova janela ou guia.

2. Clique com o botão direito do mouse em qualquer lugar da página da Web e selecione Inspecionar. Ou pressione F12. O DevTools é aberto ao lado da página da Web.

3. No DevTools, selecione a guia Elementos ().

4. Na árvore DOM, expanda <body><main>><article id="cats"><section><img>>>>. A <img> tag inicial do elemento tem um sublinhado ondulado:

   

5. Passe o mouse sobre a tag inicial do <img> elemento. Uma dica de ferramenta exibe informações sobre o problema.

6. Clique com o botão direito do mouse no <img> elemento e selecione Exibir problemas. Ou mantenha pressionada a tecla Shift e clique no elemento. A ferramenta Problemas é aberta e exibe os problemas associados a esse elemento:

   

Filtrar problemas

Para reduzir o número de problemas exibidos na ferramenta Problemas , você pode filtrar a lista por gravidade, navegador e origem.

Filtrar problemas por severidade

Por padrão, somente erros e avisos são exibidos. Para exibir problemas que têm outros níveis de gravidade:

• Na lista suspensa Gravidade , selecione qualquer número de níveis de gravidade: Dicas, informações, avisos ou erros:

Para reverter para voltar a mostrar apenas avisos e erros, selecione Níveis padrão.

Filtrar problemas por navegador

Os problemas que pertencem à categoria Compatibilidade também podem ser filtrados pelo navegador. Por padrão, os seguintes navegadores são testados:

• Edge
• Chrome
• Firefox
• Safari
• Safari iOS
• Chrome para Android
• Firefox para Android

Para alterar a lista de navegadores testados quanto a problemas de compatibilidade:

• Clique em Principais navegadores.
• Selecione qualquer um dos conjuntos de categorias de navegador: Principais navegadores, Navegadores de desktop, Navegadores móveis.
• Ou selecione qualquer número de navegadores individuais da lista.
• Clique em Regenerar problemas para atualizar os problemas de compatibilidade com base nos navegadores selecionados.

Filtrar problemas por origem

Por padrão, a ferramenta Problemas lista apenas os problemas que pertencem ao código da página da Web atual. Para incluir problemas causados por bibliotecas ou estruturas de terceiros carregadas pela página da Web também, marque a caixa de seleção Incluir problemas de terceiros :

Consulte também

• Teste automaticamente uma página da Web em busca de problemas de acessibilidade