Novidades no DevTools (Microsoft Edge 101)
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 101
A ferramenta Consola está agora disponível no Visual Studio Code
A Consola é uma das ferramentas mais populares no DevTools. Agora, pode aceder à ferramenta Consola na extensão Ferramentas de Programação do Microsoft Edge para Visual Studio Code. Esta Consola de DevTools integrada permite-lhe ver as mensagens de registo junto ao código. Com a Consola, também pode:
- Experimente algumas instruções JavaScript.
- Aceda ao objeto de janela.
- Chame os métodos do
Consoleobjeto, conforme descrito em Referência da API de objeto da Consola. - Utilize os utilitários da Consola para aceder ao DOM, conforme descrito em Funções e seletores de utilitários da ferramenta consola.
Pode utilizar a Consola como a ferramenta principal ou utilizá-la em conjunto com as ferramentas Elementos e Rede .
A ferramenta Consola é aberta na barra de ferramentas principal da extensão DevTools do Microsoft Edge para o Visual Studio Code:
A ferramenta Consola é aberta na Gaveta da extensão DevTools do Microsoft Edge para o Visual Studio Code:
Para obter mais informações, veja Integração da consola.
Os mapas de origem estão agora em cache com o IndexedDB
Em versões anteriores do Microsoft Edge, se estivesse a alojar ficheiros de mapa de origem grandes no servidor ou no servidor de símbolos dos Artefactos do Azure, o DevTools obteria estes mapas de origem sempre que a página fosse atualizada. A obtenção destes mapas de origem criou repetidamente mais pedidos de rede para DevTools e abrandou a depuração.
No Microsoft Edge 101, o DevTools coloca os mapas de origem em cache com o IndexedDB. Quando atualiza a página, os mapas de origem são agora servidos a partir da cache do IndexedDB , em vez de serem pedidos novamente a partir do servidor ou do servidor de símbolos dos Artefactos do Azure. Utilize a coluna Estado da carga na ferramenta Monitor de Mapas de Origem para verificar se os mapas de origem estão a ser carregados a partir da cache. Para limpar a cache IndexedDB e forçar devTools a recarregar mapas de origem, execute o comando Limpar cache de mapas de origem no Menu de Comandos.
Quando carrega a página Web pela primeira vez, a ferramenta Monitor de Mapas de Origem mostra que os mapas de origem ainda não estão em cache:
Quando recarrega a página Web, a ferramenta Monitor de Mapas de Origem mostra que os mapas de origem em cache são utilizados:
Controlar pedidos de rede pendentes ao exportar ficheiros HAR
No Microsoft Edge 101, a nova coluna de texto Estado foi adicionada à ferramenta Rede . A coluna de texto Estado fornece mensagens equivalentes legíveis por humanos para os códigos de estado HTTP que são comunicados na coluna Estado .
Além disso, foi adicionada uma nova definição à Ferramenta de rede: Incluir pedidos pendentes no ficheiro HAR. Se precisar de registar pedidos de rede pendentes ao exportar um ficheiro HAR na ferramenta Rede, ative a definição Incluir pedidos pendentes no ficheiro HAR . A coluna de texto Estado irá agora incluir o estado (pendente) para quaisquer pedidos de rede pendentes.
Para saber mais sobre as colunas disponíveis no registo de pedidos, veja Referência > de funcionalidades de rede Adicionar ou remover colunas.
Controlos de IU e câmara atualizados na Vista 3D
No Microsoft Edge 101, a ferramenta Vista 3D tem dois novos botões: Vista panorâmica (
painéis') e Rodar vista (
). Utilize estes botões para alternar entre o deslocamento panorâmico à volta da tela ou a rotação da tela. Clique no botão Vista de deslocamento ou Rodar vista e, em seguida, arraste na direção pretendida com o rato ou utilize as teclas de seta.
A IU proporciona agora uma experiência mais uniforme e intuitiva. Os painéis estão organizados de forma mais clara e os problemas de acessibilidade foram corrigidos.
Veja Navegar nas camadas da página Web, no índice z e no DOM com a ferramenta Vista 3D.
A mudança de temas já não requer o recarregamento de DevTools
Em versões anteriores do Microsoft Edge, a mudança de temas em DevTools exigiu o recarregamento de DevTools para aplicar o novo tema. No Microsoft Edge 101, pode experimentar rapidamente temas diferentes sem ter de recarregar as DevTools.
Para obter mais informações sobre como utilizar temas do Visual Studio Code em DevTools, consulte Aplicar um tema de cor às DevTools.
Anúncios do projeto Chromium
O Microsoft Edge 101 também inclui as seguintes atualizações do projeto Chromium: