Novidades em DevTools (Microsoft Edge 89)
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 .
Novidades agora são bem-vindas
A ferramenta What's New no Microsoft Edge DevTools agora tem uma nova aparência e um novo nome: Bem-vindo. A ferramenta Welcome ainda exibe as últimas notícias e atualizações do DevTools. Agora também inclui links para a documentação do Microsoft Edge DevTools, maneiras de enviar comentários e muito mais. Para exibir a ferramenta De boas-vindas após cada atualização no Microsoft Edge, selecione a caixa de seleção ao lado da guia Abrir após cada atualização no título.
Para fechar a ferramenta De boas-vindas , clique no X no lado direito do título da guia.
Atualização: esse recurso foi lançado e não é mais experimental.
Veja também:
Editor de Fonte visual no painel Estilos
Quando você trabalha com fontes no CSS, use o novo editor de fontes visual. Você pode definir fontes de fallback e usar controles deslizantes para definir o peso da fonte, o tamanho, a altura da linha e o espaçamento:
O Editor de Fontes ajuda você a:
- Alternar entre unidades para propriedades de fonte diferentes.
- Alternar entre palavras-chave para diferentes propriedades de fonte.
- Converter unidades.
- Gerar um código CSS preciso.
Para ativar esse experimento, consulte Configurações Experimentos> e selecione a caixa de seleção ao lado de Habilitar novas ferramentas do Editor de Fontes no painel Estilos.
Para obter o histórico desse recurso no Chromium projeto de software livre, consulte Problema 1093229.
Veja também:
- Habilite a ferramenta Editor de Fontes no painel Estilos em recursos experimentais no Microsoft Edge DevTools.
- Edite estilos e configurações de fonte CSS no painel Estilos em DevTools.
Ferramentas de depuração do CSS Flexbox
O DevTools agora dá suporte ao layout da Flexbox, bem como ao layout da grade.
Atualização: esse recurso foi lançado e não é mais experimental.
Veja também:
- Obtendo informações de elemento da sobreposição Inspecionar em Analisar páginas usando a ferramenta Inspecionar.
- Use a ferramenta Inspecionar para detectar problemas de acessibilidade pairando sobre a página da Web.
- Atualize .css arquivos de dentro da guia Estilos (edição de espelho CSS).
Grade:
- Grades CSS
- Ferramentas de grade do CSS aprimoradasno What's New in DevTools (Microsoft Edge 87).
MDN:
Para obter história, no Chromium projeto de código aberto, consulte Problemas 1136394 e 1139949.
Novo ícone Flexbox (flex) ajuda a identificar e exibir contêineres flex
Na ferramenta Elementos , o novo ícone Flexbox (flex) ajuda você a identificar contêineres do Flexbox em seu código. Clique no ícone Flexbox (flex) para ativar ou desativar o efeito de sobreposição que descreve um contêiner flexbox. Você pode personalizar a cor da sobreposição no painel Layout , que está localizado ao lado de Estilos e Computado.
Para ativar e desativar o efeito de sobreposição que descreve o contêiner do Flexbox, clique no ícone Flexbox (flex).
Você pode personalizar a cor da sobreposição no painel Layout ao lado de Estilos e Computado.
O ícone e a página da Web flexbox (flex) realçados:
As sobreposições da Flexbox realçadas no painel Layout :
Atualização: esse recurso foi lançado e não é mais experimental.
Veja também:
- Obtendo informações de elemento da sobreposição Inspecionar em Analisar páginas usando a ferramenta Inspecionar.
- Inspecione a grade do CSS.
Exibir ícones de alinhamento e guias visuais quando os layouts do Flexbox forem alterados usando propriedades CSS
Quando você edita o CSS para o layout do Flexbox, as autocomplets do CSS no painel Estilos agora exibem ícones úteis ao lado de propriedades relevantes do Flexbox. Para experimentar esse novo recurso, abra a ferramenta Elementos e selecione um contêiner flex. Em seguida, adicione ou altere uma propriedade nesse contêiner no painel Estilos .
O menu de preenchimento automático agora exibe ícones que indicam o efeito de propriedades de alinhamento, como align-content e align-items.
Além disso, o DevTools agora exibe uma linha de orientação para ajudá-lo a ver melhor a align-items propriedade CSS. A gap propriedade CSS também tem suporte. Na figura a seguir, a gap propriedade CSS é definida como gap: 12px; e o padrão de eclosão para cada lacuna é exibido.
Menu de preenchimento automático realçado para propriedades CSS que começam com align-:
Flexbox gap em propriedades do CSS e página da Web realçada:
Atualização: esse recurso foi lançado e não é mais experimental.
Veja também:
- Obtendo informações de elemento da sobreposição Inspecionar em Analisar páginas usando a ferramenta Inspecionar.
- Inspecione a grade do CSS.
Adicionar ferramentas rapidamente com o novo botão Mais Ferramentas
Agora você tem uma nova maneira de abrir mais ferramentas no Microsoft Edge DevTools. O ícone Mais Ferramentas é um sinal de adição (+) à direita do painel main. Para mostrar uma lista de outras ferramentas que você pode adicionar ao painel main, clique no ícone Mais Ferramentas (+):
Atualização: esse recurso foi lançado e não é mais experimental.
Veja também:
Tecnologias assistivas agora anunciam posição e contagem de sugestões de CSS
Ao editar regras do CSS, você obtém uma lista suspensa de recursos. Esse recurso não estava disponível para usuários de tecnologias assistivas, pois é anunciado no Microsoft Edge versão 89. Agora, um usuário de tecnologias assistivas pode navegar por sugestões de CSS no painel Estilos . No Microsoft Edge versão 88 e anterior, a tecnologia assistiva anunciada Suggestion como um usuário navegava pela lista de sugestões ao editar CSS no painel Estilos .
No Microsoft Edge versão 89, um usuário de tecnologia assistiva agora ouve a posição e a contagem da sugestão atual. Cada sugestão é anunciada à medida que o usuário navega pela lista de sugestões, como a Sugestão 3 de 5. Para saber mais sobre como escrever CSS no DevTools, confira Referência de recursos do CSS. Para exibir o histórico desse recurso no Chromium projeto de código aberto, consulte Problema 1157329.
Para exibir um vídeo que exibe e lê em voz alta várias sugestões com este experimento ativado, confira Voiceover anunciando opções de devtools no YouTube.
Veja também:
- Navegue pelo painel Estilos em Navegar DevTools com tecnologia assistiva.
- Referência de recursos do CSS
Emular Surface Duo e Samsung Galaxy Fold
Teste a aparência do seu site ou aplicativo nos seguintes dispositivos no Microsoft Edge.
Para acessar o novo recurso de abrangência de tela de mídia do CSS e a getWindowSegments (agora visualViewport.segments) API JavaScript, acesse edge://flags e alterne o sinalizador ao lado de recursos da Plataforma Web Experimental:
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.
Para obter o histórico desse recurso no Chromium projeto de código aberto, consulte Problema 1054281.
Veja também:
- Emular dispositivos móveis (Emulação de Dispositivo).
- Consulta de mídia de segmentos de exibição do CSS para detecção de tela dupla – recurso de abrangência de tela de mídia CSS.
- API do JavaScript visualViewport.segments para dispositivos de tela dupla.
Ferramentas de Desenvolvedor do Microsoft Edge para Visual Studio Code versão 1.1.2
As Ferramentas de Desenvolvedor do Microsoft Edge para Visual Studio Code versão 1.1.2 para Microsoft Visual Studio Code tem as seguintes alterações desde a versão anterior. A Microsoft Visual Studio Code atualiza as extensões automaticamente. Para atualizar manualmente para a versão 1.1.2, consulte Atualizar uma extensão manualmente.
- Adicionado um botão Fechar instância a cada item na lista de destino (#248)
- Versão do Microsoft Edge DevTools de 84.0.522.63 para 85.0.564.40 (#235)
- Incluído "Depurador para Microsoft Edge" como uma dependência (#233).
- Opção de configurações implementadas para alterar temas de extensão (#229)
Você pode arquivar problemas e contribuir para a extensão no repositório do GitHub do vscode-edge-devtools.
Veja também:
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.
Captura de tela do nó de captura além do modo de exibição
No Microsoft Edge versão 89, as capturas de tela do nó são mais precisas, capturando o nó completo mesmo que o conteúdo do nó não esteja visível no modo de exibição. Na ferramenta Elementos , clique com o botão direito do mouse em um elemento e selecione Captura de tela do nó.
Para obter o histórico desse recurso no Chromium projeto de código aberto, consulte Problema 1003629.
Veja também:
- Captura de tela do nó usando o menu de contexto da ferramenta Elements no What's New in DevTools (Microsoft Edge 86)
Atualizações de ferramentas de elementos
Suporte para forçar o estado :target CSS
Na ferramenta Elementos , agora você pode forçar a pseudoclasse :target CSS. A :target pseudoclasse é disparada quando um elemento exclusivo (o elemento de destino) tem um id que corresponde a um fragmento da URL. Por exemplo, a http://www.example.com/index.html#section1 URL dispara a :target pseudoclasse em um elemento HTML com id="section1". Para tentar uma demonstração com a seção 1 realçada, confira Demonstração de destino :CSS :.
Página da Web realçada sem CSS forçado:
:target Página forçada e da Web do CSS realçada:
Para obter o histórico desse recurso no Chromium projeto de código aberto, consulte Problema 1156628.
Veja também:
- Use a simulação de estado para simular o estado do mouse de um item de menu animado em Verificar acessibilidade de todos os estados de elementos.
Usar elementos duplicados para copiar elementos
Use o novo atalho de elemento Duplicado para clonar um elemento. Na ferramenta Elementos , clique com o botão direito do mouse em um elemento e selecione Elemento Duplicado. Um novo elemento é criado no elemento selecionado. Para duplicar o elemento usando o teclado, pressione Shift+Alt+Seta para baixo (Windows, Linux) ou Shift+Option+Seta para baixo (macOS).
Para obter o histórico desse recurso no Chromium projeto de código aberto, consulte Problema 1150797.
Veja também:
Seletores de cores para propriedades CSS personalizadas
O painel Estilos agora exibe seletores de cores para propriedades CSS personalizadas. Para percorrer os formatos RGBA, HSLA e Hex do valor de cor, pressione e segure Shift e clique no seletor de cores:
Para obter o histórico desse recurso no Chromium projeto de código aberto, consulte Problema 1147016.
Veja também:
- Alterar cores com a referência do Seletor de Cores nos recursos do CSS
Copiar classes e propriedades do CSS
Agora você pode copiar as propriedades do CSS mais rapidamente com algumas novas opções no menu com o botão direito do mouse. Na ferramenta Elementos , selecione um elemento. Para copiar o valor, no painel Estilos , clique com o botão direito do mouse em uma classe CSS ou em uma propriedade CSS e selecione uma opção de cópia.
Opções de cópia para uma classe CSS no menu com o botão direito do mouse:
| Opção | Detalhes |
|---|---|
| Seletor de cópia | Copie o nome do seletor atual. |
| Regra de cópia | Copie a regra do seletor atual. |
| Copiar todas as declarações | Copie todas as declarações sob a regra atual, incluindo propriedades não válidas e prefixadas. |
Copie opções para uma propriedade CSS no menu com o botão direito do mouse:
| Opção | Detalhes |
|---|---|
| Copiar declaração | Copie a declaração da linha atual. |
| Propriedade Copy | Copie a propriedade da linha atual. |
| Copiar valor | Copie o valor da linha atual. |
Para obter o histórico desse recurso no Chromium projeto de código aberto, consulte Problema 1152391.
Veja também:
Atualizações de cookies
Nova opção para exibir cookies decodificados por URL
Agora você pode exibir o valor de cookies decodificados por URL no painel Cookies . Para exibir o cookie decodificado, selecioneCookies de Aplicativo>, clique em qualquer cookie na lista e selecione a caixa de seleção ao lado de Mostrar URL decodificada:
Para obter o histórico desse recurso no Chromium projeto de código aberto, consulte Problema 997625.
Veja também:
Filtrar e limpar cookies visíveis
No Microsoft Edge versão 88 ou anterior, a ferramenta De aplicativo só forneceu uma maneira de limpar todos os cookies com o botão Limpar todos os cookies . No Microsoft Edge versão 89, agora você pode selecionar Limpar cookies filtrados para excluir apenas os cookies filtrados.
Para filtrar cookies, selecioneCookies de Aplicativo> e digite na caixa de texto Filtrar. Para excluir os cookies exibidos, clique no botão Limpar cookies filtrados . Para exibir todos os outros cookies, desmarque o texto do filtro.
Para obter o histórico desse recurso no Chromium projeto de código aberto, consulte Problema 978059.
Veja também:
Nova opção para limpar cookies de terceiros no painel Armazenamento
O DevTools agora limpa apenas cookies de primeira parte por padrão. Para limpar somente dados do site e cookies de primeira parte, na ferramenta Aplicativo , na seção Aplicativo na parte superior esquerda, clique em Armazenamento e clique no botão Limpar dados do site .
Para limpar dados do site e todos os cookies, selecioneArmazenamento deAplicativos>. Selecione a caixa de seleção ao lado de incluir cookies de terceiros e clique em Limpar dados do site:
Para obter o histórico desse recurso no Chromium projeto de código aberto, consulte Problema 1012337.
Veja também:
Atualizações de ferramenta de rede
Veja também:
Manter a configuração de log de rede de registro
No Microsoft Edge versão 88 ou anterior, o DevTools redefinirá a configuração de log de rede record quando uma página da Web é atualizada. No Microsoft Edge versão 89, o DevTools agora persiste a configuração de log de rede record :
Para obter o histórico desse recurso no Chromium projeto de código aberto, consulte Problema 1122580.
Veja também:
- Registrar solicitações de rede na referência de recursos de rede.
A opção online agora não é nenhuma opção de limitação
A opção de emulação de rede Online agora é renomeada como Sem Limitação.
Para obter o histórico desse recurso no Chromium projeto de software livre, consulte Problema 1028078.
Veja também:
- Simule uma conexão de rede mais lenta na atividade Inspecionar rede.
- Emular conexões de rede lentas na referência de recursos de rede.
Novas opções de cópia no painel Ferramenta de Console, Fontes e Estilos
Copiar objeto na ferramenta Console e Fontes
Agora você pode copiar valores de objeto nas ferramentas Console e Fontes . A capacidade de copiar valores de objeto é útil ao trabalhar com objetos grandes.
Na ferramenta Console , clique com o botão direito do mouse em um objeto e selecione Copiar objeto.
Na ferramenta Fontes , em um ponto de interrupção, passe o mouse em um objeto, na janela pop-up objeto , clique com o botão direito do mouse em um objeto e selecione Copiar objeto.
Para obter o histórico desse recurso no Chromium projeto de código aberto, consulte Problemas 1148353 e 1149859.
Veja também:
Copiar nome do arquivo no painel Fontes e Estilos
Agora você pode copiar um nome de arquivo usando o menu com o botão direito do mouse.
Na ferramenta Fontes , clique com o botão direito do mouse em um nome de arquivo e selecione Copiar nome do arquivo.
No painel Estilos da ferramenta >Elementos , clique com o botão direito do mouse em um nome de arquivo e selecione Copiar nome do arquivo.
Para obter o histórico desse recurso no Chromium projeto de software livre, consulte Problemas 1155120.
Veja também:
- Visão geral da ferramenta de fontes
- Inspecionar, editar e depurar HTML e CSS com a ferramenta Elementos
Atualizações aos detalhes do quadro
Na ferramenta Aplicativo , a página Quadros tem as atualizações a seguir.
Informações do Service Workers nos detalhes do quadro
A ferramenta Aplicativo agora lista um trabalhador de serviço dedicado no quadro pai. Na figura a seguir, os detalhes do trabalho de serviço são exibidos. Para exibir os detalhes do trabalho de serviço, selecioneTrabalhos de Serviçode Quadros>>topde Aplicativo> e clique em um funcionário do serviço.
Para obter o histórico desse recurso no Chromium projeto de código aberto, consulte Problema 1122507.
Veja também:
Medir informações de memória nos detalhes do quadro
Na página Quadros da ferramenta Aplicativo, o performance.measureMemory() status de API agora é exibido na seção disponibilidade da API. A nova performance.measureMemory() API estima o uso de memória de toda a página da Web.
Para obter o histórico desse recurso no Chromium projeto de código aberto, consulte Problema 1139899.
Veja também:
Quadros descartados na ferramenta Desempenho
Quando você analisa o desempenho de carga na ferramenta Desempenho, a seção Quadros agora marca quadros descartados como vermelhos. Para exibir a taxa de quadros, passe o mouse em um quadro descartado:
Para obter o histórico desse recurso no Chromium projeto de código aberto, consulte Problema 1075865.
Veja também:
- Registrar desempenho de carga na referência de recursos de desempenho
Novo cálculo de contraste de cores – APCA (Advanced Perceptual Contrast Algorithm)
O APCA (Advanced Perceptual Contrast Algorithm) substitui a taxa de contraste de diretrizesAAA do AA/ no Seletor de Cores. O Seletor de Cores é usado na guia Estilos na ferramenta Elementos .
A APCA é uma nova maneira de calcular o contraste. Baseia-se em pesquisas modernas sobre a percepção de cores. Em comparação com as diretrizes AA/AAA, a APCA é mais dependente de contexto. O contraste é calculado com base nas seguintes propriedades espaciais do texto, cor e contexto.
- Propriedades espaciais do texto que incluem peso e tamanho da fonte.
- Propriedades espaciais de cor que incluem contraste percebido entre texto e plano de fundo.
- Propriedades espaciais do contexto que incluem luz ambiente, ambiente e finalidade pretendida.
Para ativar esse experimento, selecione Configurações>Experimentos e selecione a caixa de seleção ao lado de Habilitar o novo APCA (Advanced Perceptual Contrast Algorithm) substituindo a taxa de contraste anterior e as diretrizes AA/AAA. Para exibir o histórico desse recurso no Chromium projeto de software livre, consulte Problema 1121900.
Veja também:
- Habilite a NOVA APCA (Advanced Perceptual Contrast Algorithm) substituindo a taxa de contraste anterior e as diretrizes AA/AAA em recursos experimentais no Microsoft Edge DevTools. Borda 89)_.
- Altere as 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
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.