Novidades no DevTools (Microsoft Edge 112)

Esses são os recursos mais recentes na versão estável do Microsoft Edge DevTools.

Vídeo: Novidades no DevTools 112

Imagem em miniatura do vídeo

A ferramenta Desempenho desativa a minimização do JavaScript em execução em iframes fora do processo

Em versões anteriores do Microsoft Edge, a execução do JavaScript em um iframe fora do processo (OOPIF) era isolada do DevTools. Como resultado, a ferramenta Desempenho não foi capaz de aplicar sourcemaps a eventos de desempenho que são de um OOPIF. Ao gravar um perfil na ferramenta Desempenho , a ferramenta só pode exibir os nomes de arquivo e função minificados no gráfico de degradê, não os nomes não minificados:

A pilha de chamadas não minificadas de um perfil gravado na ferramenta Desempenho ainda mostrando nomes minificados

No Microsoft Edge 112, a ferramenta Desempenho agora carrega mapas de origem e os aplica aos eventos de desempenho rastreados em OOPIFs. Como resultado, depois de gravar um perfil na ferramenta Desempenho , agora você pode ver nomes de arquivo e função não minificados para a execução JavaScript que ocorre dentro de um OOPIF:

A pilha de chamadas não minificadas de um perfil registrado na ferramenta Desempenho

Veja também:

A ferramenta de visão geral do CSS exibe seletores não simples para ganhos rápidos de desempenho

A ferramenta de visão geral do CSS tem uma nova seção Seletores não simples, que exibe uma lista de seletores CSS não simples quando você tira um snapshot de visão geral do CSS da sua página da Web. Esta lista de seletores CSS não simples na ferramenta de visão geral do CSS fornece uma maneira rápida de identificar culpados comuns que podem estar causando eventos de Recalcular Estilos de longa duração:

A nova lista de seletores não simples na ferramenta de visão geral do CSS

Esta é uma lista de seletores que podem reduzir o desempenho. Para determinar se esses seletores estão realmente reduzindo o desempenho, use o recurso Estatísticas do seletor na ferramenta Desempenho .

Você pode tentar alterar esses seletores para que eles sejam mais específicos e correspondam a menos elementos, reduzindo o tempo que o navegador leva para calcular estilos nos seguintes casos:

  • Quando elementos são adicionados ou removidos do DOM.
  • Quando os atributos de um elemento são alterados, como class ou id.
  • Quando ocorre uma entrada do usuário, como um movimento do mouse ou uma mudança de foco, o que pode afetar :hover as regras.

Para analisar o desempenho individual do seletor CSS e analisar o impacto de suas alterações, use o recurso Estatísticas do seletor na ferramenta Desempenho .

Veja também:

O Visualizador JSON no Microsoft Edge dá suporte ao dobramento de código

A partir do Microsoft Edge 110, você tem acesso a um recurso experimental para exibir JSON diretamente no navegador: o Visualizador JSON. Anteriormente, você pode ter usado extensões de navegador ou editores de texto para exibir JSON, mas agora você pode inspecionar cargas JSON diretamente no Microsoft Edge, seja o JSON da rede ou do disco.

A partir do Microsoft Edge 112, o Visualizador JSON agora dá suporte ao dobramento de código. O Visualizador JSON é um recurso experimental. Para ativar o Visualizador JSON e a dobra de código de acesso:

  1. Saiba mais em edge://flags.

  2. No campo de texto Sinalizadores de pesquisa , comece a digitar Visualizador JSON.

  3. No menu suspenso Visualizador JSON , selecione Habilitado. Um botão Reiniciar aparece no canto inferior direito.

  4. Clique no botão Reiniciar .

  5. Vá para um arquivo JSON, como https://microsoftedge.github.io/Demos/json-dummy-data/256KB.json. Os números de linha aparecem à esquerda.

  6. Clique no ícone de engrenagem (ícone de engrenagem do JSON Viewer) no canto superior direito e marque a caixa de seleção Dobramento de código .

Com o dobramento de código ativado, agora você pode expandir e recolher objetos e matrizes dentro do JSON que está inspecionando:

Dobramento de código no Visualizador JSON do Microsoft Edge

Envie-nos seus comentários!

Veja também:

Melhorias no Modo de Foco

O Modo de Foco é uma nova interface de usuário experimental para DevTools. O Modo de Foco simplifica e otimiza a interface do usuário do DevTools, fornecendo personalização máxima sem comprometer o conjunto robusto de recursos das ferramentas. No Microsoft Edge 112, o Modo de Foco recebeu as seguintes melhorias:

Pressionar Esc mostra ou oculta totalmente a Exibição Rápida

Nas versões anteriores do Microsoft Edge, no Modo de Foco, o painel Visualização Rápida era sempre exibido, como recolhido ou expandido. Pressionar Esc expandia o painel Visualização rápida se ele estivesse recolhido e vice-versa. No entanto, quando a ferramenta Console foi selecionada na Barra de atividades, pressionar Esc quando o painel Visualização rápida foi recolhido exibiu uma exibição em branco. No Microsoft Edge 112, esse problema foi corrigido.

Pressionar Esc agora mostra ou oculta totalmente o painel Visualização rápida . Se o painel Visualização rápida estiver oculto no momento, pressionar Esc mostrará o painel Visualização rápida , expandido:

O painel Visualização rápida foi expandido, pressionando Esc

Se a barra de ferramentas Visualização rápida estiver exibida no momento (se o painel Visualização rápida estiver recolhido ou expandido), pressionar Esc ocultará totalmente a barra de ferramentas e o painel Visualização rápida :

A barra de ferramentas de Visualização Rápida e o painel totalmente ocultos pressionando Esc

O ícone do Nó para DevTools dedicado não se sobrepõe mais ao primeiro ícone na Barra de Atividades

No Modo de Foco, quando o DevTools detecta que um servidor Node.js está em execução, o ícone Nó é exibido. Clicar nesse ícone abre o DevTools para Node dedicado.

Atualizar: A Barra de Atividades vertical não é mais suportada, no Microsoft Edge 144 e em versões futuras.

Antes do Microsoft Edge 112, o ícone de Nó se sobrepõe ao primeiro ícone de ferramenta quando a Barra de Atividades está na orientação vertical, dificultando a seleção da primeira ferramenta. Esse problema agora foi corrigido; não há sobreposição do ícone de Nó e do primeiro ícone de ferramenta quando a Barra de Atividades está na vertical:

O ícone de Nó não se sobrepõe mais ao primeiro ícone de ferramenta na Barra de Atividades

Com a Barra de Atividades vertical, apenas um rótulo é mostrado para cada ícone de ferramenta ao passar o mouse

Atualizar: A Barra de Atividades vertical não é mais suportada, no Microsoft Edge 144 e em versões futuras.

No Modo de Foco, quando a Barra de Atividades está na orientação vertical, um rótulo de nome de ferramenta é exibido quando você passa o mouse sobre um ícone ou seleciona um ícone com o teclado. Esses rótulos ajudam você a aprender o ícone de cada ferramenta na Barra de Atividades.

Anteriormente, selecionar um ícone com o teclado ou passar o mouse sobre um ícone exibia dois rótulos simultaneamente. Esse problema agora foi corrigido; Apenas um rótulo é exibido:

Um rótulo é exibido ao passar o mouse sobre um ícone na Barra de Atividades

Anúncios do projeto Chromium

O Microsoft Edge 112 também inclui as seguintes atualizações do projeto Chromium:

Confira também

  • Last updated on