Compartilhar via


Novidades no DevTools (Microsoft Edge 111)

Para ver as funcionalidades mais recentes do Microsoft Edge DevTools e a 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 .

Vídeo: Novidades no DevTools 111

Imagem em miniatura do vídeo

Depuração remota dos controlos Microsoft Edge, PWAs e WebView2 em dispositivos HoloLens 2

A aplicação Ferramentas Remotas para Microsoft Edge está agora disponível em dispositivos HoloLens 2. A aplicação Ferramentas Remotas para Microsoft Edge é um plug-in para o Portal do Dispositivo Windows para Ambiente de Trabalho que permite a depuração remota para separadores nos controlos Microsoft Edge, Aplicações Web Progressivas (PWAs) e WebView2. Ao utilizar a depuração remota, pode executar conteúdo Web num dispositivo remoto e depurá-lo diretamente a partir do seu computador de desenvolvimento.

A aplicação Ferramentas Remotas para Microsoft Edge na Microsoft Store

Com a depuração remota ativada, já não precisa de abrir o DevTools em dispositivos HoloLens 2. Em vez disso, pode ligar ao dispositivo holoLens 2 remoto através do Portal do dispositivo, abrir a edge://inspect página e, em seguida, selecionar o destino (separador, PWA ou controlo WebView2) que pretende utilizar com o DevTools.

Para nos dar feedback sobre o fluxo de depuração remota do Microsoft Edge, deixe um comentário no Problema 136: A depuração remota de dispositivos HoloLens 2 está agora disponível com a versão mais recente da aplicação Ferramentas Remotas para Microsoft Edge.

Veja também:

A barra de ferramentas do Modo de Dispositivo tem controlos de emulação para temas e deficiências visuais

Nas versões anteriores do Microsoft Edge, para emular diferentes temas ou deficiências visuais, utilizaria a ferramenta Composição para, por exemplo, emular a Achromatopsia, que é quando o utilizador não consegue perceber qualquer cor.

No Microsoft Edge 111, agora pode aceder a estes controlos de emulação de deficiências visuais e temas diretamente a partir da barra de ferramentas modo de dispositivo , além de utilizar a ferramenta de Composição .

Por exemplo, para emular o modo de alto contraste e testar a forma como o conteúdo Web responde:

  1. Na barra de ferramentas Modo de Dispositivo , à direita da lista pendente Limitação , clique em Emular Funcionalidades de Multimédia (o ícone Selecionador de Cores, ícone Selecionador de Cores).
  2. Selecione forced-colors: active:

Emular o modo de alto contraste diretamente a partir da barra de ferramentas do Modo de Dispositivo

Também pode emular deficiências visuais ao clicar no ícone Olho junto ao ícone Selecionador de Cores. Por exemplo, para emular a visão desfocada:

  1. Clique em Emular Deficiência de Visão (o ícone de olho, Ícone de olho).
  2. Selecione Visão desfocada:

Emular a visão desfocada diretamente a partir da barra de ferramentas do Modo de Dispositivo

Veja também:

A ferramenta de desempenho desmínifica os nomes de ficheiros e funções ao criar perfis de código de produção

O Microsoft Edge 99 adicionou uma nova funcionalidade à ferramenta Desminificar. Esta funcionalidade Unminify aplicou os códigos de origem a um perfil que foi gravado com a ferramenta Desempenho e, em seguida, transferiu o perfil não identificado para o seu computador. A funcionalidade Desminificar está descrita em Utilizar os mapas de origem para apresentar nomes de funções originais em perfis de desempenho em Novidadesnas DevTools (Microsoft Edge 99).

No Microsoft Edge 111, esta funcionalidade foi removida porque a Ferramenta de desempenho fornece automaticamente os nomes de ficheiros e funções originais enquanto cria perfis de código de produção, desde que os mapas de origem sejam carregados. Os mapas de origem podem ser carregados de forma fiável e segura ao alocá-los no Servidor de Símbolos dos Artefactos do Azure.

Na imagem seguinte, verá nomes de funções minimizados no gráfico de chama ao criar perfis de código de produção:

Nomes de funções minimizados no gráfico de chama

Agora, no Microsoft Edge 111, a ferramenta Desempenho anula automaticamente os nomes das funções no gráfico de chama ao criar perfis de código de produção:

Nomes de funções não identificados no gráfico de chama

Veja também:

O painel Estilos é mais fácil de utilizar no Modo de Detalhe

Em versões anteriores do Microsoft Edge, no Modo de Detalhe, a ferramenta Elementos não forneceu uma forma fácil de aceder a todos os separadores no painel Estilos . No Microsoft Edge 111, este problema foi corrigido. Quando o painel Estilos tiver uma janela viewport estreita e não conseguir apresentar todos os outros separadores disponíveis, clique no ícone de expansor Mais separadores (ícone de expansor mais separadores):

O conjunto de separadores fechado no painel Estilos no Modo de Detalhe

Para apresentar apenas alguns dos separadores no painel Estilos , clique no ícone de controlo de colapso Mais separadores (ícone de controlo de colapso Mais separadores):

O conjunto de separadores expandido no painel Estilos no Modo de Detalhe

Veja também:

Copiar a tabela Estatísticas do Seletor da Ferramenta de desempenho para o Excel

O Microsoft Edge 109 introduziu a funcionalidade Estatísticas do Seletor na ferramenta Desempenho . Com a definição Ativar instrumentação de composição avançada (lenta) ativada na ferramenta Desempenho , selecionar qualquer evento Recalcular Estilos no gráfico de chama adiciona um separador Estatísticas do Seletor no painel inferior. Veja Depurar eventos recalcular estilo de execução prolongada com novas estatísticas do seletorem Novidades no DevTools (Microsoft Edge 109).

No Microsoft Edge 111, agora pode exportar a tabela Estatísticas do Seletor para cada evento Recalcular Estilos para um livro do Microsoft Excel. Em seguida, pode utilizar o Excel para fazer uma análise de desempenho do seletor agregado e identificar os seletores mais dispendiosos ao longo da duração do perfil.

Para exportar a tabela Estatísticas do Seletor :

  1. Clique na célula superior esquerda com o rato e, em seguida, arraste para selecionar para a célula inferior direita.
  2. Clique com o botão direito do rato na tabela e, em seguida, selecione Copiar. Em alternativa, prima Ctrl+C (Windows, Linux) ou Comando+C (macOS).
  3. Cole a tabela no Excel.

Selecionar toda a tabela Estatísticas do Seletor para copiar e colar

Veja também:

No Modo de Detalhe, a tecnologia de apoio anuncia quando move uma ferramenta para a Vista Rápida

Em versões anteriores do Microsoft Edge, a tecnologia de apoio, como leitores de ecrã, não anunciou a confirmação ao mover uma ferramenta da Barra de Atividade para a barra de ferramentas vista rápida . No Microsoft Edge 111, este problema foi corrigido. Os leitores de ecrã anunciam agora "Rede adicionada com êxito à Vista Rápida" quando move a ferramenta Rede da Barra de Atividade para a barra de ferramentas vista rápida :

Mover a ferramenta Rede da Barra de Atividade para a barra de ferramentas da Vista Rápida

Veja também:

Anúncios do projeto Chromium

O Microsoft Edge 111 também inclui as seguintes atualizações do projeto Chromium: