Funcionalidades experimentais no Microsoft Edge DevTools

As DevTools do Microsoft Edge fornecem acesso a funcionalidades experimentais que ainda estão em desenvolvimento. Este artigo lista e descreve as funcionalidades experimentais que se encontram em:

• A versão mais recente do canal de pré-visualização Canary do Microsoft Edge.
• A versão mais recente do Lançamento estável do Microsoft Edge.

Todos os canais do Microsoft Edge têm funcionalidades experimentais. Pode obter as funcionalidades experimentais mais recentes com o canal Microsoft Edge Canary. Para ver a lista completa de experimentações que estão disponíveis na sua versão do Microsoft Edge, consulte a páginaExperiências de Definições> em DevTools.

Estas experimentações podem ser instáveis ou pouco fiáveis e podem exigir que reinicie as DevTools.

Ativar ou desativar uma experimentação

As funcionalidades experimentais estão constantemente a ser atualizadas e podem causar problemas de desempenho. Esta é uma das razões pelas quais poderá querer desativar uma experimentação.

Para ativar ou desativar uma experimentação no Microsoft Edge:

1. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

2. Em DevTools, na barra de ferramentas principal, clique no botão Personalizar e controlar DevTools ( e, em seguida, clique no botão Definições (). Em alternativa, prima Shift+?.

3. No lado esquerdo do painel Definições , selecione a página Experimentações :

   

4. Selecione ou desmarque a caixa de verificação de uma experimentação. Algumas experimentações estão selecionadas por predefinição.

5. Clique em Fechar () no canto superior direito das Definições de DevTools.

6. Clique no botão Recarregar DevTools .

Restaurar predefinições para as quais as experimentações estão selecionadas

Para restaurar as predefinições para as quais as funcionalidades experimentais estão ativadas:

1. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

2. Em DevTools, na barra de ferramentas principal, clique no botão Definições (). Em alternativa, prima Shift+?. O painel Definições é aberto, com a página Preferências selecionada.

3. Na parte inferior da página Preferências, clique no botão Restaurar predefinições e atualizar e, em seguida, clique em Fechar ().

Filtrar as experimentações

Pode filtrar as funcionalidades experimentais por texto incluído no título.

1. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

2. Em DevTools, na barra de ferramentas principal, clique no botão Definições (). Em alternativa, prima Shift+?. O painel Definições é aberto, com a página Preferências selecionada.

3. No lado esquerdo do painel Definições , selecione a página Experimentações .

4. Clique na caixa de texto Filtro e introduza texto, como linha do tempo. À medida que escreve, apenas as caixas de verificação correspondentes são apresentadas na página Experimentações .

5. Para terminar a filtragem, desmarque a caixa de texto Filtro .

Fornecer comentários sobre as experimentações

Estamos ansiosos para ouvir o seu feedback sobre as funcionalidades experimentais. Para partilhar feedback connosco, contacte a equipa do Microsoft Edge DevTools.

Lista de experimentações

As caixas de verificação de experimentações que aparecem na versão mais recente do canal de pré-visualização Canary do Microsoft Edge estão listadas abaixo. A versão Estável também é notada, na sequência da adição ou remoção de caixas de verificação no Canary.

Capturar pilhas de criação de nós

Para capturar rastreios de pilha javaScript quando os nós DOM são adicionados ao DOM no runtime, ative esta experimentação. Esta experimentação adiciona o separador Rastreio de Pilha na ferramenta Elementos , agrupado com o separador Estilos :

Depois de ativar a experimentação, pode testá-la da seguinte forma:

1. Numa nova janela ou separador, abra uma página Web que cria nós DOM dinamicamente através de JavaScript, como a aplicação de demonstração TODO.
2. Na página de demonstração composta, crie um novo item de tarefa.
3. Na página de demonstração composta, clique com o botão direito do rato no novo item de tarefa e, em seguida, selecione Inspecionar. O DevTools é aberto e mostra a ferramenta Elementos .
4. Clique no separador Rastreio de Pilha , que está agrupado com o separador Estilos .

Consulte também:

• Introdução à exibição e alteração do DOM

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Monitor de Protocolos

Disponibiliza a ferramenta de monitorização de protocolos em DevTools:

A ferramenta DevTools apresenta as mensagens enviadas e recebidas pelas DevTools para depurar a página inspecionada. A DevTools comunica com a página inspecionada através do Protocolo CDP (Chrome DevTools Protocol).

Para selecionar esta caixa de verificação e, em seguida, abrir a ferramenta Monitor de protocolo :

1. Selecione esta caixa de verificação Monitor de Protocolos conforme descrito em Ativar ou desativar uma experimentação acima.

2. Na Vista Rápida na parte inferior de DevTools, clique no botão Mais ferramentas (+) e, em seguida, selecione Monitor de protocolo.

   Em alternativa, abra o Menu de Comandos, como premir Ctrl+Shift+P (Windows/Linux) ou Comando+Shift+P (macOS) e, em seguida, escreva protocolo na caixa de texto. Em seguida, selecione Mostrar Monitor de protocolo.

   A ferramenta DevTools é apresentada no painel Vista Rápida na parte inferior de DevTools.

Consulte também:

• Utilizar o Protocolo CDP (Chrome DevTools Protocol) em aplicações WebView2
• [Experimental] Monitor de protocolo em Novidades nas DevTools (Chrome 92).

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Mostrar a opção para expor os internos em instantâneos de área dinâmica para dados

novo a partir do Microsoft Edge 105

Se pretende apresentar uma caixa de verificação para expor internos em instantâneos de área dinâmica para dados na ferramenta Memória .

Consulte também:

• Registar instantâneos de área dinâmica para dados com a ferramenta memória (tipo de criação de perfis "Heap snapshot")

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Ativar o novo Algoritmo de Contraste Perceptual Avançado (APCA) ao substituir a proporção de contraste anterior e as diretrizes AA/AAA

O APCA (Algoritmo Avançado de Percepção de Contraste) substitui as diretrizes AA/AAA de índice de contraste no Seletor de Cores. O Seletor de Cores é usado na guia Estilos na ferramenta Elementos.

O APCA é uma nova maneira de calcular o contraste. Ele se baseia na pesquisa moderna sobre a percepção de cores. Comparada com as diretrizes de AA/AAA, a APCA depende mais do contexto. O contraste é calculado com base nas seguintes propriedades do texto, cor e contexto.

• Propriedades da fonte do texto que incluem a peso e o tamanho da fonte.
• Propriedades da cor que incluem o contraste percebido entre o texto e o plano de fundo.
• Propriedades do contexto que incluem luz ambiente, arredores e objetivo pretendido.

Consulte também:

• Novo cálculo de contraste de cor – Algoritmo de Contraste Perceptual Avançado (APCA) em Novidades no DevTools (Microsoft Edge 89).
• Altere as cores com o Seletor de Cores em Referência de recursos CSS.
• Teste o contraste da cor do texto usando o Seletor de Cor

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Ativar a vista de árvore de acessibilidade completa no painel Elementos

Adiciona um botão Mudar para a Vista de Árvore de Acessibilidade na ferramenta Elementos que alterna entre a árvore DOM e a árvore de acessibilidade. A etiqueta do botão alterna para Mudar para a vista árvore DOM.

Se esta caixa de verificação Experimentação estiver desmarcada, a ferramenta Elementos não tem o botão:

Se esta caixa de verificação Experimentação estiver selecionada, a ferramenta Elementos tem o botão:

A vista Árvore de Acessibilidade na ferramenta Elementos :

Consulte também:

• Teste a acessibilidade usando a guia de Acessibilidade
• Vista de árvore de acessibilidade completa na ferramenta Elementos em Novidades no DevTools (Microsoft Edge 90).

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Ativar o novo editor de tipos de letra no separador Estilos

Pode utilizar o Visual Font Editor para editar tipos de letra. Utilize-o para definir tipos de letra e características do tipo de letra. O Visual Font Editor ajuda-o a fazer o seguinte:

• Alternar entre unidades para propriedades de fonte diferentes
• Alternar entre palavras-chave para propriedades de fonte diferentes
• Converter unidades
• Gerar código CSS preciso

Para utilizar o Visual Font Editor:

1. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

2. Em DevTools, na barra de ferramentas principal, selecione o separador Elementos . Se o separador Elementos não estiver visível, clique no botão Mais separadores () ou, em alternativa, no botão Mais Ferramentas ().

3. No separador Estilos , selecione o ícone Editor de Tipos de Letra .

   

Alguns canais do browser têm a etiqueta de caixa de verificação Ativar nova ferramenta Editor de Tipos de Letra no painel Estilos.

Consulte também:

• Editar estilos e configurações de fonte CSS no painel Estilos

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Ativar relatórios de problemas de contraste automático através do painel Problemas

Ativa o relatório de problemas de contraste automático na ferramenta Problemas .

Consulte também:

• Encontrar e corrigir problemas usando a ferramenta Problemas

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Ativar funcionalidades experimentais de cookies

Ativa funcionalidades experimentais de cookies.

Consulte também:

• Exibir, editar e excluir cookies

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Agrupar origens em árvores criadas e implementadas

novo a partir do Microsoft Edge 104

Controla se pretende agrupar recursos em árvores Criadas e Implementadas separadas no separador Página da ferramenta Origens . Esta funcionalidade na ferramenta Origens permite-lhe agrupar ficheiros de origem em duas pastas, consoante estes sejam:

• Ficheiros de origem originais (criados, ou seja, ficheiros com as suas edições locais).
• Ficheiros de produção (ficheiros implementados que estão no servidor Web após compilar e agrupar os ficheiros de origem).

Consulte também:

• Utilizar o separador Página para explorar os recursos que constroem a página Web atual na descrição geral da ferramenta Origens.

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Ocultar código ignorado na vista de árvore Origens

novo a partir do Microsoft Edge 106

Na vista de árvore da ferramenta Origens , omite o código incluído na lista Ignorar.

Consulte também:

• Adicionar scripts de conteúdo à Lista Ignorar
• Listagem de ignorar melhorada
• Definição de lista Ignorar melhorada

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Painel de desempenho: mostrar fluxos de distribuição e processamento pós-envio

novo a partir do Microsoft Edge 124

Esta experimentação melhora a secção Principal da Ferramenta de desempenho para ajudá-lo a identificar postMessage rapidamente os eventos e processadores, ao distinguir eventos que são acionados postMessage pelo método de outros eventos que são apresentados na ferramenta Desempenho. Esta experimentação ajuda-o a investigar problemas de desempenho relacionados com a publicação de mensagens em vários threads de uma aplicação, para ver mensagens entre janelas, iframes e trabalhadores dedicados.

Sem esta experimentação, os eventos que são acionados através da distribuição e processamento de mensagens entre threads de uma aplicação aparecem como eventos genéricos de chamada de função de scripting. Com esta experimentação ativada:

• postMessage os eventos de distribuição são apresentados como Schedule postMessage.
• postMessage os eventos do processador são apresentados como Na Mensagem:

Esta experimentação ajuda-o a investigar quando ocorreu uma postMessage chamada e durante quanto tempo a mensagem foi colocada em fila antes de o postMessage processador começar. Os eventos de distribuição estão ligados a eventos do processador por setas do iniciador que são apresentadas quando clica em qualquer um dos tipos de evento:

Consulte também:

• Veja mensagens entre janelas, iframes e funções de trabalho dedicadas na Referência de funcionalidades de desempenho.
• Referência de evento de gravação de desempenho
• demonstração de Eventos de Rastreio postMessage (composta)
• demonstração de Eventos de Rastreio postMessage (código fonte)
• Os processadores e eventos postMessage distinguem-se de outros eventos em Novidades no DevTools (Microsoft Edge 124).

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Log DevTools uncaught exceptions to Console

Controla se pretende registar exceções de DevTools não identificadas na ferramenta Consola .

Consulte também:

• Visão geral do console

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Enable webhint

Webhint é uma ferramenta de código aberto que fornece comentários em tempo real para sites e páginas da Web locais. O tipo de feedback fornecido pelo webhint inclui:

• Acessibilidade
• Compatibilidade entre browsers
• Segurança
• Desempenho
• Aplicativos Web Progressivas (PWAs)
• Outros problemas comuns de desenvolvimento Web

A experimentação webhint apresenta feedback webhint na ferramenta Problemas . Selecione um problema para apresentar documentação sobre a solução e uma lista dos recursos afetados no seu site. Selecione uma ligação de recurso para abrir a ferramenta relevante, como Rede, Origens ou Elementos:

Consulte também:

• Encontrar e corrigir problemas usando a ferramenta Problemas

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Mostrar problemas em Elementos

Apresenta erros de sintaxe como sublinhados ondulados em nós DOM na ferramenta Elementos .

Consulte também:

• Os sublinhados ondulados realçam problemas de código e melhoramentos na ferramenta Elementos em Novidades no DevTools (Microsoft Edge 91).

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Arquivos de código aberto em Visual Studio Code

A experimentação Ficheiros open source no Visual Studio Code substitui o editor de código da ferramenta Origens por Visual Studio Code, para editar ficheiros locais. Quando ativa esta experimentação, as Ferramentas de Programação detetam quando edita um ficheiro local e pede-lhe para selecionar uma pasta a utilizar como área de trabalho.

Quando seleciona uma pasta a utilizar como área de trabalho, selecionar qualquer ligação para um ficheiro no DevTools abre o ficheiro no Visual Studio Code. Em versões anteriores do Microsoft Edge, esta ação abriu o ficheiro no editor de código da ferramenta Origens em DevTools.

Todas as edições que fizer no DevTools alteram agora o ficheiro no disco rígido e sincronizam em direto com Visual Studio Code.

Consulte também:

• Abrir ficheiros de origem no Visual Studio Code - configurar a área de trabalho.

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Ativar o CSS Copilot

Permite utilizar o Copilot na Barra Lateral do Microsoft Edge para explicar elementos HTML e estilos CSS para o ajudar a compreender melhor um elemento específico ou regra de estilo que é apresentada na ferramenta Elementos . Para perguntar ao Copilot sobre um elemento ou regra de estilo, clique no botão Copilot junto ao mesmo e, em seguida, faça perguntas de seguimento.

Esta experimentação não está disponível quando a Barra Lateral está desativada.

Consulte também:

• Inspecionar, editar e depurar HTML e CSS com a ferramenta Elementos

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Perfil de área dinâmica para dados

Controla se pretende atualizar em direto o perfil de área dinâmica para dados.

Consulte também:

• Registar instantâneos de área dinâmica para dados com a ferramenta memória (tipo de criação de perfis "Heap snapshot")

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Amostragem de linha do tempo de perfis de área dinâmica para dados

Controla se pretende mostrar o gerador de perfis de área dinâmica para dados de amostragem linha do tempo na ferramenta Desempenho.

Consulte também:

• Analisar o desempenho do runtime (tutorial)
• Registar instantâneos de área dinâmica para dados com a ferramenta memória (tipo de criação de perfis "Heap snapshot")

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Painel desempenho: controlo de invalidação

Adiciona uma secção Invalidações para eventos Recalcular Estilo no separador Resumo da ferramenta Desempenho . A secção Invalidations (Invalidações ) fornece informações sobre a causa principal de um evento Recalcular Estilo , o que pode ser útil ao investigar eventos de Estilo Recalcular de execução prolongada que estão a causar problemas de desempenho.

A secção Invalidations (Invalidações ) lista os nós DOM que foram invalidados como resultado de uma alteração na página Web, como uma mutação DOM, e que o motor do browser teve de reestilocar durante o evento Recalcular Estilo .

Consulte também:

• Analisar o desempenho do runtime (tutorial)

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Painel de desempenho: mostrar todos os eventos

Controla se pretende mostrar todos os eventos na ferramenta Desempenho .

Consulte também:

• Analisar o desempenho do runtime (tutorial)

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Painel de desempenho: estatísticas de chamadas de runtime V8

Na ferramenta Desempenho , apresenta estatísticas de chamadas de runtime do motor de browser JavaScript V8.

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Painel de desempenho: Ativar o modo de depuração (detalhes do evento de rastreio, etc.)

novo a partir do Microsoft Edge 128

Adiciona uma secção Evento de Rastreio ao separador Resumo da ferramenta Desempenho . A secção Evento de Rastreio é apresentada quando seleciona um evento num rastreio de desempenho registado. A secção Evento de Rastreio apresenta informações de depuração sobre o evento de rastreio selecionado, como o respetivo nome e duração.

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Consulte também:

• Partilhar um rastreio de desempenho com mais dados
• Referência de recursos de desempenho
• Referência de evento de gravação de desempenho

Ativar pontos de interrupção de instrumentação

Se parar nos pontos de interrupção de teste. Esta experimentação torna os pontos de interrupção mais fiáveis.

Consulte também:

• Ativar a sincronização em pontos de interrupção de instrumentação
• Quando os ficheiros de origem são carregados pela primeira vez, os pontos de interrupção podem não ser acionados

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Utilizar informações de âmbito de mapas de origem

novo a partir do Microsoft Edge 118

Se pretende utilizar informações de âmbito de mapas de origem.

Consulte também:

• Mapear o código processado para o código-fonte original, para depuração
• Mapear código minificado para o código fonte para mostrar código legível na descrição geral da ferramenta Origens.

Status:

• Esta caixa de verificação está presente no Microsoft Edge Canary 144.
• Esta caixa de verificação está presente no Microsoft Edge Stable 142.

Consulte também

• Notas de versão da plataforma Web do Microsoft Edge