Novidades em DevTools (Microsoft Edge 85)
Para marcar os recursos mais recentes do Microsoft Edge DevTools e a extensão Microsoft Edge DevTools para Microsoft Visual Studio Code e Visual Studio, leia esses anúncios.
Para se manter atualizado e obter os recursos mais recentes do DevTools, baixe uma versão prévia do Insiders do Microsoft Edge. Se você estiver no Windows, Linux ou macOS, considere usar o Canary (ou outro canal de visualização) como seu navegador de desenvolvimento padrão. As versões Beta, Dev e Canary do Microsoft Edge são executadas como aplicativos separados, lado a lado com a versão estável e lançada do Microsoft Edge. Consulte Canais internos do Microsoft Edge.
Para os últimos anúncios, siga a equipe do Microsoft Edge no Twitter. Para relatar um problema com o DevTools ou pedir um novo recurso, registre um problema no repositório MicrosoftEdge/DevTools .
Anúncios da equipe do Microsoft Edge DevTools
Recursos de depuração de grade do CSS
A equipe do Microsoft Edge DevTools está colaborando com a equipe do Chrome DevTools e Chromium comunidade para adicionar novos recursos de depuração de grade do CSS ao DevTools. Agora você pode exibir números de linha de grade, lacunas de grade e linhas de grade estendidas como uma sobreposição na página. Além disso, mais melhorias nas ferramentas de grade estão chegando.
Atualização: esse recurso foi lançado e não é mais experimental.
Para experimentar o experimento com um exemplo, consulte Exemplo de planejador de grade do CSS.
Chromium problema #1047356
Veja também:
Editar e Reproduzir solicitações com o Console de Rede
Agora você pode usar Editar e Reproduzir em solicitações no Log de Rede usando o Console de Rede. Abra o Log de Rede, clique com o botão direito do mouse e selecione Editar e Reproduzir:
Um novo painel, o Console de Rede é aberto na Gaveta DevTools e é preenchido automaticamente com informações para a solicitação HTTP. Para exibir a resposta retornada do servidor, edite a solicitação (se necessário) e selecione Enviar.
Você também pode usar o Console de Rede para criar e enviar solicitações HTTP diretamente do DevTools.
Dica: para exibir o Console de Rede no painel main (superior) em vez da Gaveta DevTools, consulte ferramentas móveis entre painéis.
Atualização: esse recurso foi lançado e não é mais experimental.
Chromium problema #1093687
Funcionário do serviço respondeCom eventos na guia Tempo
A guia Tempo da ferramenta Rede agora inclui respondWith eventos de trabalho de serviço. O respondWith evento do trabalho de serviço mostra a duração do tempo imediatamente antes que o manipulador de eventos do trabalho fetch de serviço comece a ser executado até o momento em que a respondWith promessa do fetch manipulador é resolvida.
Expanda Resposta recebida para exibir informações adicionais da fetch resposta como CacheStorageCacheName, serviceWorkerResponseSourcee ResponseTime.
Chromium problema #1066579
Veja também:
- Exiba a relação de tempo das solicitações na referência de recursos de rede.
- Exiba a divisão de tempo de uma solicitação na referência de recursos de rede.
comentários webhint no painel Problemas
webhint é uma ferramenta de código aberto que fornece comentários em tempo real sobre acessibilidade, compatibilidade entre navegadores, segurança, desempenho, PWAs e outros problemas comuns de desenvolvimento web de sites. Você pode exibir comentários webhint no painel Problemas .
Para habilitar o experimento, consulte Ativar ou desativar um experimento e selecionar a caixa de seleção ao lado de Habilitar webhint. Abra o painel Problemas para exibir comentários do webhint.
Chromium problema #1070378
Veja também:
- extensão webhint para Visual Studio Code
- Habilitar webhint em recursos experimentais no Microsoft Edge DevTools
Mover ferramentas entre painéis
Normalmente, ferramentas como Elementos e Rede só podem ser abertas no painel main (superior) de DevTools. Da mesma forma, ferramentas como Exibição 3D e Problemas só podem ser abertas no painel gaveta (inferior) de DevTools. Agora você pode personalizar o layout do DevTools movendo ferramentas entre os painéis superior e inferior.
Atualização: esse recurso foi lançado e não é mais experimental.
Chromium problema #897944
Veja também:
- Sobre a Barra de Atividades e ferramentas de Exibição Rápida em Visão Geral do DevTools.
Dica de ferramenta do Iniciador aprimorado no painel Rede
No Microsoft Edge 83 e 84, dicas de ferramentas para a coluna Iniciador, que mostra a causa da solicitação de recurso, no Log de Rede exibido com uma barra de rolagem horizontal. Você só pôde exibir a pilha de chamadas que iniciou a solicitação rolando horizontalmente na dica de ferramenta.
Começando com o Microsoft Edge 85, agora você pode exibir a pilha de chamadas do Iniciador na dica de ferramenta sem rolar horizontalmente.
Chromium problema #1069404
Anúncios do projeto Chromium
As seções a seguir anunciam recursos adicionais disponíveis no Microsoft Edge 85 que foram contribuídos para o projeto código aberto Chromium.
Edição de estilo para estruturas CSS-in-JS
O painel Estilos agora tem melhor suporte para estilos de edição que foram criados com as APIs do CSS Object Model (CSSOM). Muitas estruturas e bibliotecas CSS-in-JS usam as APIs CSSOM sob o capô para construir estilos.
Agora você pode editar estilos que foram adicionados no JavaScript usando a CSSStyleSheet interface, que é uma nova maneira de criar e distribuir estilos reutilizáveis ao usar o SHADOW DOM. Consulte A CSSStyleSheet interface no CSS Object Model (CSSOM).
Por exemplo, os h1 estilos adicionados com CSSStyleSheet (APIs CSSOM) não eram editáveis anteriormente. Os estilos estão editáveis agora no painel Estilos .
Dê a esse recurso uma tentativa com um exemplo que usa CSS-in-JS. Consulte Edição de estilo para estruturas CSS-in-JS.
Chromium problema #946975
Farol 6 no painel do Farol
O painel do Lighthouse agora está executando o Lighthouse 6. Para obter uma lista completa de todas as alterações, consulte notas de versão v6.0.0.
O Lighthouse 6.0 apresenta três novas métricas ao relatório: LCP (Maior Pintura Contentful), CLS (Turno de Layout Cumulativo) e Tempo Total de Bloqueio (TBT).
A fórmula de pontuação de desempenho também foi repeso para refletir melhor a experiência de carregamento do usuário.
Chromium problema #772558
Veja também:
Primeira depreciação significativa de tinta
First Significant Paint (FMP) é preterido no Lighthouse 6.0. O FMP também foi removido do painel Desempenho . A Maior Pintura Contentful é a substituição recomendada para FMP.
Chromium problema #1096008
Veja também:
Suporte para novos recursos JavaScript
O DevTools agora tem melhor suporte para alguns dos recursos de linguagem JavaScript mais recentes:
Autocompleção de sintaxe de encadeamento opcional. A conclusão automática da propriedade no Console agora dá suporte à
name.sintaxe de encadeamento opcional, por exemplo,name?.agora funciona além de ename[.Realçamento de sintaxe para campos privados. Os campos de classe privada agora estão devidamente realçados em sintaxe e bastante impressos no painel Fontes .
Realçamento de sintaxe para operador de coalescing nullish. O DevTools agora imprime corretamente o operador de coalescing nullish no painel Fontes .
Chromium problemas #1073903, #1083214, #1083797
Veja também:
Novos avisos de atalho de aplicativo no painel Manifesto
Na ferramenta Aplicativo , atalhos de aplicativo ajudam os usuários a iniciar rapidamente tarefas comuns ou recomendadas em um aplicativo Web.
Na ferramenta Aplicativo , o painel Manifesto agora mostra avisos para as seguintes condições:
- Quando os ícones de atalho do aplicativo são menores que 96x96 pixels.
- Quando os ícones de atalho e manifesto do aplicativo não são quadrados (já que os ícones são ignorados).
Chromium problema #955497
Veja também:
Exibição consistente do painel Computado
O painel computado na ferramenta Elementos agora é exibido consistentemente como um painel em todos os tamanhos do viewport. Anteriormente, o painel computado mesclava dentro do painel Estilos quando DevTools era estreito.
Chromium problema #1073899
Veja também:
- Exibir apenas o CSS que é realmente aplicado a um elemento na referência de recursos do CSS
Deslocamentos de bytecode para arquivos WebAssembly
O DevTools agora usa deslocamentos de código de byte para exibir números de linha de desmontagem de Wasm. Os números de linha tornam mais claro que você está olhando para dados binários e é mais consistente com a forma como o runtime wasm faz referência aos locais.Chromium problema #1071432
Veja também:
Cópia em termos de linha e corte no Painel de Fontes
Ao executar cópia ou corte sem seleção no editor do painel Fontes, o DevTools copia ou corta a linha de conteúdo atual.
Chromium problema #800028
Atualizações de Configurações do Console
Desagrupar as mesmas mensagens de console
O alternância de grupo semelhante em Configurações de Console agora se aplica a mensagens duplicadas. Anteriormente, ele só se aplicava a mensagens semelhantes.
Por exemplo, anteriormente, DevTools não desagrupou as mensagens, embora o hellogrupo semelhante esteja desmarcado. Agora, as hello mensagens estão desagrupadas.
Dê a esse recurso uma tentativa com um exemplo que envia mensagens duplicadas para o Console.
Chromium problema #1082963
Veja também:
- Desativar o agrupamento de mensagens na referência de recursos do Console
Configurações de contexto selecionadas persistentes
As configurações de contexto selecionadas apenas em Configurações do Console agora são persistentes. Anteriormente, as configurações eram redefinidas sempre que você fechava e reabria o DevTools. A alteração torna o comportamento de configuração consistente com outras opções de Configurações do Console.
Chromium problema #1055875
Veja também:
- Filtrar mensagens de diferentes contextos JavaScript – em Referência de recursos do Console
Atualizações do painel de desempenho
Informações de cache de compilação JavaScript na ferramenta De desempenho
As informações de cache de compilação JavaScript agora são sempre exibidas no painel Resumo da ferramenta Desempenho. Anteriormente, o DevTools não mostrou nada relacionado ao cache de código se o cache de código não ocorreu.
Chromium problema #912581
Veja também:
Alinhamento de tempo de navegação no painel Desempenho
Anteriormente, o painel Desempenho mostrava tempos nas réguas com base em quando a gravação começou. O tempo agora foi alterado para gravações em que o usuário navega. DevTools agora mostra os tempos de régua em relação à navegação, em vez de quando a gravação começou.
Os tempos dos DOMContentLoadedeventos , First Paint, First Contentful Paint e Largest Contentful Paint são atualizados para serem relativos ao início da navegação, o que significa que o tempo corresponde aos tempos relatados por PerformanceObserver.
Chromium problema nº 974550
Veja também:
Novos ícones para pontos de interrupção, pontos de interrupção condicional e pontos de log
Atualização: a partir de 2022, os pontos de interrupção agora são indicados por um retângulo azul, em vez de um círculo vermelho.
O painel Fontes tem novos designs para pontos de interrupção, pontos de interrupção condicional e pontos de log. Os pontos de interrupção são representados por um círculo vermelho, assim como Visual Studio Code e Visual Studio. Os ícones são adicionados para diferenciar pontos de interrupção condicional e pontos de log.
Chromium problema #1041830
Veja 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 Internacional de Atribuição do Creative Commons 4.0. A página original é encontrada aqui e é de autoria de Jecelyn Yeen (advogada do desenvolvedor, Chrome DevTools).
Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.