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
Abrir a ferramenta Problemas
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.
Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar. O DevTools é aberto.
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:
Abra uma página Web e a ferramenta Problemas , conforme descrito acima.
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 :
Conforme descrito acima, abra uma página Web, abra DevTools, selecione a ferramenta Problemas e, em seguida, expanda um problema.
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:
Abra uma página Web. Por exemplo, abra a página Web de demonstração de teste de acessibilidade numa nova janela ou separador.
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.
Em DevTools, selecione o separador Elementos ().
Na árvore DOM, expanda
<body>
<img>
>>><article id="cats">
><section>
<main>
. O<img>
elemento start-tag tem um sublinhado ondulado:Paire o cursor sobre o
<img>
elemento start-tag. Uma descrição apresenta informações sobre o problema.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
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). Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.