Novidades em DevTools (Microsoft Edge 96)
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 .
Nova interface do usuário do DevTools disponível (em versão prévia)
A equipe do Microsoft Edge DevTools está experimentando uma nova interface do usuário de DevTools: Modo de Foco. O Modo de Foco reduz distrações e desordem com um layout mais moderno e simplificado. A nova Barra de Atividades permite fixar suas ferramentas favoritas em uma barra de ferramentas horizontal ou vertical para usar o espaço de tela com mais eficiência.
Para testar essa nova interface do usuário no Microsoft Edge versão 96, selecione Configurações (
> do > DevTools).
Começando com o Microsoft Edge versão 96, a caixa de seleção do experimento é rotulada como Modo de Foco em vez de Modo de Foco e Dicas de Ferramentas de DevTools.
Essa interface do usuário ainda está em desenvolvimento e pode mudar em versões futuras do Microsoft Edge. Estamos ansiosos para ouvir seus comentários sobre essa nova interface do usuário do DevTools. Envie-nos seus comentários tuitando @EdgeDevTools. Ou, com o experimento modo de foco ativado, na parte inferior da Barra de Atividades, selecione Ajuda (
) >para mostrar a janela Enviar comentários .
Veja também:
- DevTools: interface do usuário do modo de foco no
MSEdgeExplainersrepositório.
O console pode aparecer mais uma vez nos painéis superior e inferior
Desde a versão 87 do Microsoft Edge, você pode mover qualquer ferramenta entre os painéis superior e inferior, incluindo a ferramenta Console. No entanto, ouvimos de desenvolvedores que mover a ferramenta Console repetidamente era complicado. A partir do Microsoft Edge versão 96, a experiência padrão para a ferramenta Console foi restaurada, permitindo alternar rapidamente entre uma exibição de tela inteira do Console (no painel superior) e uma exibição de tela dividida (com o Console exibido no painel inferior), sem mover a ferramenta Console.
O Console pode ser aberto no painel inferior (a Gaveta) enquanto outra ferramenta está aberta:
Quando Console é selecionado no painel superior, o painel inferior é minimizado automaticamente, se o painel inferior estiver exibindo o Console:
Se você quiser permitir apenas que a ferramenta Console seja aberta em um único lugar, você poderá configurar o comportamento do Console:
Na barra de ferramentas main ou na barra de ferramentas Gaveta, clique com o botão direito do mouse na guia Console e selecione Configurar console. A páginaPreferências de Configurações> é exibida.
Na seção Console, desmarque a guia Mostrar Console da caixa de seleção em main painel e gaveta e clique emFechar (x).
Veja também:
- Ferramentas da Barra de Atividades vs. Ferramentas de Exibição Rápida em Sobre a lista de ferramentas
- Mova ferramentas entre painéis superior e inferior em Novidades em DevTools (Microsoft Edge 87).
Extensão de Visual Studio Code do Microsoft Edge DevTools
Para obter informações gerais sobre essa extensão, consulte a extensão DevTools do Microsoft Edge para Visual Studio Code.
Exibir seu projeto Web dentro do editor e simular diferentes dispositivos
A extensão Microsoft Edge DevTools for Visual Studio Code agora apresenta um screencast e uma emulação de dispositivo encaixe:
Você pode ver seu projeto Web em uma guia dedicada dentro de Visual Studio Code e também simular vários dispositivos:
Para obter detalhes sobre a emulação do dispositivo, consulte Emulação de dispositivo e estado.
Relatórios de problemas ao vivo e embutidos
A extensão também agora apresenta relatórios de problemas dinâmicos e embutidos. Em vez de descobrir problemas em uma ferramenta separada, Visual Studio Code realça os problemas no código-fonte e os relata ao vivo enquanto você insere seu código:
Para obter detalhes, consulte Análise de problemas inline e live.
A ferramenta De origem agora notifica você quando os guias de origem não podem ser carregados
No Microsoft Edge versão 96, a ferramenta Sources agora fornece várias indicações na interface do usuário quando o DevTools não pode carregar seus guias de origem. Na guia Página no painel Navegador na ferramenta Fontes , arquivos que o DevTools não pode carregar os mapas de origem para ter um ícone de aviso no lugar do ícone do arquivo.
Selecionar um arquivo com o ícone de aviso abre o arquivo na ferramenta Fontes com uma barra de informações indicando que o DevTools não conseguiu buscar o mapa de origem corretamente do servidor ou não pôde analisar o mapa de origem corretamente:
Na barra de informações, você pode saber mais sobre o problema selecionando o botão Abrir em Problemas . Em seguida, a ferramenta Problemas é aberta na Gaveta e fornece informações sobre como resolve o problema e obter seu mapa de origem carregado corretamente em DevTools:
Para impedir que a barra de informações sobre os vírgulas de origem desorganize a ferramenta Fontes , selecione o botão Não mostrar novamente . Para evitar que problemas relacionados a vírgulas de origem desorganizem a ferramenta Problemas, desmarque a caixa de seleção Incluir problemas de terceiros na ferramenta Problemas .
Veja também:
Abrir arquivos de origem no Visual Studio Code agora se integra melhor à ferramenta Fontes
Em versões anteriores do Microsoft Edge, ativar os arquivos open source no Visual Studio Code experimento teve um comportamento inesperado quando você já estava usando a ferramenta Sources no DevTools. Definir pontos de interrupção orientaria você a Visual Studio Code ou à documentação para configurar o experimento corretamente.
No Microsoft Edge versão 96, os arquivos open source no experimento Visual Studio Code agora se integram melhor à ferramenta Sources.
Se a ferramenta Sources estiver aberta e você ativar os arquivos open source no experimento Visual Studio Code, definir pontos de interrupção ou abrir arquivos agora abrirá a ferramenta Fontes, em vez de direcioná-lo para Visual Studio Code ou para a documentação para configurar o experimento corretamente.
Como acontece com versões anteriores do Microsoft Edge, se a ferramenta Sources não estiver aberta no DevTools e você ativar os arquivos de código-fonte aberto em Visual Studio Code experimento, definir pontos de interrupção ou abrir arquivos de ferramentas diferentes da ferramenta Sources abrirá o arquivo em Visual Studio Code.
Veja também:
- Abrir arquivos de origem no Visual Studio Code - como o DevTools se integra ao Visual Studio Code.
Selecionar o ícone de triângulo suspenso na interface do usuário de DevTools agora abre o menu
Em versões anteriores do Microsoft Edge DevTools, a seleção do ícone triângulo ao lado de um menu suspenso não exibiu o menu suspenso. Para abrir o menu suspenso, você precisou clicar no item de menu selecionado no momento à esquerda do ícone do triângulo, como Sem limitação:
No Microsoft Edge versão 96, esse problema foi corrigido. A seleção do ícone de triângulo para qualquer menu suspenso no DevTools agora abre o menu suspenso:
Observação
Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Internacional de Atribuição do Creative Commons 4.0. A página original para anúncios do projeto Chromium é What's New in DevTools (Chrome 96) e é de autoria de Jecelyn Yeen (defensor do desenvolvedor que trabalha no Chrome DevTools no Google).
Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.