Encontrar e corrigir problemas usando a ferramenta Problemas

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

A ferramenta Problemas fornece feedback nas seguintes categorias:

• Acessibilidade.
• Compatibilidade entre browsers.
• Desempenho.
• Aplicações Web Progressivas.
• Segurança.
• Outro.

O feedback na ferramenta Problemas é fornecido por várias origens , incluindo a plataforma Chromium, o eixo Deque, os dados de compatibilidade do browser MDN e o webhint. Para obter informações sobre estas origens de comentários que povoam a ferramenta Problemas , consulte:

• Descrição Geral das Ferramentas do eixo
• repositório browser-compat-data
• Dica da web

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

Abrir a ferramenta Problemas

1. Aceda a uma página Web que contém problemas para corrigir. Por exemplo, abra a página de demonstração de teste de acessibilidade num novo separador ou janela.

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar. O DevTools é aberto.

3. Na barra de ferramentas Vista Rápida na parte inferior de DevTools, selecione o separador Problemas , que está presente por predefinição.

   Se o painel Vista Rápida não for apresentado, selecione Personalizar e controlar DevTools (...) e, em seguida, selecione Ativar/Desativar Painel de Vista Rápida (Esc). Se a barra de ferramentas Vista Rápida não tiver o separador Problemas, na barra de ferramentasVista Rápida , clique no botão Mais ferramentas (+) e, em seguida, selecione Problemas.

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

   

Outras formas de abrir a ferramenta Problemas

• Na Barra de Atividade ou na barra de ferramentas Vista Rápida , clique no botão Mais ferramentas (+) e, em seguida, selecione Problemas.

• Na ferramenta Elementos , na árvore DOM, localize um nome de elemento sublinhado ondulado e, em seguida, prima sem soltar Shift e, em seguida, clique no elemento. Em alternativa, clique com o botão direito do rato num elemento sublinhado ondulado e, em seguida, selecione Ver problemas. Veja Problemas de abertura a partir da árvore DOM, abaixo.

Ferramenta colocação de Problemas: Vista Rápida ou Barra de Atividade

Por predefinição, tal como no Menu de Comandos , a ferramenta Problemas é aberta no painel Vista Rápida . Em vez disso, pode abri-la na Barra de Atividade ou movê-la para a Barra de Atividade:

• Na barra de ferramentas Vista Rápida , clique com o botão direito do rato no separador Inspecionar e, em seguida, selecione Mover para a Barra de Atividade superior ou Mover para a Barra de Atividade à esquerda.

Os problemas são ordenados automaticamente por gravidade

Em cada categoria de problemas, primeiro os erros são listados, depois avisos e, em seguida, sugestões:

A lista pendente Gravidade controla se os itens Avisos, Erros, Sugestões e Informações estão listados. Veja Filtrar problemas por gravidade abaixo.

Expandir entradas na ferramenta Problemas

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

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

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

   

Cada problema apresentado tem os seguintes componentes:

• Um cabeçalho que descreve o problema.

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

• Uma secção RECURSOS AFETADOS que liga a recursos em DevTools, como a ferramenta Elementos, Origens ou Rede .

• Ligações para documentação adicional.

Ver problemas no contexto de uma ferramenta associada

Um problema na ferramenta Problemas pode incluir uma ou mais ligações que abrem ferramentas diferentes, como a ferramenta Elementos, Origens ou Rede . Pode abrir uma destas ferramentas para efetuar passos de resolução de problemas adicionais.

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

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

2. Na secção RECURSOS AFETADOS , numa ligação Abrir em , clique no nome da ferramenta, como Rede:

   

   O recurso afetado é apresentado na ferramenta indicada.

Problemas de abertura a partir da árvore DOM

Se um elemento tiver um problema associado, a árvore DOM na ferramenta Elementos mostra um sublinhado ondulado sob o nome do elemento. Clique com o botão direito do rato no elemento e, em seguida, selecione Ver problemas. Em alternativa, prima sem soltar Shift e, em seguida, clique no elemento com o sublinhado ondulado.

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

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

2. Clique com o botão direito do rato em qualquer parte da página Web e, em seguida, selecione Inspecionar. Em alternativa, prima F12. O DevTools é aberto junto à página Web.

3. Em DevTools, selecione o separador Elementos ().

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

   

5. Paire o cursor sobre o <img> elemento start-tag. Uma descrição apresenta informações sobre o problema.

6. Clique com o botão direito do rato no <img> elemento e, em seguida, selecione Ver problemas. Em alternativa, prima sem soltar Shift e, em seguida, clique no elemento . A ferramenta Problemas é aberta e apresenta os problemas associados a esse elemento:

   

Problemas de filtro

Para reduzir o número de problemas apresentados na ferramenta Problemas , pode filtrar a lista por gravidade, browser e origem.

Filtrar problemas por gravidade

Por predefinição, apenas são apresentados erros e avisos. Para apresentar problemas com outros níveis de gravidade:

• Na lista pendente Gravidade, selecione qualquer número de níveis de gravidade: Sugestões, Informações, Avisos ou Erros:

Para voltar a mostrar apenas avisos e erros, selecione Níveis predefinidos.

Filtrar problemas por browser

Os problemas que pertencem à categoria Compatibilidade também podem ser filtrados pelo browser. Por predefinição, são testados os seguintes browsers:

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

Para alterar a lista de browsers testados para problemas de compatibilidade:

• Clique em Browsers principais.
• Selecione qualquer um dos conjuntos de categorias do browser: browsers principais, Browsers de ambiente de trabalho, Browsers móveis.
• Em alternativa, selecione qualquer número de browsers individuais na lista.
• Clique em Regenerar problemas para atualizar os problemas de compatibilidade com base nos browsers selecionados.

Filtrar problemas por origem

Por predefinição, a ferramenta Problemas apenas lista problemas relacionados com o código da página Web atual. Para incluir problemas causados por bibliotecas de terceiros ou arquiteturas carregadas também pela página Web, selecione a caixa de verificação Incluir problemas de terceiros :

Consulte também

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