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.
Vídeo: Microsoft Edge | Novidades no DevTools 93
Aplicar temas do Visual Studio Code ao DevTools
Atualização: a partir do Microsoft Edge 131, o recurso de temas do Visual Studio Code é removido e esses temas são revertidos para os temas padrão:
- Luz+
- Escuro+
Além dos temas claros e escuros existentes, o DevTools do Microsoft Edge agora dá suporte a alguns dos temas de cores mais populares do Visual Studio Code. Para selecionar um tema de cor, clique no botão Configurações do DevTools (
) e selecione um tema na lista suspensa Tema .
Os temas do Visual Studio Code com suporte são:
Temas claros:
- Luz solarizada
- Luz Silenciosa
Temas escuros:
- Abismo
- Kimbie Escuro
- Monokai
- Monokai esmaecido
- Escuro Solarizado
- Vermelho
- Amanhã à noite azul
Depurar vazamentos de memória do nó DOM com a nova ferramenta Elementos Desvinculados
Atualização de março de 2025: A ferramenta Elementos Desvinculados foi removida. Para depurar vazamentos de memória DOM, use o tipo de criação de perfil Elementos desvinculados na ferramenta Memória .
Um nó DOM é considerado "desanexado" quando não está mais anexado a nenhum elemento do DOM, mas ainda está sendo retido na memória pelo Microsoft Edge. O navegador não pode coletar o elemento como lixo, pois algum JavaScript ainda está fazendo referência ao elemento, embora ele não esteja mais na página ou como parte do DOM.
O tipo de criação de perfil Elementos desanexados na ferramenta Memória localiza todos os elementos desanexados em sua página e os exibe. Você pode expandir e recolher um elemento desanexado para ver os nós pai e filho que também estão sendo retidos. Você pode acionar a coleta de lixo do navegador selecionando Coletar lixo e validar se há um vazamento de memória quando um elemento desanexado não pode ser coletado como lixo. Por fim, você pode entrar no JavaScript que faz referência ao elemento desanexado tirando um snapshot de heap com o botão Analisar.
Atualização: esse recurso foi lançado e não é mais experimental.
Veja também:
O depurador do Visual Studio Code agora se integra à extensão DevTools
Se você usar a depuração JavaScript no Visual Studio Code, agora poderá iniciar a extensão Microsoft Edge Developer Tools para o Visual Studio Code selecionando o botão Inspecionar.
Esse recurso integra a depuração DOM e CSS com a depuração JavaScript no Visual Studio Code. Se você não tiver a extensão DevTools instalada, ao selecionar o botão Inspecionar, o Visual Studio Code solicitará que você instale a extensão.
Outros novos recursos são:
- As ferramentas são atualizadas automaticamente quando você alterna entre diferentes destinos de depuração.
- Várias correções de bugs.
- Documentação mais detalhada da extensão.
Para obter mais detalhes sobre melhorias e correções, marque o arquivo de log de alterações no vscode-edge-devtools repositório.
Veja também:
Obtenha a extensão Microsoft Edge Developer Tools para Visual Studio Code. O Microsoft Visual Studio Code atualiza as extensões automaticamente. Para atualizar essa extensão manualmente, consulte Atualizar uma extensão manualmente.
Você pode registrar problemas e contribuir com a extensão no repositório vscode-edge-devtools do GitHub.
Novos ícones da interface do usuário do Fluent para DevTools
O DevTools do Microsoft Edge adotou a IU do Fluent, dando aos botões e menus uma aparência mais moderna que se alinha melhor com o restante do navegador Microsoft Edge.
Alterar o idioma de exibição do DevTools diretamente nas Configurações
Anteriormente, para alterar o idioma de exibição no DevTools, você tinha que alterar o idioma do navegador. Agora você pode alternar facilmente o idioma de exibição nas configurações do DevTools sem precisar alterar as configurações do navegador. Para fazer isso, abra Configurações e, em seguida, em Preferências, selecione um idioma na lista suspensa Idioma .
Por padrão, o DevTools corresponde ao idioma de exibição do navegador. Consulte Alterar as configurações de idioma do DevTools.
Para obter o histórico desse recurso no Chromium projeto de código aberto, consulte o Problema 2882756.
Copiar uma declaração no painel Estilos para bibliotecas CSS-in-JS
Anteriormente, ao usar bibliotecas CSS-in-JS, você não conseguia copiar declarações CSS (uma propriedade e um valor CSS) formatadas para JavaScript. Você teria que editar o CSS copiado para corresponder à sintaxe do JavaScript.
Agora no Microsoft Edge versão 93, você pode copiar uma única declaração CSS ou todas as declarações em uma regra de estilo e colá-las diretamente em um arquivo JavaScript sem ter problemas de sintaxe. Para experimentar esse recurso:
No painel Estilos da ferramenta Elementos , clique com o botão direito do mouse em uma declaração em uma regra de estilo.
Selecione Copiar declaração como JS ou Copiar todas as declarações como JS.
Cole o CSS copiado em um arquivo JavaScript no editor de texto, como o Visual Studio Code. Por exemplo:
'--more-link': 'lime'.
Para saber mais sobre como exibir e alterar o CSS, consulte Referência de recursos do CSS.
Personalização mais fácil de User-Agent Dicas de Cliente
User-Agent Dicas de Cliente torna as informações do navegador mais acessíveis do que uma cadeia de caracteres de User-Agent delimitada por ponto-e-vírgula e melhora a compatibilidade do site. Inicialmente, User-Agent Dicas de Cliente eram demoradas para testar e depurar. Havia menos controle sobre as dicas do cliente, e as dicas do cliente tinham que ser preenchidas corretamente para que o formulário funcionasse.
Nesta versão, reprojetamos a experiência de depuração para que você possa modificar facilmente User-Agent Dicas de Cliente por meio de uma interface do usuário com vários campos e controles separados. Além disso, agora você pode testar suas dicas de cliente de User-Agent personalizadas e uma cadeia de caracteres User-Agent simultaneamente. Agora você pode definir User-Agent dicas de cliente para um dispositivo personalizado em Configurações ou na ferramenta Condições de rede .
Para obter mais informações sobre como definir dicas em Configurações, consulte Definir dicas de cliente agente do usuário.
Você também pode substituir User-Agent dicas de cliente para a página atual usando a ferramenta Condições de rede .
Para obter mais informações sobre como definir dicas na ferramenta Condições de rede , consulte Definir dicas de cliente agente do usuário.
Para obter o histórico desse recurso no Chromium projeto de código aberto, consulte o Problema 1174299.
Os leitores de tela agora anunciam erros, avisos e problemas na barra de ferramentas e no console
Anteriormente, os usuários de leitores de tela ouviam apenas o número de erros, avisos ou problemas anunciados na barra de ferramentas do DevTools. As informações adicionais de que tipo de notificação estava sendo anunciada não foram incluídas, como "Erro", "Aviso" ou "Problema". Por exemplo, se o DevTools relatasse 3 erros, os leitores de tela anunciariam apenas "3".
Agora na versão 93 do Microsoft Edge, os leitores de tela anunciam corretamente o tipo e o número de notificações; erros, avisos ou problemas. Por exemplo, se o DevTools relatar 3 erros e 5 avisos, os leitores de tela agora anunciarão "3 erros, 5 avisos". Essa correção foi aplicada às notificações na barra de ferramentas do DevTools e no Console.
Para obter informações sobre como depurar erros do Console, consulte Corrigir erros do JavaScript relatados no Console. Para obter informações sobre problemas encontrados pelo DevTools e melhorias que você pode fazer em uma página da Web, consulte Encontrar e corrigir problemas usando a ferramenta Problemas.
Para obter o histórico desse recurso no Chromium projeto de código aberto, consulte o Problema 1223208.
Copiar como O PowerShell na ferramenta Rede agora inclui cookies
Anteriormente, na ferramenta Rede , a opção de menu de contexto Copiar>Copiar como PowerShell não incluía cookies ao gerar um comando do PowerShell para uma determinada solicitação de rede no Log de Atividades de Rede. Isso significava que o comando do PowerShell gerado não poderia fazer a mesma solicitação de rede com êxito se os cookies fossem necessários.
Agora no Microsoft Edge versão 93, a opção de menu de contexto Copiar como PowerShell define corretamente a cadeia de caracteres de User-Agent e os cookies que foram observados pelo DevTools. O comando do PowerShell gerado agora pode fazer com êxito a mesma solicitação de rede observada pelo DevTools, mesmo para servidores que dependem de cookies.
Para obter mais informações sobre o Log de atividades de rede, consulte Referência de recursos de rede.
Para obter o histórico desse recurso, consulte o Problema 932971.
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 Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é de autoria de Jecelyn Yeen.
Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.