Novidades em DevTools (Microsoft Edge 102)
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 .
Dica
A conferência Microsoft Build 2022 foi nos dias 24 e 26 de maio. Saiba mais sobre novos recursos para depuração de memória, desempenho e produção em DevTools e novos recursos na plataforma Web para PWAs nos seguintes vídeos:
Extensão DevTools: novo navegador com suporte a emulação de dispositivo e modo e código-fonte
A extensão DevTools do Microsoft Edge para Visual Studio Code agora tem uma versão prévia do navegador que permite emular dispositivos diferentes. Clique no botão Emular recursos de mídia CSS (
) para visualizar o projeto atual em modos diferentes, como Escuro, Claro, Impressão e Alto Contraste:
Clique no botão Emular deficiências de visão (
) para testar facilmente a acessibilidade, como mostrar como é a página da Web com deficiências de visão desfocada ou visão colorida.
Outros recursos novos incluem uma maneira mais simples de alternar o espelhamento do CSS, que agora também dá suporte a vírgulas de origem. Isso significa que você pode depurar e modificar o CSS criado por Sass, React e outras abstraçãos no navegador e ver as alterações nos arquivos de origem.
Veja também:
- Emulação de dispositivo e estado
- Mapear o código processado para o código-fonte original para depuração
- Edição de espelho do CSS com o Sourcemaps: problemas conhecidos e comentários
Salvar todas as cadeias de caracteres de um heap instantâneo para JSON
No Microsoft Edge 102, ao fazer um heap instantâneo na ferramenta Memória, agora você pode exportar todos os objetos de cadeia de caracteres do instantâneo para um arquivo JSON. Na ferramenta Memória , na seção Construtor , clique no novo botão Salvar tudo para arquivar ao lado da (string) entrada.
A ferramenta Memória exporta um arquivo JSON que contém todos os objetos de cadeia de caracteres do heap instantâneo:
Veja também:
- Salve e exporte cadeias de caracteres de um heap instantâneo para JSON em Instantâneos de heap de registro usando a ferramenta Memória.
Novos filtros para retentores na ferramenta Memória
Em versões anteriores do Microsoft Edge, ciclos e nós internos foram exibidos na seção Retentores de um heap instantâneo. Para ajudar a simplificar o caminho do retentor, no Microsoft Edge 102, a seção Retentores na ferramenta Memória agora tem novos filtros para ocultar ciclos e ocultar nós internos no caminho do retentor.
Na seção Retentores , um nó ciclod é indicado por ser esmaecido.
Na imagem a seguir, no menu suspenso Filtrar bordas suspensas , Ocultar ciclo não está selecionado, portanto, um nó de ciclo (esmaecido) é exibido:
Na imagem a seguir, no menu suspenso Filtrar bordas suspensas , Ocultar ciclo está selecionado, de modo que o nó ciclod não seja exibido:
Os ciclos são nós que aparecem pelo menos duas vezes em um caminho de retenção. Uma aparição de um nó é anterior no caminho do retentor e outras aparências desse nó são posteriores no caminho do retentor. Para liberar a memória, é mais importante remover a ocorrência do nó que aparece primeiro no caminho do retentor. As segundas e potencialmente subsequentes aparições do nó ainda são exibidas na seção Retentores .
Nós internos são objetos específicos do V8 (o mecanismo JavaScript no Microsoft Edge). Nós internos também são exibidos na seção Retentores .
Veja também:
- Ocultar ciclos em Instantâneos de heap de registro usando a ferramenta Memória.
A dica de ferramenta Inspecionar elemento agora pode ser persistente até que você a descarte
Anteriormente, na ferramenta Elementos , a sobreposição para o nó selecionado só era exibida no mouse quando você usou a ferramenta Inspecionar (
). O design anterior era difícil de usar com uma lupa de tela ou outras tecnologias assistivas.
No Microsoft Edge 102, ao usar a ferramenta Inspecionar e mover a página da Web renderizada, você pode manter a sobreposição Inspecione atual exibida. Pressione e segure Ctrl+Alt (Windows, Linux) ou Ctrl+Option (macOS) enquanto você se movimenta na página da Web renderizada. A sobreposição de cores de ferramentas e grade existentes para a ferramenta Inspecionar permanece exibida enquanto você passa o mouse sobre diferentes partes da página da Web renderizada:
Além disso, agora você pode pressionar Ctrl para ocultar a sobreposição da ferramenta Inspecionar enquanto move o ponteiro do mouse sobre a página da Web renderizada.
Para obter o histórico desse recurso no Chromium projeto de código aberto, consulte Problema 1316208.
Veja também:
- Persistindo a dica de ferramenta de Inspeção e a sobreposição de cores da grade da ferramenta em Analisar páginas usando a ferramenta Inspecionar.
- Persistindo a dica de ferramenta de Inspeção e a sobreposição de cores da grade da ferramenta em Navegar DevTools com tecnologia assistiva.
Renderização aprimorada de menus suspensos, botões e ícones no modo de alto contraste
Nas versões anteriores do Microsoft Edge, os seguintes itens não renderizaram corretamente no modo de alto contraste:
- Menus suspensos na ferramenta Problemas .
- Botões na ferramenta Elementos Desapegados .
- A Barra de Atividades no Modo de Foco.
No Microsoft Edge 102, esses problemas foram corrigidos.
Os menus da ferramenta Problemas são exibidos corretamente no modo de alto contraste:
A interface do usuário da ferramenta Elementos Desapegados é exibida corretamente no modo de alto contraste:
O painel Barra de Atividades e Exibição Rápida (ao usar o Modo de Foco) são exibidos corretamente no modo de alto contraste:
Veja também:
Saiba mais sobre experimentos em DevTools em Configurações
Na páginaExperimentos de Configurações>, cada experimento agora tem um botão Ajuda (
):
Para obter mais informações sobre um recurso experimental, clique no botão Ajuda correspondente (). O botão Ajuda exibe a seção relevante dos recursos experimentais no artigo DevTools do Microsoft Edge .
Melhor layout das configurações de rede quando estreito
Nas versões anteriores do Microsoft Edge, abrir configurações de rede com o ícone de engrenagem na ferramenta Rede se sobrepõe quando os DevTools eram muito estreitos:
No Microsoft Edge 102, esse problema foi corrigido. As configurações individuais agora exibem melhor em layouts estreitos:
Veja também:
- Captura de tela durante a carga de página na referência de recursos de rede, sobre configurações configuráveis da ferramenta Rede.
Anúncios do projeto Chromium
O Microsoft Edge 102 também inclui as seguintes atualizações do projeto Chromium:
- Novos atalhos para emular temas claros e escuros
- Segurança aprimorada na guia Visualização de Rede
- Recarga aprimorada no ponto de interrupção
- Atualizações de console
- Exibir pseudo-elementos de destaque herdados no painel Estilos
- [Experimental] Copiar alterações do CSS
- [Experimental] Escolher cor fora do navegador