Novidades no DevTools (Microsoft Edge 106)

Esses são os recursos mais recentes na versão estável do Microsoft Edge DevTools.

Vídeo: Novidades no DevTools 106

Imagem em miniatura do vídeo

Apresentando a Paleta de Comandos

O experimento da Paleta de Comandos foi removido do Microsoft Edge 123.

No Microsoft Edge 106, agora você pode habilitar e usar o experimento da Paleta de Comandos. A Paleta de Comandos possibilita acessar comandos de gerenciamento do navegador e ferramentas de desenvolvedor com apenas um atalho de teclado: Ctrl+Shift+Barra de espaços.

Para habilitar o experimento da Paleta de Comandos:

  1. Saiba mais em edge://flags. Em seguida, no campo de texto Sinalizadores de pesquisa , comece a digitar Paleta de Comandos.

  2. No menu suspenso Paleta de Comandos , selecione Habilitado:

    O atalho de teclado para a Paleta de Comandos na página de sinalizadores da versão 106

    Observe o atalho de teclado, que é mostrado na seção Paleta de Comandos na edge://flags página.

  3. Clique no botão Reiniciar , que aparece no canto inferior direito quando você seleciona Habilitado.

Para acessar rapidamente os comandos de gerenciamento do navegador e os comandos do DevTools disponíveis, depois de habilitar o experimento:

  1. No Microsoft Edge (com ou sem o DevTools aberto), pressione Ctrl+Shift+Barra de espaços.

  2. Comece a digitar. Os comandos são filtrados com base em seus caracteres de entrada e agrupados em categorias como Sugestões, Histórico e DevTools:

    Paleta de Comandos do Microsoft Edge

  3. Para restringir a filtragem para listar apenas comandos do DevTools, digite o caractere maior que (>):

    Paleta de Comandos do Microsoft Edge entrando > para selecionar comandos do DevTools

Informe-nos quais comandos você gostaria de ver em versões futuras do Microsoft Edge, postando um comentário na edição 73: [comentários] Experiência da paleta de comandos no repositório MicrosoftEdge/DevTools !

Filtrar e corrigir automaticamente problemas de código no DevTools para Visual Studio Code

A extensão do DevTools do Microsoft Edge para o Visual Studio Code agora fornece opções de Correção Rápida, permitindo que você corrija problemas automaticamente.

Para acessar as opções de Correção Rápida :

  1. Passe o mouse sobre um problema relatado pela extensão DevTools, indicado por um sublinhado ondulado em seu código. Um ícone de lâmpada é exibido ao lado do problema.

  2. Clique no ícone de lâmpada (ícone de lâmpada). O menu Correção Rápida é exibido:

    Opções de Correção Rápida

  3. Selecione a Correção Rápida que você deseja usar para resolver o problema ou parar de relatá-lo como um problema. Selecionar para ignorar o problema cria automaticamente um .hintrc arquivo que instrui a extensão a ignorar esse tipo de problema e não relatá-lo novamente.

Veja também:

O DevTools agora usa menos espaço em disco ao armazenar mapas de origem em cache

A partir do Microsoft Edge 101, o DevTools começou a armazenar em cache mapas de origem no IndexedDB para reduzir a quantidade de solicitações de rede que buscam seus mapas de origem. No entanto, essa alteração pode ocupar muito espaço em disco se esses mapas de origem nunca forem removidos.

No Microsoft Edge 106, esse problema foi corrigido, removendo todos os mapas de origem que não são acessados há 30 dias do armazenamento IndexedDB. Além disso, os mapas de origem servidos também localhost não são mais armazenados em cache. Agradecemos por nos enviar seus comentários sobre este problema!

Para entender como o DevTools busca e armazena em cache seus mapas de origem, assista à coluna Carregar status na ferramenta Monitor de Mapas de Origem. Quando você carrega a página da Web pela primeira vez, a ferramenta Monitor de Mapas de Origem mostra que os mapas de origem ainda não estão armazenados em cache:

Ferramenta Monitor de Mapas de Origem, no primeiro carregamento

Quando você atualiza a página da Web, a ferramenta Monitor de Mapas de Origem mostra que os mapas de origem armazenados em cache são usados:

Ferramenta Monitor de Mapas de Origem, no segundo carregamento

Para limpar o cache do IndexedDB e forçar o DevTools a recarregar os mapas de origem, execute o comando Limpar cache de mapas de origem no Menu de Comando. Consulte Executar comandos no Menu de Comando.

Para história, consulte a Edição 89.

Veja também:

Os temas de cores do Chromium foram descontinuados

Para melhorar a confiabilidade, os temas Chromium Light e Chromium Dark foram descontinuados. Os usuários que anteriormente tinham esses temas selecionados serão migrados automaticamente para o tema Claro+ ou Escuro+ , respectivamente:

DevTools no tema Light+ :

DevTools no tema Light+

Tema DevTools no Dark+ :

Tema DevTools no Dark+

Existem muitos temas de cores do DevTools para escolher, como Monokai e Solarized. Para alterar o tema de cores no DevTools, clique no botão Configurações (ícone de Configurações) e, na página Preferências , no menu suspenso Tema , selecione um tema:

Definir o tema do DevTools para Monokai

Melhorias de acessibilidade no Modo de Foco e no modo de alto contraste

Os botões de localização do Dock e da Barra de Atividades no Modo de Foco agora funcionam melhor com leitores de tela

No Microsoft Edge 105, o Modo de Foco recebeu várias melhorias, incluindo a nova localização do Dock e botões de localização da Barra de Atividades . No Microsoft Edge 106, esses novos botões agora funcionam melhor com tecnologias assistivas, como leitores de tela.

Os leitores de tela agora anunciam qual botão de localização do Dock ou qual botão de localização da Barra de Atividades está selecionado no momento e o número de botões, representando as opções de localização disponíveis:

O menu de Encaixe redesenhado no Modo de Foco

Veja também:

Os estilos calculados são mais fáceis de ver no modo de alto contraste

No modo de alto contraste, nas versões anteriores do Microsoft Edge, os botões expandir e recolher para estilos computados não eram renderizados corretamente na guia Computado na ferramenta Elementos . No Microsoft Edge 106, esse problema foi corrigido. Os botões expandir e recolher agora estão visíveis no modo de alto contraste:

Estilos computados no modo de alto contraste

Veja também:

Anúncios do projeto Chromium

O Microsoft Edge 106 também inclui as seguintes atualizações do projeto Chromium:

Confira também