Novidades no DevTools (Microsoft Edge 102)
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 2022 foi realizada nos dias 24 e 26 de maio. Saiba mais sobre as novas funcionalidades de depuração de memória, desempenho e produção em DevTools e novas capacidades na plataforma Web para PWAs nos seguintes vídeos:
Vídeo: Microsoft Edge | Novidades no DevTools 102
Extensão DevTools: novo browser com emulação de dispositivos e modos e suporte de sourcemap
A extensão DevTools do Microsoft Edge para Visual Studio Code tem agora uma pré-visualização do browser que lhe permite emular diferentes dispositivos. Clique no novo botão Emular funcionalidades de multimédia CSS (
) para pré-visualizar o projeto atual em diferentes modos, como Escuro, Claro, Impressão e Alto Contraste:
Clique no novo botão Emular deficiências visuais (
visuais) para testar facilmente a acessibilidade, como mostrar o aspeto da página Web com deficiências de visão desfocada ou de visão colorida.
Outras novas funcionalidades incluem uma forma mais simples de alternar o espelhamento CSS, que agora também suporta os esquemas de origem. Isto significa que pode depurar e modificar o CSS criado por Sass, React e outras abstrações em direto no browser e ver as alterações nos ficheiros de origem.
Veja também:
- Emulação do dispositivo e do estado
- Mapear o código processado para o código fonte original, para depuração
- Edição do Espelho CSS com Máscaras de Origem: Problemas Conhecidos e Comentários
Guardar todas as cadeias de dados de uma área dinâmica para dados snapshot em JSON
No Microsoft Edge 102, ao utilizar uma área dinâmica para dados snapshot na ferramenta Memória, agora pode exportar todos os objetos de cadeia do snapshot para um ficheiro JSON. Na ferramenta Memória , na secção Construtor , clique no novo botão Guardar tudo no ficheiro junto à (string) entrada.
A ferramenta Memória exporta um ficheiro JSON que contém todos os objetos de cadeia da área dinâmica para dados snapshot:
Veja também:
- Guarde e exporte cadeias de carateres de uma área dinâmica para dados snapshot para JSON em Instantâneos de área dinâmica para dados de registos com a ferramenta memória (tipo de criação de perfis "Heap snapshot").
Novos filtros para retentores na ferramenta memória
Nas versões anteriores do Microsoft Edge, os ciclos e os nós internos eram apresentados na secção Retentores de uma área dinâmica para dados snapshot. Para ajudar a simplificar o caminho de retenção, no Microsoft Edge 102, a secção Retentores na ferramenta Memória tem agora novos filtros para ocultar ciclos e ocultar nós internos no caminho de retenção.
Na secção Retentores , um nó ciclod é indicado por estar desativado.
Na imagem seguinte, no menu pendente Filtrar arestas , Ocultar ciclo não está selecionado, pelo que é apresentado um nó de ciclo (a cinzento):
Na imagem seguinte, no menu pendente Filtrar arestas , Ocultar ciclo está selecionado, pelo que o nó circular não é apresentado:
Os ciclos são nós que aparecem pelo menos duas vezes num caminho de retenção. Um aspeto de um nó é anterior no caminho de retenção e outros aspetos desse nó são posteriormente no caminho do retenção. Para libertar memória, é mais importante remover a ocorrência do nó que aparece primeiro no caminho do retenção. As segundas e potencialmente subsequentes aparições do nó continuam a ser apresentadas na secção Retentores .
Os nós internos são objetos específicos do V8 (o motor JavaScript no Microsoft Edge). Os nós internos também são apresentados na secção Retentores .
Veja também:
- Oculte os ciclos nos instantâneos da área dinâmica para dados de registos com a ferramenta memória (tipo de criação de perfis "Heap snapshot").
A descrição inspecionar elemento pode agora manter-se até que a dispense
Anteriormente, na ferramenta Elementos , a sobreposição do nó que selecionou só era apresentada ao pairar o rato quando utilizou a ferramenta Inspecionar (
). O design anterior era difícil de utilizar com uma lupa de ecrã ou outras tecnologias de apoio.
No Microsoft Edge 102, ao utilizar a ferramenta Inspecionar e ao mover-se pela página Web composta, pode manter a sobreposição Inspecionar atual apresentada. Prima sem soltar Ctrl+Alt (Windows, Linux) ou Ctrl+Opção (macOS) enquanto se desloca na página Web composta. A descrição existente e a sobreposição da cor da grelha da ferramenta Inspecionar permanecem apresentadas enquanto paira o cursor sobre diferentes partes da página Web composta:
Além disso, agora pode premir Ctrl para ocultar a sobreposição da ferramenta Inspecionar enquanto move o ponteiro do rato sobre a página Web composta.
Para obter o histórico desta funcionalidade no Chromium projeto open source, veja Issue 1316208 (Problema 1316208).
Veja também:
- Manter a descrição da ferramenta Inspecionar e a sobreposição da cor da grelha nas páginas Analisar com a ferramenta Inspecionar.
- Manter a descrição da ferramenta Inspecionar e a sobreposição da cor da grelha em Navigate DevTools com tecnologia de apoio.
Composição melhorada de menus pendentes, botões e ícones no modo de alto contraste
Nas versões anteriores do Microsoft Edge, os seguintes itens não foram compostos corretamente no modo de alto contraste:
- Menus pendentes na ferramenta Problemas .
- Botões na ferramenta Elementos Desanexados .
- A Barra de Atividade no Modo de Detalhe.
No Microsoft Edge 102, estes problemas foram corrigidos.
Os menus da ferramenta Problemas são apresentados corretamente no modo de alto contraste:
A IU da ferramenta Elementos Destacados é apresentada corretamente no modo de alto contraste:
A Barra de Atividade e o painel Vista Rápida (ao utilizar o Modo de Detalhe) são apresentados corretamente no modo de alto contraste:
Veja também:
Saiba mais sobre experimentações em DevTools a partir das Definições
Na páginaExperimentações de Definições>, cada experimentação tem agora um botão Ajuda (
):
Para obter mais informações sobre uma funcionalidade experimental, clique no botão Ajuda () correspondente. O botão Ajuda apresenta a secção relevante do artigo Funcionalidades experimentais no Microsoft Edge DevTools .
Melhor esquema das Definições de rede quando estreita
Em versões anteriores do Microsoft Edge, abrir as Definições de rede com o ícone de engrenagem na Ferramenta de rede sobrepor-se-ia quando as DevTools eram muito estreitas:
No Microsoft Edge 102, este problema foi corrigido. As definições individuais são agora apresentadas melhor em esquemas estreitos:
Veja também:
- Capture capturas de ecrã durante o carregamento de páginas na Referência de funcionalidades de rede, sobre as definições configuráveis da Ferramenta de rede.
Anúncios do projeto Chromium
O Microsoft Edge 102 também inclui as seguintes atualizações do projeto Chromium:
- Novos atalhos para imitar temas claros e escuros
- Segurança melhorada no separador Pré-visualização da Rede
- Recarregamento melhorado no ponto de interrupção
- Atualizações da consola
- Apresentar pseudo-elementos de realce herdados no painel Estilos
- [Experimental] Copiar alterações de CSS
- [Experimental] Escolher cor fora do browser