Novidades no DevTools (Chrome 123)

Sofia Emelianova
Sofia Emelianova
GitHub

Encontre o easter egg

Para comemorar o Dia da Mentira deste ano Dia, a equipe do DevTools escondeu um easter egg em algum lugar do DevTools.

Para encontrá-lo, procure um emoji colorido 💫

Atualizações do painel Elementos

Essa versão traz várias atualizações ao painel Elementos.

Emular uma página em foco em Elementos > Estilos

Na seção Elementos > A guia Estilos agora tem a opção check_box Emulate uma página em foco sob o botão Alternar estado dos elementos (:hov). Antes, essa opção só era encontrada no painel Renderização.

Se você mudar o foco da página para DevTools, alguns elementos de sobreposição serão ocultados automaticamente se forem acionados pelo foco. Por exemplo, listas suspensas, menus ou seletores de data. A opção Emular uma página em foco permite depurar esse elemento como se ele estivesse em foco.

O antes e o depois emulando uma página em foco na guia "Estilos".

Problema do Chromium: 1468393.

Seletor de cores, Relógio Ângulo e Editor de Easing em substitutos do var()

Para simplificar a edição de CSS, o menu Elementos > A guia Estilos agora permite usar o seletor de cores, Ângulo de relógio e Easing Editor em var() substitutos.

O antes e o depois da renderização das ferramentas Seletor de cores, Relógio Angle e Easing Editor em substitutos var().

Problema do Chromium: 1520417.

A ferramenta de comprimento de CSS foi descontinuada

O uso da ferramenta de criação de comprimento de CSS foi descontinuado devido ao feedback de que ela torna o fluxo de trabalho mais lenta e não agrega muito valor.

Não é mais possível arrastar para ajustar o valor nem selecionar um tipo de unidade no menu suspenso. Em vez disso, clique duas vezes no valor e digite um novo.

Para ativar a ferramenta de comprimento novamente, limpe as configurações Configurações > Experimentos > check_box Suspender o uso do CSS <length> ferramenta de criação na guia "Estilos".

Se você ainda quiser usar essa ferramenta, a equipe do DevTools gostaria de saber sua opinião e saber como a ferramenta de comprimento ajuda no seu fluxo de trabalho. Deixe seu feedback em crbug/1522657.

O experimento de descontinuação está desativado.

Use o pop-up para encontrar o resultado da pesquisa selecionado na página "Desempenho" > Faixa principal

Para facilitar a pesquisa, use o Flame Chart em Desempenho > A faixa Principal agora mostra um pop-over na parte superior do evento correspondente quando você navega pelos resultados da pesquisa.

O antes e o depois mostrando um pop-up sobre o resultado da pesquisa selecionado.

Problema do Chromium: 1523279.

Atualizações do painel Network

Esta versão traz algumas atualizações no painel Network.

Botão "Limpar" e "Filtro de pesquisa" em "Rede" Guia EventStream

No campo Rede > A guia EventStream recebe:

  • Um botão block Clear que limpa os eventos capturados na tabela.
  • Um filtro de pesquisa que entende expressões regulares.

O antes e o depois de adicionar um botão &quot;Limpar&quot; e um filtro de pesquisa.

A equipe do DevTools agradece a Charles Vazac (link em inglês) por lançar esse recurso.

Além disso, a guia EventStream agora também captura eventos que os servidores enviam por busca/XHR, não apenas pela API EventSource. Confira esta página de demonstração.

Problema do Chromium: 1488863, 40659493.

Dicas com motivos de isenção para cookies de terceiros em Rede > Cookies

No campo Rede > A guia Cookies agora mostra dicas com motivos de isenção ao lado dos cookies que, de outra forma, deveriam ter sido bloqueados pela desativação de cookies de terceiros.

O antes e o depois mostrando uma dica com um motivo de isenção para um cookie de terceiros.

Cookies de terceiros podem ser permitidos pelos seguintes motivos:

Problema do Chromium: 41491846.

Ativar e desativar todos os pontos de interrupção em origens

No menu Fontes > A seção Pontos de interrupção traz de volta as opções Ativar e Desativar todos os pontos de interrupção para o menu suspenso. Antes, essas opções eram deixadas de fora pelo novo design dos pontos de interrupção.

Para ativar ou desativar todos os pontos de interrupção, clique com o botão direito do mouse em um deles em Fontes > Pontos de interrupção e selecione a opção correspondente.

O antes e depois de trazer de volta as opções de ativação e desativação.

Problema do Chromium: 1522037.

Conferir os scripts carregados no DevTools para Node.js

O DevTools para Node.js agora mostra os scripts carregados na árvore de navegação em Origens > Scripts.

O antes e o depois de adicionar a guia &quot;Scripts&quot; com uma árvore de scripts carregados.

Problema do Chromium: 1518364.

Lighthouse versão 11.5.0

O painel Lighthouse agora executa o Lighthouse 11.5.0. Veja a lista completa de mudanças.

Entre as mudanças notáveis está uma nova auditoria que estima as causas-raiz das mudanças de layout. Essa auditoria substitui a auditoria de elementos de layout, que listava apenas os elementos afetados por mudanças de layout.

Uma nova auditoria que estima as causas-raiz das mudanças de layout.

Para aprender os conceitos básicos do uso do painel Lighthouse no DevTools, consulte Lighthouse: otimizar a velocidade do site.

Problema do Chromium: 772558.

Acessibilidade

Esta versão tem as seguintes melhorias de acessibilidade:

  • Os leitores de tela anunciam:
    • O texto do link Saiba mais ao lado dos tipos de seletor no painel Gravador.
    • Quando nenhum experimento corresponder ao filtro nas configurações Configurações > Experimentos.
    • A confirmação da ação ao remover, confirmar ou restaurar um atalho nas configurações Configurações > Atalhos.
  • A tabela em Configurações Configurações > Locais agora são renderizados corretamente como uma tabela para ferramentas de acessibilidade.

Problemas do Chromium: 1516957, 324282443, 324467508, 324930007.

Destaques diversos

Estas são algumas correções e melhorias importantes feitas nesta versão:

  • As fontes no DevTools foram atualizadas para corresponder ao Chrome (1523538).
  • Desempenho: a exibição de capturas de tela ao passar o cursor sobre a linha do tempo foi corrigida (1519469).
  • Fontes: a altura da linha no Editor foi aumentada para melhorar a legibilidade do código (1523640).
  • Rede > Respostas: corrigimos vários problemas de exibição com diferentes formatos e codificações (1523128, 1509336, 1523128, 41481944, 1509336).

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento dão acesso aos recursos mais recentes do DevTools, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.

  • Envie uma sugestão ou feedback pelo site crbug.com.
  • Informe um problema do DevTools usando Mais opções   Mais > Ajuda > Relate problemas no DevTools no DevTools.
  • Tuíte em @ChromeDevTools.
  • Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo que foi abordado na série Novidades no DevTools.