Novidades em DevTools (Microsoft Edge 86)
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 .
Anúncios da equipe do Microsoft Edge DevTools
Corresponder atalhos de teclado em DevTools a Visual Studio Code
No Microsoft Edge 86, você pode combinar atalhos de teclado no DevTools com seus atalhos no Microsoft Visual Studio Code.
Para ativar esse recurso, consulte Personalizar atalhos de teclado em DevTools.
Por exemplo, o atalho de teclado para pausar ou continuar executando um script em Visual Studio Code é F5. Com a predefinição DevTools (Padrão), esse mesmo atalho em DevTools é F8, mas quando você seleciona o Visual Studio Code predefinido, esse atalho agora também é F5.
Chromium problema #174309
Emular Surface Duo e Samsung Galaxy Fold
Agora você pode testar a aparência do seu site ou aplicativo em dois novos dispositivos: Surface Duo e Samsung Galaxy Fold no Microsoft Edge.
Para ajudar a aprimorar seu site ou aplicativo para os dispositivos de tela dupla e dobráveis, use os seguintes recursos ao emular o dispositivo:
Abrangência, que é quando seu site (ou aplicativo) aparece em ambas as telas.
Renderizando a costura, que é o espaço entre as duas telas.
Habilitar APIs experimentais da Plataforma Web para acessar o novo recurso de abrangência de tela de mídia do CSS e a API getWindowSegments do JavaScript.
Atualização: esse recurso foi lançado e não é mais experimental.
Veja também:
Chromium problema: #1054281
Melhorias de sobreposição de grade do CSS e novos recursos de grade experimental
A equipe do Microsoft Edge DevTools e a equipe do Chrome DevTools colaboram em recursos adicionais. Os novos recursos incluem várias sobreposições persistentes e configuráveis de um novo painel layout na ferramenta Elementos :
Atualização: esse recurso foi lançado e não é mais experimental.
Veja também:
- Recursos de depuração de grade do CSS no What's New in DevTools (Microsoft Edge 85).
- Inspecione a grade do CSS no Microsoft Edge DevTools.
Chromium problema: #1047356
Tabela copiada do Console preserva a formatação
No Microsoft Edge 85 ou anterior, no Console, a formatação de um copiado console.table foi perdida. Se você copiou a saída da API do Console da tabela e a coleu, somente o texto da tabela foi mantido.
table Saída da API do console no Microsoft Edge 85 ou anterior:
tableSaída da API do console do Microsoft Edge 85 ou anterior colada em Visual Studio Code:
No Microsoft Edge 86 ou posterior, quando você copia uma tabela do Console, a formatação agora é preservada.
table Saída da API do console no Microsoft Edge 86 ou posterior:
tableSaída da API do console do Microsoft Edge 86 ou posterior colada em Visual Studio Code:
Chromium problema: #1115011
Veja também:
Visualizador de ordem de origem para um teste de acessibilidade mais fácil
O novo auxiliar de acessibilidade exibe a ordem na qual os elementos residem no arquivo de origem:
Esse recurso facilita o teste da maneira como os usuários de leitor de tela e teclado experimentam seu site ou aplicativo. Leitores de tela e navegação de teclado dependem do conteúdo ser colocado em uma determinada ordem no código-fonte do seu site ou aplicativo, de modo que corresponda à página renderizada. O Visualizador de Ordem de Origem exibe possíveis diferenças em ordem entre a página renderizada e o código-fonte.
Atualização: esse recurso foi lançado e não é mais experimental.
Veja também:
Chromium problema: #1094406
Realçar todos os resultados da pesquisa na ferramenta Elementos
No Microsoft Edge 84 e 85, o primeiro resultado da pesquisa na ferramenta Elementos não realceu. Os resultados restantes da pesquisa foram realçados corretamente.
Obrigado por enviar seus comentários e ajudar a melhorar Chromium. Seus comentários descobriram o problema #1103316 no projeto de Chromium de software livre.
O problema agora está corrigido em todas as versões do Microsoft Edge.
Chromium problema: #1103316
Veja também:
- Pesquisar nós em Introdução à exibição e alteração do DOM
Anúncios do projeto Chromium
As seções a seguir anunciam recursos adicionais disponíveis no Microsoft Edge que foram contribuídos para o projeto de Chromium de software livre.
Nova ferramenta de mídia
O DevTools agora exibe informações de players de mídia na ferramenta Mídia .
Para abrir a nova ferramenta Mídia , selecione Personalizar e controlar DevTools (...) >Mais ferramentas>Mídia.
Antes da nova ferramenta de mídia no DevTools, as informações de registro em log e depuração sobre players de vídeo estavam localizadas na configuração Players Recentes . Para abrir a configuração Jogadores Recentes , acesse edge://media-internals e selecione a ferramenta Jogadores .
Exiba conteúdo ao vivo e inspecione possíveis problemas mais rapidamente, como investigar:
- Por que os quadros são descartados.
- Por que o JavaScript está interagindo com o jogador de uma maneira inesperada.
Captura de tela de nó usando o menu de contexto da ferramenta Elementos
Agora você pode capturar capturas de tela de nó usando o menu com o botão direito do mouse na ferramenta Elementos .
Por exemplo, para tirar uma captura de tela da tabela de conteúdo, clique com o botão direito do mouse no elemento e selecione Captura de tela do nó.
Chromium problema: #1100253
Veja também:
- Captura de tela do nó além do modo de exibiçãono What's New in DevTools (Microsoft Edge 89)
Problemas de atualizações de ferramenta
A barra de aviso Problemas na ferramenta Console agora é substituída por uma mensagem regular.
Veja também:
Problemas de terceiros
Problemas de terceiros agora estão ocultos por padrão na ferramenta Problemas . Selecione a nova caixa de seleção Incluir problemas de terceiros para exibir os problemas.
Chromium problemas: 1096481, 1068116, 1080589
Para obter mais informações, consulte Filtrar problemas por origem em Localizar e corrigir problemas usando a ferramenta Problemas.
Emular fontes locais ausentes
Na ferramenta Renderização , use a nova caixa de seleção Desabilitar fontes locais para emular fontes ausentes local() nas @font-face regras.
Por exemplo, quando a Rubik fonte é instalada em seu dispositivo e a regra a @font-face src usa como fonte local() , o Microsoft Edge usa o arquivo de fonte local do seu dispositivo.
Quando Desabilitar fontes locais é selecionado, o DevTools ignora as local() fontes e busca cada fonte da rede:
Esse recurso será útil se você usar duas cópias diferentes da mesma fonte durante o desenvolvimento, como:
- Uma fonte local para suas ferramentas de design.
- Uma fonte web para o código.
Use Desabilitar fontes locais para facilitar:
- Depurar e medir o desempenho de carregamento e a otimização das fontes da Web.
- Verifique a precisão das regras do CSS
@font-face. - Descubra as diferenças entre as versões locais instaladas em seu dispositivo e uma fonte da Web.
Chromium problema: #384968
Para obter mais informações, consulte Desabilitar fontes locais na referência de recursos de desempenho.
Consulte também Analisar o desempenho de renderização com a ferramenta Renderização na referência de recursos de desempenho.
Emular usuários inativos
A API de Detecção Ociosa permite que os desenvolvedores detectem usuários inativos e reajam em alterações de estado ociosas. Agora você pode usar o DevTools para emular alterações de estado ociosas na ferramenta Sensores para o estado do usuário e o estado da tela, em vez de aguardar a alteração do estado ocioso real. Você pode abrir a ferramenta Sensores da Gaveta.
Chromium problema: #1090802
Veja também:
Emular prefers-reduced-data
Observação
No Microsoft Edge 86, para habilitar esse recurso, acesse edge://flags#enable-experimental-web-platform-features e ative o sinalizador de recursos da Plataforma Web Experimental . A opção de emulação só será exibida se o sinalizador estiver habilitado.
A consulta de mídia prefers-reduced-data detecta as preferências de conteúdo do usuário para dados reduzidos. Se selecionado, o usuário receberá conteúdo de página alternativo que usa menos dados.
Agora você pode usar o DevTools para emular a prefers-reduced-data consulta de mídia na ferramenta Renderização :
Chromium problema: #1096068
Veja também:
Suporte para novos recursos JavaScript
O DevTools agora tem melhor suporte para os seguintes recursos de linguagem JavaScript:
| Recurso de linguagem JavaScript | Detalhes |
|---|---|
| Operadores de atribuição lógica | O DevTools agora dá suporte à atribuição lógica com os novos &&=operadores , ||=e ??= nas ferramentasConsole e Sources. |
| Separadores numéricos de impressão bonita | O DevTools agora imprime corretamente os separadores numéricos na ferramenta Fontes . |
Chromium problemas: 1086817, 1080569
Veja também:
- Executar JavaScript no Console
- Usando o painel Editor para exibir ou editar arquivos na visão geral da ferramenta Fontes
Lighthouse 6.2 no painel do Farol
A ferramenta Lighthouse agora está executando o Lighthouse 6.2. Para obter uma lista completa de alterações, confira as notas de versão do Lighthouse.
Chromium problema: #772558
Para obter mais informações, consulte Ferramenta do Lighthouse.
Preterir a listagem de outras origens no painel Trabalhos de Serviço
A ferramenta Aplicativo agora fornece um link do painel Trabalhadores do Serviço para exibir a lista completa de trabalhadores do serviço de outras origens. Para acessar a lista de trabalhadores de serviço sem abrir o DevTools, acesse edge://service-worker-internals/?devtools.
Anteriormente, o DevTools exibia uma lista aninhada no painel Trabalhos do Serviço de Ferramenta > de Aplicativo.
Chromium problema: #807440
Veja também:
Mostrar resumo de cobertura para itens filtrados
O DevTools agora recalcula e exibe um resumo das informações de cobertura dinamicamente. A exibição dinâmica é disparada quando os filtros são aplicados na ferramenta Cobertura . Anteriormente, a ferramenta Cobertura sempre exibia um resumo de todas as informações de cobertura.
No exemplo a seguir, o resumo da cobertura mostra 344 kB of 1.7 MB (20%) used so far. 1.4 MB unused.inicialmente :
Depois que a filtragem do CSS é aplicada, o resumo da cobertura mostra 26.8 kB of 408 kB (7%) used so far. 381 kB unused.:
Chromium problema: #1061385
Exibição de novos detalhes do quadro no painel Aplicativo
Na ferramenta Aplicativo , agora há uma seção Quadros que fornece uma exibição detalhada para cada quadro. Para acessar a exibição detalhada, clique em um quadro no menu Quadros na ferramenta Aplicativo .
Chromium problema: #1093247
Veja também:
Detalhes do quadro para janelas abertas
Abra janelas e janelas pop-up agora exibidas sob a árvore de quadros também. A exibição detalhada das janelas abertas inclui informações adicionais de segurança.
Chromium problema: #1107766
Veja também:
Informações de segurança e isolamento
O contexto seguro, o COEP (Cross-Origin-Embedder-Policy) e o COOP (Cross-Origin-Opener-Policy) agora são exibidos nos detalhes do quadro.
O projeto Chromium planeja adicionar mais informações de segurança aos detalhes do quadro.
Chromium problema: #1051466
Veja também:
- Ferramenta de aplicativo, para gerenciar o armazenamento
- Entender problemas de segurança usando a ferramenta Segurança
Elementos e atualizações do painel de rede
Veja também:
Sugestão de cor acessível no painel Estilos
O DevTools agora fornece sugestões de cores para texto de contraste de cores baixas.
No exemplo abaixo, h1 tem texto de baixo contraste. Para corrigir o contraste, abra o seletor de cores da color propriedade no painel Estilos . Depois de expandir a seção Taxa de Contraste , o DevTools fornece sugestões de cor AA e AAA. Selecione a cor sugerida para aplicar a cor.
Chromium problema: #1093227
Veja também:
- Alterar cores com a referência do Seletor de Cores nos recursos do CSS
- Testar o contraste de cor de texto usando o Seletor de Cores
Painel Restabelecer Propriedades no painel Elementos
Na ferramenta Elementos , o painel Propriedades está de volta. O painel Propriedades foi preterido no Microsoft Edge 84. A equipe do Microsoft Edge DevTools e a equipe do Chrome DevTools estão planejando melhorias para inspecionar propriedades de elementos.
Chromium problema: #1116085
Veja também:
Automatizar fontes personalizadas no painel Estilos
Os rostos de fonte importados agora são adicionados à lista de autocompleção do CSS ao editar a font-family propriedade no painel Estilos .
Por exemplo, se monospace for uma fonte personalizada instalada no computador local, ela será exibida na lista de conclusão do CSS. Nas versões anteriores do Microsoft Edge, a fonte não foi exibida.
Chromium problema: #1106221
Veja também:
Exibir consistentemente o tipo de recurso no painel Rede
Na ferramenta Rede , o DevTools agora exibe consistentemente o mesmo tipo de recurso que a solicitação de rede original. Quando o redirecionamento (HTTP status código 302) acontece, DevTools acrescenta /Redirecionar para o valor na coluna Tipo.
Anteriormente, DevTools às vezes alterava o valor na coluna Tipo para Outros.
Chromium problema: #997694
Veja também:
Limpar botões nas ferramentas Elementos e Rede
As seguintes caixas de texto agora têm botões Limpar :
- As caixas de texto de filtro no painel Estilos e na ferramenta Rede .
- A caixa de texto de pesquisa DOM na ferramenta Elementos .
Clique no botão Limpar para remover qualquer texto inserido.
Limpar botões nas ferramentas Elementos :
Limpar botões nas ferramentas de rede :
Chromium problema: #1067184
Veja também:
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 é encontrada aqui e é de autoria de Jecelyn Yeen (advogada do desenvolvedor, Chrome DevTools).
Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.