Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
Esses são os recursos mais recentes na versão estável do Microsoft Edge DevTools.
Dica
A conferência Microsoft Build 2022 foi de 24 a 26 de maio. Saiba mais sobre os novos recursos de memória, desempenho e depuração de produção no DevTools e os novos recursos na plataforma Web para PWAs nos seguintes vídeos:
Vídeo: Microsoft Edge | Novidades no DevTools 102
Extensão DevTools: novo navegador com emulação de dispositivo e modo e suporte ao mapa de origem
A extensão DevTools do Microsoft Edge para o Visual Studio Code agora tem uma visualização do navegador que permite emular diferentes dispositivos. Clique no novo botão Emular recursos de mídia CSS (
) para visualizar o projeto atual em diferentes modos, como Escuro, Claro, Impressão e Alto Contraste:
Clique no novo botão Emular deficiências visuais (
) para testar facilmente a acessibilidade, como mostrar a aparência da página da Web com visão turva ou deficiências visuais de cores.
Outros novos recursos incluem uma maneira mais simples de alternar o espelhamento CSS, que agora também dá suporte a mapas de origem. Isso significa que você pode depurar e modificar CSS criados por Sass, React e outras abstrações ao vivo 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
- CSS Mirror Editing com Sourcemaps: Problemas conhecidos e comentários
Salvar todas as cadeias de caracteres de um snapshot de heap em JSON
No Microsoft Edge 102, ao tirar um snapshot de heap na ferramenta Memória, agora você pode exportar todos os objetos de cadeia de caracteres do snapshot para um arquivo JSON. Na ferramenta Memória , na seção Construtor , clique no novo botão Salvar tudo no arquivo ao lado da (string) entrada.
A ferramenta Memória exporta um arquivo JSON que contém todos os objetos de cadeia de caracteres do snapshot de heap:
Veja também:
- Salvar e exportar strings de um snapshot de heap para JSON em Registrar snapshots de heap usando a ferramenta Memória (tipo de criação de perfil "Heap snapshot")
Novos filtros para responsáveis de retenção na ferramenta Memória
Em versões anteriores do Microsoft Edge, os ciclos e os nós internos eram exibidos na seção Retentores de um snapshot de heap. Para ajudar a simplificar o caminho do responsável pelo retenção, 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 Responsáveis pela retenção , um nó cíclico é indicado por estar esmaecido.
Na imagem a seguir, no menu suspenso Filtrar bordas , Ocultar ciclo não está selecionado, portanto, um nó cíclico (esmaecido) é exibido:
Na imagem a seguir, no menu suspenso Filtrar bordas , Ocultar ciclo é selecionado, de modo que o nó cíclico não é exibido:
Ciclos são nós que aparecem pelo menos duas vezes em um caminho de retenção. Uma aparência de um nó é anterior no caminho do responsável pela retenção e outras aparências desse nó são posteriores no caminho do responsável pelo retenção. Para liberar memória, é mais importante remover a ocorrência do nó que aparece primeiro no caminho do retentor. A segunda e potencialmente subsequentes aparições do nó ainda são exibidas na seção Responsáveis .
Os nós internos são objetos específicos do V8 (o mecanismo JavaScript no Microsoft Edge). Os nós internos também são exibidos na seção Retentores .
Veja também:
- Ocultar ciclos em Registre instantâneos de heap usando a ferramenta Memória (tipo de criação de perfil "Heap snapshot")
A dica de ferramenta Inspecionar elemento agora pode ser mantida até que você a descarte
Anteriormente, na ferramenta Elementos , a sobreposição do nó selecionado só era exibida ao focalizar quando você usava a ferramenta Inspecionar (
). O design anterior era difícil de usar com uma lupa de tela ou outras tecnologias adaptativas.
No Microsoft Edge 102, ao usar a ferramenta Inspecionar e mover-se pela página da Web renderizada, você pode manter a sobreposição Inspecionar atual exibida. Pressione e segure Ctrl+Alt (Windows, Linux) ou Ctrl+Option (macOS) enquanto você se move na página da Web renderizada. A dica de ferramenta existente e a sobreposição de cor da grade para a ferramenta Inspecionar permanecem exibidas 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 o Problema 1316208.
Veja também:
- Persistindo a dica de ferramenta Inspecionar e a sobreposição de cor da grade em Analisar páginas usando a ferramenta Inspecionar.
- Persistindo a dica de ferramenta Inspecionar e a sobreposição de cor da grade no Navigate DevTools com tecnologia adaptativa.
Renderização aprimorada de menus suspensos, botões e ícones no modo de alto contraste
Em versões anteriores do Microsoft Edge, os seguintes itens não eram renderizados corretamente no modo de alto contraste:
- Menus suspensos na ferramenta Problemas .
- Botões na ferramenta Elementos Desanexados .
- 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 Desanexados é exibida corretamente no modo de alto contraste:
A Barra de Atividades e o painel Visualizaçã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 no DevTools em Configurações
Na página Configurações>Experimentos , 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 do artigo Recursos experimentais no DevTools do Microsoft Edge .
Melhor layout das configurações de rede quando restrito
Em versões anteriores do Microsoft Edge, abrir as configurações de Rede com o ícone de engrenagem na ferramenta Rede se sobrepunha quando o DevTools era muito estreito:
No Microsoft Edge 102, esse problema foi corrigido. As configurações individuais agora são exibidas melhor em layouts estreitos:
Veja também:
- Capture capturas de tela durante o carregamento da página em Referência de recursos de rede, sobre as 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
- Recarregamento aprimorado no ponto de interrupção
- Atualizações do console
- Exibir pseudoelementos de realce herdados no painel Estilos
- [Experimental] Copiar alterações CSS
- [Experimental] Escolhendo a cor fora do navegador