Novidades no DevTools (Microsoft Edge 93)
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: Microsoft Edge | Novidades no DevTools 93
Aplicar temas do Visual Studio Code a DevTools
Além dos temas claros e escuros existentes, o Microsoft Edge DevTools suporta agora alguns dos temas de cores mais populares do Visual Studio Code. Para selecionar um tema a cores, clique no botão Definições de DevTools (
) e, em seguida, selecione um tema na lista pendente Tema .
Os temas suportados do Visual Studio Code são:
Temas claros:
- Luz Solarizada
- Luz Silenciosa
Temas escuros:
- Abismo
- Kimbie Dark
- Monokai
- Monokai Dimmed
- Escuro Solarizado
- Vermelho
- Amanhã à Noite Azul
Veja Aplicar temas de cor às DevTools.
Depurar fugas de memória do nó DOM com a nova ferramenta Elementos Desanexados
Um nó DOM é considerado "desanexado" quando já não está ligado a qualquer elemento do DOM, mas continua a ser retido na memória pelo Microsoft Edge. O browser não consegue recolher o elemento da memória, porque alguns JavaScript ainda fazem referência ao elemento, mesmo que já não esteja na página ou numa parte do DOM.
A nova ferramenta Elementos Desanexados encontra todos os elementos desanexados na sua página e apresenta-os. Pode expandir e fechar um elemento desanexado para ver os nós principais e subordinados que também estão a ser retidos. Pode acionar a libertação da memória do browser ao selecionar Recolher lixo e confirmar que tem uma fuga de memória quando um elemento desanexado não pode ser recolhido da memória. Por fim, pode aceder ao JavaScript que faz referência ao elemento desanexado ao tirar um instantâneo de área dinâmica para dados com o botão Analisar .
Atualização: esta funcionalidade foi lançada e já não é experimental.
Veja também:
O depurador do Visual Studio Code integra-se agora com a extensão DevTools
Se utilizar a depuração de JavaScript no Visual Studio Code, pode agora iniciar a extensão Ferramentas de Programação do Microsoft Edge para Visual Studio Code ao selecionar o botão Inspecionar .
Esta funcionalidade integra a depuração DOM e CSS com a depuração de JavaScript no Visual Studio Code. Se não tiver a extensão DevTools instalada, quando seleciona o botão Inspecionar , o Visual Studio Code pede-lhe para instalar a extensão.
Outras funcionalidades novas são:
- As ferramentas são atualizadas automaticamente quando alterna entre destinos de depuração diferentes.
- Várias correções de erros.
- Documentação mais detalhada da extensão.
Para obter mais detalhes sobre melhoramentos e correções, verifique o ficheiro de registo de alterações no vscode-edge-devtools repositório.
Veja também:
Obtenha a extensão Ferramentas de Programação do Microsoft Edge para Visual Studio Code. O Microsoft Visual Studio Code atualiza as extensões automaticamente; Para atualizar esta extensão manualmente, consulte Atualizar uma extensão manualmente.
Pode registar problemas e contribuir para a extensão no repositório do GitHub vscode-edge-devtools.
Novos ícones de IU Fluent para DevTools
O Microsoft Edge DevTools adotou a IU Fluent, dando aos botões e menus um aspeto mais moderno que melhor se alinha com o resto do browser Microsoft Edge.
Alterar o idioma de apresentação de DevTools diretamente a partir das Definições
Anteriormente, para alterar o idioma de apresentação no DevTools, tinha de alterar o idioma do browser. Agora pode mudar facilmente o idioma de apresentação nas Definições de DevTools, sem ter de alterar as definições do browser. Para tal, abra Definições e, em seguida, em Preferências, selecione um idioma na lista pendente Idioma .
Por predefinição, as DevTools correspondem ao idioma de apresentação do browser. Veja Alterar as definições de idioma de DevTools.
Para obter o histórico desta funcionalidade no projeto de código aberto Chromium, veja Problema 2882756.
Copiar uma declaração no painel Estilos para bibliotecas CSS-in-JS
Anteriormente, ao utilizar bibliotecas CSS-in-JS, não conseguia copiar declarações CSS (uma propriedade e valor CSS) formatadas para JavaScript. Teria de editar o CSS copiado para corresponder à sintaxe do JavaScript.
Agora, na versão 93 do Microsoft Edge, pode copiar uma única declaração CSS ou todas as declarações numa regra de estilo e colá-las diretamente num ficheiro JavaScript sem problemas de sintaxe. Para experimentar esta funcionalidade:
No painel Estilos da ferramenta Elementos , clique com o botão direito do rato numa declaração numa regra de estilo.
Selecione Copiar declaração como JS ou Copiar todas as declarações como JS.
Cole o CSS copiado num ficheiro JavaScript no seu editor de texto, como o Visual Studio Code. Por exemplo:
'--more-link': 'lime'.
Para saber mais sobre como ver e alterar o CSS, veja Referência de funcionalidades do CSS.
Personalização mais fácil do User-Agent Sugestões de Cliente
User-Agent Sugestões de Cliente torna as informações do browser mais acessíveis do que uma cadeia de User-Agent delimitada por ponto e vírgula e melhora a compatibilidade do site. Inicialmente, User-Agent Sugestões de Cliente eram morosas para testar e depurar. Havia menos controlo sobre as sugestões do cliente e as sugestões do cliente tinham de ser preenchidas corretamente para que o formulário funcionasse.
Nesta versão, redesenhámos a experiência de depuração para que possa modificar facilmente User-Agent Sugestões de Cliente através de uma IU com vários campos e controlos separados. Além disso, agora pode testar as sugestões personalizadas User-Agent cliente e uma cadeia de User-Agent em simultâneo. Agora pode definir User-Agent Sugestões de Cliente para um dispositivo personalizado nas Definições ou na ferramenta Condições de rede .
Para obter mais informações sobre como definir sugestões em Definições, veja Definir sugestões de cliente do agente de utilizador.
Também pode substituir User-Agent Sugestões de Cliente para a página atual com a ferramenta Condições de rede .
Para obter mais informações sobre como definir sugestões na ferramenta Condições de rede , veja Definir sugestões de cliente do agente de utilizador.
Para obter o histórico desta funcionalidade no projeto de código aberto Chromium, veja Problema 1174299.
Os leitores de ecrã anunciam agora erros, avisos e problemas na barra de ferramentas e na Consola
Anteriormente, os utilizadores de leitores de ecrã só ouviam o número de erros, avisos ou problemas anunciados na barra de ferramentas DevTools. As informações adicionais sobre o tipo de notificação que estava a ser anunciada não foram incluídas, como "Erro", "Aviso" ou "Problema". Por exemplo, se as DevTools comunicassem 3 erros, os leitores de ecrã apenas anunciariam "3".
Agora, na versão 93 do Microsoft Edge, os leitores de ecrã anunciam corretamente o tipo e o número de notificações; erros, avisos ou problemas. Por exemplo, se o DevTools indicar 3 erros e 5 avisos, os leitores de ecrã anunciam agora "3 erros, 5 avisos". Esta correção foi aplicada às notificações na barra de ferramentas DevTools e na Consola.
Para obter informações sobre a depuração de erros da Consola, veja Corrigir erros de JavaScript comunicados na Consola. Para obter informações sobre problemas encontrados pelo DevTools e melhorias que pode fazer numa página Web, consulte Localizar e corrigir problemas com a ferramenta Problemas.
Para obter o histórico desta funcionalidade no projeto open source chromium, veja Issue 1223208 (Problema 1223208).
Copiar como PowerShell na ferramenta rede inclui agora cookies
Anteriormente, na ferramenta Rede , a opção de menu de contexto Copiar>Como Cópia como PowerShell não incluía cookies ao gerar um comando do PowerShell para um determinado pedido de rede no Registo de Atividades de Rede. Isto significava que o comando do PowerShell gerado não conseguiria fazer o mesmo pedido de rede se fossem necessários cookies.
Agora, na versão 93 do Microsoft Edge, a opção de menu de contexto Copiar como PowerShell define corretamente a cadeia de User-Agent e os cookies observados pelas DevTools. O comando do PowerShell gerado pode agora fazer com êxito o mesmo pedido de rede que foi observado pelo DevTools, mesmo para servidores que dependem de cookies.
Para obter mais informações sobre o Registo de Atividades de Rede, veja Referência de funcionalidades de rede.
Para obter o histórico desta funcionalidade, veja 932971 de problemas.
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 é encontrada aqui e é da autoria de Jecelyn Yeen (Consultora de Programação, Chrome DevTools).
Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.
Comentários
Brevemente: Ao longo de 2024, vamos descontinuar progressivamente o GitHub Issues como mecanismo de feedback para conteúdos e substituí-lo por um novo sistema de feedback. Para obter mais informações, veja: https://aka.ms/ContentUserFeedback.
Submeter e ver comentários