Novidades em DevTools (Microsoft Edge 87)
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 .
Aprimorando a localização do DevTools
Para atender às suas necessidades de tradução, a equipe do Microsoft Edge DevTools está focada em melhorar a qualidade da tradução. A partir do Microsoft Edge versão 87, várias cadeias de caracteres e termos são bloqueados e não são alterados, mesmo quando o restante dos DevTools são exibidos em outros idiomas. A lista de cadeias de caracteres e termos afetados inclui o seguinte:
- As cadeias de caracteres na ferramenta Lighthouse .
- O termo
service worker. - Alguns dos filtros de ferramenta de rede, como
URL,XHR,JSeCSS. - A API de Utilitários de Console de US$ 0 .
$0 agora está disponível no Console para usuários em versões localizadas do DevTools. Obrigado à comunidade global de desenvolvedores por ajudar a melhorar a localização do Microsoft Edge DevTools. Continue enviando comentários sobre a qualidade da localização para melhorar o suporte para DevTools em todas as localidades. Para obter atualizações em tempo real sobre esse recurso no Chromium projeto de código aberto, consulte Problema #1136655.
Veja também:
Mover ferramentas entre painéis superior e inferior
O DevTools agora dá suporte a ferramentas móveis entre os painéis superior e inferior. Personalize seus DevTools e melhore sua produtividade exibindo qualquer combinação de duas ferramentas ao mesmo tempo. Por exemplo, exiba as ferramentas Elementos e Fontes ao mesmo tempo (movendo a ferramenta Fontes para a parte inferior).
Para mover qualquer ferramenta superior para a parte inferior, clique com o botão direito do mouse em uma guia e selecione Mover para a parte inferior:
Para mover qualquer ferramenta inferior para a parte superior, clique com o botão direito do mouse em uma guia e selecione Mover para a parte superior:
Para obter o histórico desse recurso no Chromium projeto de código aberto, consulte Problema #1075732.
Veja também:
- Ferramentas da Barra de Atividades vs. Ferramentas de Exibição Rápida em Sobre a lista de ferramentas
Salvar e exportar usando o Console de Rede
A ferramenta Console de Rede agora melhorou a compatibilidade com os esquemas Postman v2.1 e OpenAPI v2 .
A ferramenta Console de Rede agora dá suporte às seguintes ações:
- Salve e exporte Coleções e Ambientes.
- Edite e exporte conjuntos de variáveis de ambiente na ferramenta Console de Rede .
Insira um nome para o novo ambiente:
Selecionando o formato para o novo ambiente:
Atualização: esse recurso foi lançado e não é mais experimental.
Veja também:
- Salve e exporte Coleções, Ambientes e variáveis de ambiente no Compose e envie solicitações de API Web usando a ferramenta Console de Rede.
Para obter história, no Chromium projeto de código aberto, consulte Problema #1093687.
Ferramentas de grade do CSS aprimoradas
O Microsoft Edge DevTools agora dá suporte aos seguintes recursos para inspecionar, exibir e depurar suas grades do CSS.
Exiba uma sobreposição de grade simplificada usando a ferramenta Inspecionar ou obtenha informações mais detalhadas com sobreposições persistentes.
Para habilitar sobreposições de grade persistentes, clique no ícone de grade ao lado de um elemento de contêiner de grade na ferramenta Elementos ou clique na grade na ferramenta Layout .
Você pode habilitar sobreposições persistentes para várias grades.
A nova ferramenta layout permite alternar facilmente as sobreposições de grade e configurar a aparência e o conteúdo para cada um deles.
Os recursos são ativados por padrão.
Atualização: esse recurso foi lançado e não é mais experimental.
Veja também:
Para obter história, no Chromium projeto de código aberto, consulte Problema #1047356.
A equipe do Microsoft Edge DevTools está colaborando com a equipe do Chrome DevTools e Chromium comunidade para adicionar novos recursos de ferramentas de flexbox ao DevTools. Para obter atualizações sobre ferramentas de flexbox no Chromium projeto de código aberto, consulte Problema #1136394.
Personalizar atalhos de teclado em Configurações
Agora você pode personalizar o atalho de teclado para qualquer ação no DevTools. Desde a versão 84 do Microsoft Edge, você pode escolher entre predefinições de Visual Studio Code e DevTools (padrão) para atalhos de teclado. Começando no Microsoft Edge versão 87, você pode personalizar ainda mais atalhos de teclado.
Atualização: esse recurso foi lançado e não é mais experimental.
Veja também:
- Edite o atalho de teclado para uma ação DevTools em Personalizar atalhos de teclado.
Para obter história, no Chromium projeto de código aberto, consulte Problema #174309.
Introdução à extensão Ferramentas do Microsoft Edge para Visual Studio Code
As extensões Elements for Visual Studio Code e Network for Visual Studio Code agora são mescladas na nova extensão Ferramentas de Desenvolvedor do Microsoft Edge para Visual Studio Code. Use o Microsoft Edge DevTools para as atividades a seguir sem sair da Microsoft Visual Studio Code.
- Depurar o DOM
- Editar CSS
- Inspecionar o tráfego de rede
Com a extensão, inicie o Microsoft Edge, conecte-se a uma instância existente do navegador ou use um navegador sem cabeça diretamente do seu editor. Para começar a contribuir e arquivar problemas com seus comentários sobre essa extensão, consulte o repositório Ferramentas de Desenvolvedor do Microsoft Edge para Visual Studio Code no GitHub.
Usando a extensão no modo de navegador completo:
Usando a extensão no modo sem cabeça:
Para obter mais informações, consulte a extensão DevTools do Microsoft Edge para Visual Studio Code.
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 WebAuthn
Em versões anteriores do Microsoft Edge, não havia suporte nativo de depuração do WebAuthn. Você precisava de autenticadores físicos para testar seu aplicativo Web com a API de Autenticação Da Web. Com a nova ferramenta WebAuthn , você pode fazer o seguinte sem o uso de autenticadores físicos:
- Emular autenticadores.
- Personalizar atributos de autenticadores.
- Inspecione os estados de autenticadores.
Você pode emular autenticadores e depurar a API de Autenticação da Web com a nova ferramenta WebAuthn . Para abrir a ferramenta WebAuthn, clique no ícone Personalizar e controlar DevTools (...) Mais ferramentas>WebAuthn.> Para obter atualizações em tempo real sobre esse recurso no Chromium projeto de código aberto, consulte Problema #1034663.
Abrindo a ferramenta WebAuthn :
A ferramenta WebAuthn :
Para obter mais informações, consulte Emular autenticadores e depurar WebAuthn.
Atualizações de ferramentas de elementos
Veja também:
Exibir o painel barra lateral computada no painel Estilos
Alterne o painel Computado no painel Estilos . O painel computado no painel Estilos é recolhido por padrão. Para exibir ou ocultar o painel Computado no painel Estilos , clique no botão Mostrar Estilos Computados (
).
Abrindo o painel da barra lateral computada :
O painel da barra lateral computada :
Para obter atualizações em tempo real sobre esse recurso no Chromium projeto de código aberto, consulte Problema #1073899.
Veja também:
- Exibir apenas o CSS que é realmente aplicado a um elemento na referência de recursos do CSS
Agrupando propriedades CSS no painel Computado
Para exibir o CSS aplicado com menos rolagem, agrupe as propriedades CSS por categorias no painel Computado . Você também pode se concentrar seletivamente em um conjunto de propriedades relacionadas enquanto inspeciona seu CSS. Na ferramenta Elementos , selecione um elemento. Para agrupar (ou desagrupar) as propriedades do CSS, alterne a caixa de seleção Grupo .
Para obter atualizações em tempo real sobre esse recurso no Chromium projeto de software livre, consulte Problemas #1096230, #1084673 e #1106251.
Veja também:
- Exibir apenas o CSS que é realmente aplicado a um elemento na referência de recursos do CSS
Lighthouse 6.4 na ferramenta Lighthouse
A ferramenta Lighthouse agora está executando o Lighthouse 6.4. Para obter uma lista completa de alterações, confira as notas de versão do Lighthouse. Para obter atualizações em tempo real sobre esse recurso no Chromium projeto de código aberto, consulte Problema #772558.
Veja também:
eventos performance.mark() na seção Timings
A seção Timings de uma gravação na ferramenta Desempenho agora marca performance.mark()eventos. Para experimentar esse recurso e medir o desempenho do código JavaScript, adicione performance.mark() eventos ao código.
O código a seguir adiciona start e end marcadores de desempenho antes e depois de um for loop:
performance.mark('start');
for (var i = 0; i < 1000; i+=7;){
console.log(i);
}
performance.mark('end');
Em seguida, abra a ferramenta Desempenho e consulte a seção Timings para registrar seu código JavaScript. Os performance.mark() eventos adicionados agora são exibidos na gravação.
Novos filtros de url e tipo de recurso na ferramenta Rede
Use as palavras-chave e url novas resource-type na ferramenta Rede para filtrar solicitações de rede. Por exemplo, use resource-type:image para se concentrar nas solicitações de rede que são imagens:
Para descobrir mais palavras-chave especiais, como resource-type e url, consulte solicitações de filtro por propriedades.
Para obter atualizações em tempo real sobre esse recurso no Chromium projeto de código aberto, consulte Problemas #1121141 e #1104188.
Ver atualizações de exibição de detalhes do quadro
Na ferramenta Aplicativo , na lista de páginas à esquerda, a página inferior é Frames, que geralmente lista um quadro chamado superior.
Exibir relatórios COEP e COOP no ponto de extremidade
Na ferramenta Aplicativo , na lista de páginas à esquerda, a página inferior é Frames, que geralmente lista um quadro chamado superior. Selecione o quadro para exibir a exibição de detalhes do quadro, que inclui a seção Isolamento & segurança .
Na seção Isolamento de & de Segurança da página de detalhes do quadro, exiba o ponto de extremidade COEP (Política de Embedder de Origem Cruzada) e COOP (Política de Abertura de Origem Cruzada). reporting to A API de Relatório define Report-To, que é um novo cabeçalho HTTP que fornece uma maneira de especificar os pontos de extremidade do servidor para o navegador enviar avisos e erros.
Para obter atualizações em tempo real sobre esse recurso no Chromium projeto de código aberto, consulte Problema #1051466.
Veja também:
- Detalhes do quadro de abertura de exibição para janelas abertasno What's New in DevTools (Microsoft Edge 88)
- A ferramenta De aplicativo, para gerenciar o armazenamento
Exibir o modo somente relatório COEP e COOP
Na ferramenta Aplicativo , na lista de páginas à esquerda, a página inferior é Frames, que geralmente lista um quadro chamado superior. Selecione o quadro para exibir a exibição de detalhes do quadro, que inclui a seção Isolamento & segurança .
A seção Isolamento & de Segurança da página de detalhes do quadro agora exibe o report-only rótulo de COEP e COOP definidos como report-only modo.
Para obter atualizações em tempo real sobre esse recurso no Chromium projeto de código aberto, consulte Problema #1051466.
Veja também:
- Detalhes do quadro de abertura de exibição para janelas abertasno What's New in DevTools (Microsoft Edge 88)
- A ferramenta De aplicativo, para gerenciar o armazenamento
Exibir e corrigir problemas de contraste de cor na ferramenta visão geral do CSS
A ferramenta visão geral do CSS agora exibe uma lista de elementos em sua página que têm problemas de contraste de cor. A página Demonstração de Cores Acessíveis da Visão Geral do CSS tem um exemplo de um problema de contraste de cores.
Para exibir uma lista de elementos que têm um problema de contraste de cor, em Problemas de contraste, clique em Texto. Para abrir o elemento na ferramenta Elementos , clique em um elemento na lista. Para ajudar a corrigir problemas de contraste, o Microsoft Edge DevTools fornece automaticamente sugestões de cores.
Atualização: esse recurso foi lançado e não é mais experimental.
Veja também:
Para obter história, no Chromium projeto de código aberto, consulte Problema #1120316.
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.