Novidades no DevTools (Microsoft Edge 96)

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 .

Vídeo: Microsoft Edge | Novidades no DevTools 96

Nova IU do DevTools disponível (em pré-visualização)

A equipa de DevTools do Microsoft Edge está a experimentar uma nova IU de DevTools: Modo de Detalhe. O Modo de Detalhe reduz as distrações e a confusão com um esquema mais moderno e simplificado. A nova Barra de Atividade permite-lhe afixar as suas ferramentas favoritas numa barra de ferramentas horizontal ou vertical para utilizar o espaço no ecrã de forma mais eficiente.

Para experimentar esta nova IU na versão 96 do Microsoft Edge, selecione Definições () >Modo de Detalhe de Experimentações>.

A partir da versão 96 do Microsoft Edge, a caixa de verificação da experimentação tem o nome Modo de Detalhe em vez de Modo de Detalhe e Descrições de DevTools.

Esta IU ainda está em desenvolvimento e pode mudar em versões futuras do Microsoft Edge. Estamos ansiosos para ouvir o seu feedback sobre esta nova IU de DevTools. Envie-nos o seu feedback tweetando @EdgeDevTools. Em alternativa, com a experimentação modo de detalhe ativada, na parte inferior da Barra de Atividade, selecione Ajuda () >Feedback, para mostrar a janela Enviar comentários .

Veja também:

• DevTools: IU do Modo de Detalhe no MSEdgeExplainers repositório.

A consola pode aparecer novamente nos painéis superior e inferior

Desde a versão 87 do Microsoft Edge, conseguiu mover qualquer ferramenta entre os painéis superior e inferior, incluindo a ferramenta Consola. No entanto, ouvimos os programadores que mover a ferramenta Consola repetidamente foi complicado. A partir da versão 96 do Microsoft Edge, a experiência predefinida para a ferramenta Consola foi restaurada, permitindo-lhe alternar rapidamente entre uma vista de ecrã inteiro da Consola (no painel superior) e uma vista de ecrã dividido (com a Consola apresentada no painel inferior), sem mover a ferramenta Consola.

A Consola pode ser aberta na Gaveta (agora Vista Rápida) na parte inferior das DevTools, juntamente com outra ferramenta:

Quando a Consola está selecionada no painel superior, o painel inferior é minimizado automaticamente se o painel inferior apresentar a Consola:

Se quiser permitir apenas que a ferramenta Consola abra num único local, pode configurar o comportamento da Consola:

1. Na barra de ferramentas main ou na barra de ferramentas Gaveta, clique com o botão direito do rato no separador Consola e, em seguida, selecione Configurar consola. A páginaPreferências de Definições> é apresentada.

2. Na secção Consola, desmarque a caixa de verificação Mostrar separador Consola main painel e gaveta e, em seguida, clique em Fechar (x).

Veja também:

• Ferramentas da Barra de Atividade vs. Ferramentas de Vista Rápida em Acerca da lista de ferramentas
• Mova as ferramentas entre os painéis superior e inferior em Novidades nas DevTools (Microsoft Edge 87).

Extensão de Visual Studio Code de DevTools do Microsoft Edge

Para obter informações gerais sobre esta extensão, consulte Extensão DevTools do Microsoft Edge para Visual Studio Code.

Apresentar o projeto Web no editor e simular diferentes dispositivos

A extensão Microsoft Edge DevTools para Visual Studio Code agora inclui um screencast ancorável e a emulação do dispositivo:

Pode ver o seu projeto Web num separador dedicado dentro de Visual Studio Code e também simular vários dispositivos:

Para obter detalhes sobre a emulação do dispositivo, veja Emulação de dispositivos e estados.

Relatório de problemas inline em direto

Agora, a extensão também apresenta relatórios de problemas inline e dinâmicos. Em vez de descobrir os problemas numa ferramenta separada, Visual Studio Code realça os problemas no código fonte e comunica-os ao vivo enquanto introduz o código:

Para obter detalhes, veja Análise de problemas inline e em direto.

A ferramenta Origens notifica-o agora quando os códigos de origem não podem ser carregados

No Microsoft Edge versão 96, a ferramenta Origens fornece agora várias indicações na IU quando as DevTools não conseguem carregar os seus esquemas de origem. No separador Página no painel Navegador da ferramenta Origens , os ficheiros que as DevTools não conseguem carregar têm um ícone de aviso em vez do ícone de ficheiro.

Selecionar um ficheiro com o ícone de aviso abre o ficheiro na ferramenta Origens com uma barra de informações a indicar que o DevTools não conseguiu obter o mapa de origem corretamente do servidor ou não conseguiu analisar corretamente o mapa de origem:

Na barra de informações, pode saber mais sobre o problema ao selecionar o botão Abrir em Problemas . Em seguida, a ferramenta Problemas é aberta na Gaveta (agora painel Vista Rápida) na parte inferior das DevTools e fornece informações sobre como resolve o problema e carregar o seu sourcemap corretamente nas DevTools:

Para impedir que a barra de informações sobre os esquemas de origem desorganize a ferramenta Origens , selecione o botão Não mostrar novamente . Para evitar que os problemas relacionados com os esquemas de origem desorganizem a ferramenta Problemas, desmarque a caixa de verificação Incluir problemas de terceiros na ferramenta Problemas .

Veja também:

• Mapear o código processado para o código fonte original, para depuração

Abrir ficheiros de origem no Visual Studio Code agora integra-se melhor com a ferramenta Origens

Em versões anteriores do Microsoft Edge, ativar os ficheiros Open source no Visual Studio Code experimentação teve um comportamento inesperado quando já estava a utilizar a ferramenta Origens nas DevTools. Definir pontos de interrupção direcioná-lo-ia para Visual Studio Code ou para documentação para configurar a experimentação corretamente.

Na versão 96 do Microsoft Edge, a experimentação Ficheiros open source no Visual Studio Code agora integra-se melhor com a ferramenta Origens.

• Se a ferramenta Origens estiver aberta e, em seguida, ativar os ficheiros Open source no Visual Studio Code experimentação, definir pontos de interrupção ou abrir ficheiros agora abre a ferramenta Origens, em vez de direcioná-lo para Visual Studio Code ou para documentação para configurar a experimentação corretamente.

  

• Tal como acontece com as versões anteriores do Microsoft Edge, se a ferramenta Origens não estiver aberta no DevTools e, em seguida, ativar os ficheiros Open source no Visual Studio Code experimentação, definir pontos de interrupção ou abrir ficheiros a partir de ferramentas que não sejam a ferramenta Origens abre o ficheiro no Visual Studio Code.

Veja também:

• Abrir ficheiros de origem no Visual Studio Code - como o DevTools se integra com Visual Studio Code.

Selecionar o ícone de triângulo pendente na IU de DevTools abre agora o menu

Em versões anteriores do Microsoft Edge DevTools, a seleção do ícone de triângulo junto a um menu pendente não apresentou o menu pendente. Para abrir o menu pendente, teve de clicar no item de menu selecionado atualmente à esquerda do ícone de triângulo, como Sem limitação:

No Microsoft Edge versão 96, este problema foi corrigido. Selecionar o ícone de triângulo para qualquer menu pendente no DevTools agora abre o menu pendente:

Observação

Partes desta página são modificações baseadas no trabalho criado e partilhado pela Google e utilizado de acordo com os termos descritos na Licença Internacional Creative Commons Attribution 4.0. A página original para anúncios do projeto Chromium é What's New in DevTools (Chrome 96) e é da autoria de Jecelyn Yeen.

Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.