Encontrar e corrigir problemas usando a ferramenta Problemas
Artigo
A ferramenta Problemas analisa automaticamente a página Web atual, comunica problemas agrupados por tipo e fornece documentação para ajudar a explicar e resolve os problemas.
A ferramenta Problemas fornece feedback nas seguintes categorias:
Acessibilidade.
Compatibilidade entre browsers.
Desempenho.
Aplicativos Web progressiva.
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:
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:
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 reverter 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 :
Este módulo aborda vários conceitos sobre o tópico de acessibilidade e como adicioná-lo aos seus aplicativos Web durante o desenvolvimento para a Web. Você aprenderá a importância de usar tags HTML corretamente para descrever informações e várias melhorias que pode fazer em seus sites.