Nota
O acesso a esta página requer autorização. Pode tentar iniciar sessão ou alterar os diretórios.
O acesso a esta página requer autorização. Pode tentar alterar os diretórios.
Esses são os recursos mais recentes na versão estável do Microsoft Edge DevTools.
Dica
A conferência Microsoft Build 2023 foi de 23 a 25 de maio de 2023. Saiba mais sobre os novos recursos de memória, desempenho e depuração de produção no DevTools, bem como novos recursos para PWAs na barra lateral, WebView2 e Plug-ins de Chat, nos seguintes vídeos:
Vídeo: Novidades no DevTools 113 e 114
Agregar estatísticas do seletor na ferramenta Desempenho
O Microsoft Edge 109 adicionou o recurso Estatísticas do Seletor à ferramenta Desempenho . Você pode usar os dados de Estatísticas do seletor para entender quais seletores CSS estão demorando mais durante os eventos Recalcular estilo na ferramenta Desempenho e estão contribuindo para um desempenho lento.
No Microsoft Edge 114, você não precisa mais selecionar um evento Recalcular Estilo individual para ver os seletores que foram recalculados durante esse evento. Em vez disso, a guia Estatísticas do seletor no painel inferior da ferramenta Desempenho agrega automaticamente os dados em todos os eventos Recalcular estilo no perfil gravado. À medida que você amplia partes específicas do perfil, a guia Estatísticas do seletor é atualizada para mostrar apenas dados da parte do perfil que você está analisando no momento.
Além disso, uma nova coluna Folha de Estilos foi adicionada à guia Estatísticas do Seletor . A coluna Folha de Estilos contém um link para cada seletor de volta à folha de estilos onde o seletor está definido.
Obrigado por usar o recurso Estatísticas do Seletor e compartilhar seus comentários conosco no GitHub Problema #98: [Comentários] Explicador de rastreamento de desempenho do seletor!
Veja também:
- Analise o desempenho do seletor CSS durante os eventos Recalcular Estilo
- GitHub Problema #98: [Comentários] Explicador de rastreamento de desempenho do seletor
- Depurar eventos de Recalcular Estilo de longa execução com novas estatísticas de seletor em Novidades do DevTools (Microsoft Edge 109).
A ferramenta Problemas e o painel Estilos alertam sobre propriedades CSS que acionam o Layout
O DevTools agora detecta e avisa sobre propriedades CSS que podem causar problemas de desempenho baseados em layout ao usar animação CSS na página da Web, como texto em movimento. Layout é o processo do navegador da Web para recalcular as posições e geometrias dos elementos no documento, para renderizar novamente parte ou todo o documento. Como o Layout é uma operação de bloqueio do usuário no navegador, recomendamos limitar o Layout o máximo possível, para manter seu conteúdo da Web suave e responsivo à interação.
Algumas propriedades CSS não disparam uma operação Layout, pois são executadas no thread do compositor no navegador, como transform e opacity. No entanto, mesmo as propriedades CSS que não disparam o Layout podem disparar uma operação Paint que, quando usada em combinação com animações CSS, pode levar a um impacto negativo no desempenho.
No painel Estilos na ferramenta Elementos , um sublinhado ondulado e uma dica de ferramenta foram adicionados às propriedades CSS que acionam as operações Layout ou Paint. Para exibir o problema em uma dica de ferramenta, passe o mouse sobre o sublinhado ondulado:
Na ferramenta Problemas , na categoria Desempenho , um novo tipo de problema é relatado, como "As alterações nesta propriedade acionarão: 'Layout', que pode afetar o desempenho quando usado dentro @Keyframes". Quando você estiver usando o painel Estilos , para abrir o problema na ferramenta Problemas , pressione Shift+clique no sublinhado ondulado dessa propriedade ou clique com o botão direito do mouse no sublinhado ondulado e selecione Exibir problemas. A ferramenta Problemas é aberta na Gaveta (agora painel Visualização Rápida ) na parte inferior do DevTools:
Veja também:
- Minimizar o refluxo do navegador | Orefluxo do PageSpeed Insights - inclui as operações Paint, Composite e Layout.
- Layout na Solução de problemas comuns de desempenho.
- Abra problemas na árvore DOM em Localize e corrija problemas usando a ferramenta Problemas.
- Usando animações CSS, no MDN.
- Inspecionar e modificar efeitos de animação CSS
A ferramenta Memória pode carregar rastreamentos aprimorados maiores que 1 GB
Em versões anteriores do Microsoft Edge, o carregamento de um rastreamento aprimorado maior que 1 GB falhava. No Microsoft Edge 114, esse problema foi corrigido. Agora você pode carregar com êxito rastreamentos aprimorados de qualquer tamanho.
Rastreamentos aprimorados são um recurso experimental no Microsoft Edge que permite exportar e importar instâncias inteiras do DevTools, salvas como .devtools arquivos, com o máximo de estado possível preservado nas ferramentas Memória, Desempenho, Elementos, Console e Fontes . Um .devtools arquivo é aberto em uma instância separada do DevTools e carrega as seguintes informações de rastreamento, mantendo as referências ao código-fonte:
- Instantâneos DOM.
- Mensagens do console.
- Instantâneos de heap.
- Perfis de desempenho.
Veja também:
- Compartilhar um rastreamento de memória com mais dados
- Compartilhar um rastreamento de desempenho com mais dados
- GitHub Problema #122: [Comentários] Experimento de rastreamentos aprimorados
A ferramenta Memória compara com mais precisão dois instantâneos de heap
Na ferramenta Memória , você pode tirar vários instantâneos de heap e compará-los para encontrar diferenças nos objetos no heap. Em versões anteriores do Microsoft Edge, a ferramenta Memória relatava muitos objetos novos e excluídos ao comparar instantâneos de heap, porque as IDs de objeto não estavam sendo rastreadas de forma consistente pela ferramenta. Na verdade, muitos deles são provavelmente os mesmos objetos.
No Microsoft Edge 114, esse problema foi corrigido, garantindo que IDs de objeto consistentes sejam rastreadas em vários instantâneos.
Veja também:
- Exibir instantâneos em Registrar instantâneos de heap usando a ferramenta Memória (tipo de criação de perfil "Heap snapshot")
- Lista de Alterações 4278992: Produzir IDs consistentes para objetos Oilpan em instantâneos de heap
- Problema 1286500: a comparação de snapshot de heap informa incorretamente um grande número de objetos novos e excluídos
Melhorias de acessibilidade para a ferramenta de visão geral do CSS
No Microsoft Edge 112, a ferramenta de visão geral do CSS foi atualizada para exibir uma lista de seletores não simples ao ter uma visão geral snapshot do CSS de uma página da Web. No Microsoft Edge 114, a seção Seletores não simples da ferramenta de visão geral do CSS agora é mais fácil de usar com tecnologia adaptativa, como leitores de tela.
Quando você clica em um seletor ou navega até um seletor e pressiona Enter, os leitores de tela agora anunciam "Seletor CSS copiado":
Veja também:
- A ferramenta de visão geral do CSS exibe seletores não simples para ganhos rápidos de desempenho em Novidades no DevTools (Microsoft Edge 112).
- Seletores não simples em Otimizar estilos CSS com a ferramenta de visão geral do CSS.
- Navegação no DevTools com tecnologia adaptativa
A extensão DevTools para VS Code tem melhor suporte para o modo de alto contraste
Em versões anteriores da extensão DevTools do Microsoft Edge para Visual Studio Code, no modo de alto contraste, passar o mouse sobre os ícones dentro das ferramentas não renderizava os controles da interface do usuário com contraste suficiente. Esse problema foi corrigido.
Por exemplo, no painel Estilos na ferramenta Elementos , as caixas de seleção para aplicar estilos a elementos agora são renderizadas corretamente no modo de alto contraste:
Além disso, na ferramenta Console , ícones como Mostrar barra lateral do console agora são renderizados corretamente no modo de alto contraste:
Veja também:
- Extensão do DevTools do Microsoft Edge para o Visual Studio Code
- Ativar ou desativar o modo de alto contraste no Windows
Anúncios do projeto Chromium
O Microsoft Edge 114 também inclui as seguintes atualizações do projeto Chromium:
- Depurar o preenchimento automático usando o painel Elementos e a guia Problemas
- Lighthouse 10.1.1
- Melhorias de desempenho
- Preterimento do JavaScript Profiler: fase três