Compartilhar via


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:

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

Imagem em miniatura do vídeo

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:

    Categorias de problemas na ferramenta Problemas na página de demonstração

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 ferramenta Problemas apresenta problemas de desempenho ordenados por gravidade

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:

    Um problema expandido na ferramenta Problemas, com informações adicionais sobre como corrigir o problema

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:

    A Ferramenta de rede é aberta quando seleciona uma ligação de recurso de 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 (ícone da ferramenta Elementos).

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

    Problemas de sublinhado ondulado na árvore DOM na ferramenta Elementos

  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:

    Detalhes sobre problemas num elemento sublinhado ondulado na árvore DOM

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:

O painel Problemas com a lista pendente Gravidade expandida, a mostrar os diferentes níveis que podem ser selecionados

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.

O painel Problemas com a lista pendente Browser expandida, que mostra os diferentes browsers que podem ser 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 :

O painel Problemas com a caixa de verificação

Consulte também

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Pública Creative Commons Atribuição 4.0 Internacional. A página original encontra-se aqui e é criada por Sam Dutton (Consultor de Programação). Licença Creative Commons Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.