Novidades no DevTools (Microsoft Edge 114)
Para marcar as funcionalidades mais recentes do Microsoft Edge DevTools e da extensão DevTools do Microsoft Edge para o Microsoft Visual Studio Code e Visual Studio, leia estes anúncios.
Para se manter atualizado e obter as funcionalidades mais recentes do DevTools, transfira uma versão de pré-visualização do Insider do Microsoft Edge. Quer esteja no Windows, Linux ou macOS, considere utilizar o Canary (ou outro canal de pré-visualização) como o browser de desenvolvimento predefinido. As versões Beta, Dev e Canary do Microsoft Edge são executadas como aplicações separadas, lado a lado com a versão estável e lançada do Microsoft Edge. Consulte Microsoft Edge Insider Channels.
Para obter os anúncios mais recentes, siga a equipa do Microsoft Edge no Twitter. Para comunicar um problema com o DevTools ou pedir uma nova funcionalidade, submeta um problema no repositório MicrosoftEdge/DevTools .
Dica
A conferência Microsoft Build 2023 foi realizada nos dias 23 e 25 de maio de 2023. Saiba mais sobre as novas funcionalidades de depuração de memória, desempenho e produção nas DevTools, bem como novas capacidades para PWAs na barra lateral, WebView2 e Plug-ins de Chat, nos seguintes vídeos:
Vídeo: Novidades no DevTools 113 e 114
Estatísticas do Seletor de Agregação na ferramenta desempenho
O Microsoft Edge 109 adicionou a funcionalidade Estatísticas do Seletor à ferramenta Desempenho . Pode utilizar os dados das Estatísticas do Seletor para compreender que seletores CSS estão a demorar mais tempo durante os eventos Recalcular Estilo na ferramenta Desempenho e estão a contribuir para um desempenho lento.
No Microsoft Edge 114, já não precisa de selecionar um evento Individual Recalcular Estilo para ver os seletores que foram recalculados durante esse evento. Em vez disso, o separador 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 amplia partes específicas do perfil, o separador Estatísticas do Seletor é atualizado para mostrar apenas os dados da parte do perfil que está atualmente a analisar.
Além disso, foi adicionada uma nova coluna Folha de Estilos ao separador Estatísticas do Seletor . A coluna Folha de Estilos contém uma ligação para cada seletor de volta à folha de estilos onde o seletor está definido.
Obrigado por utilizar a funcionalidade Estatísticas do Seletor e partilhar o seu feedback connosco no GitHub Issue n.º 98: [Feedback] Selector Performance Tracing Explainer!
Veja também:
- Analisar o desempenho do seletor CSS durante os eventos Recalcular Estilo
- Problema do GitHub n.º 98: [Feedback] Selector Performance Tracing Explainer
- Depurar eventos de Estilo Recalcular de execução prolongada com novas estatísticas do seletorem Novidades no DevTools (Microsoft Edge 109).
A ferramenta Problemas e o painel Estilos alertam sobre as propriedades CSS que acionam o Esquema
Agora, a DevTools deteta e avisa sobre as propriedades do CSS que podem causar problemas de desempenho baseados no esquema ao utilizar animação CSS na página Web, como mover texto. Esquema é o processo do browser para recálculo das posições e geometrias dos elementos no documento, para voltar a compor parte ou todo o documento. Uma vez que o Esquema é uma operação de bloqueio de utilizadores no browser, recomendamos limitar o Esquema tanto quanto possível, para manter o conteúdo Web suave e reativo à interação.
Algumas propriedades do CSS não acionam uma operação de Esquema, uma vez que são executadas no thread compositor no browser, como transformação e opacidade. No entanto, mesmo as propriedades CSS que não acionam o Esquema podem acionar uma operação do Paint que, quando utilizada em combinação com animações CSS, pode causar um impacto negativo no desempenho.
No painel Estilos na ferramenta Elementos , foi adicionado um sublinhado ondulado e uma descrição às propriedades CSS que acionam operações de Esquema ou Paint. Para ver o problema numa descrição, paire o cursor sobre o sublinhado ondulado:
Na ferramenta Problemas , na categoria Desempenho , é reportado um novo tipo de problema, como "As alterações a esta propriedade serão acionadas: 'Esquema', o que pode afetar o desempenho quando utilizado dentro @Keyframesde ." Quando estiver a utilizar o painel Estilos , para abrir o problema na ferramenta Problemas , shift+clique no sublinhado ondulado nessa propriedade ou clique com o botão direito do rato no sublinhado ondulado e, em seguida, selecione Ver problemas. A ferramenta Problemas é aberta na Gaveta (agora painel Vista Rápida ) na parte inferior das DevTools:
Veja também:
- Minimizar o fluxo do browser | O ajuste do PageSpeed Insights - inclui operações Paint, Composite e Layout.
- Esquema em Resolver problemas comuns de desempenho.
- Abra problemas na árvore DOM em Localizar e corrigir problemas com a ferramenta Problemas.
- Utilizar animações CSS, na MDN.
- Inspecionar e modificar efeitos de animação CSS
A ferramenta Memória pode carregar rastreios melhorados superiores a 1 GB
Em versões anteriores do Microsoft Edge, o carregamento de um rastreio melhorado superior a 1 GB falhou. No Microsoft Edge 114, este problema foi corrigido. Agora, pode carregar com êxito rastreios melhorados de qualquer tamanho.
Os rastreios melhorados são uma funcionalidade experimental no Microsoft Edge que lhe permite exportar e importar instâncias de DevTools completas, guardadas como .devtools ficheiros, com o máximo de estado possível preservado nas ferramentas Memória, Desempenho, Elementos, Consola e Origens . Um .devtools ficheiro é aberto numa instância de DevTools separada e carrega as seguintes informações de rastreio, ao mesmo tempo que mantém as referências ao código fonte:
- Instantâneos DOM.
- Mensagens da consola.
- Instantâneos de área dinâmica para dados.
- Perfis de desempenho.
Veja também:
- Partilhar rastreios de memória e desempenho melhorados
- Problema do GitHub n.º 122: [Feedback] Experimentação de Rastreios Avançados
A ferramenta Memória compara com maior precisão dois instantâneos de área dinâmica para dados
Na ferramenta Memória , pode tirar vários instantâneos de área dinâmica para dados e compará-los para encontrar diferenças nos objetos na área dinâmica para dados. Em versões anteriores do Microsoft Edge, a ferramenta Memória reportou demasiados objetos novos e eliminados ao comparar instantâneos de área dinâmica para dados, porque os IDs de objeto não estavam a ser monitorizados de forma consistente pela ferramenta. Na verdade, muitos destes são provavelmente os mesmos objetos.
No Microsoft Edge 114, este problema foi corrigido ao garantir que os IDs de objeto consistentes são monitorizados em vários instantâneos.
Veja também:
- Veja instantâneos em Instantâneos de área dinâmica para dados de registos com a ferramenta memória (tipo de criação de perfis "Heap snapshot").
- Alterar lista 4278992: Produzir IDs consistentes para objetos oilpan em instantâneos de área dinâmica para dados
- Problema 1286500: A comparação da área dinâmica para dados snapshot comunica incorretamente um grande número de objetos novos e eliminados
Melhorias de acessibilidade para a ferramenta de Descrição Geral do CSS
No Microsoft Edge 112, a ferramenta de Descrição Geral do CSS foi atualizada para apresentar uma lista de seletores não simples ao obter uma descrição geral snapshot do CSS de uma página Web. No Microsoft Edge 114, a secção Seletores não simples da ferramenta de Descrição Geral do CSS é agora mais fácil de utilizar com tecnologia de apoio, como leitores de ecrã.
Quando clica num seletor ou navega para um seletor e, em seguida, prime Enter, os leitores de ecrã anunciam agora "Seletor CSS copiado":
Veja também:
- A ferramenta Descrição Geral do CSS apresenta 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 Descrição Geral do CSS.
- Navegar em DevTools com tecnologia de apoio
A extensão DevTools para o VS Code tem um 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, pairar o cursor sobre ícones dentro das ferramentas não componiu os controlos de IU com contraste suficiente. Esse problema foi corrigido.
Por exemplo, no painel Estilos na ferramenta Elementos , as caixas de verificação para aplicar estilos a elementos são agora compostas corretamente no modo de alto contraste:
Além disso, na ferramenta Consola , ícones como Mostrar barra lateral da consola são agora compostos corretamente no modo de alto contraste:
Veja também:
- Extensão DevTools do Microsoft Edge para 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: