Novidades no DevTools (Chrome 123)

Sofia Emelianova
Sofia Emelianova
GitHub

Encontrar o easter egg

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

Para encontrar, procure um emoji 💫 colorido.

Atualizações do painel Elementos

Esta versão traz várias atualizações para o painel Elementos.

Emular uma página em foco em "Elementos" > "Estilos"

A guia Elementos > Estilos agora tem a opção Emular uma página em foco no botão Alternar estado dos elementos (:hov). Antes, essa opção só estava disponível no painel Renderização.

Se você mudar o foco da página para o 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 um 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 de ângulo e editor de suavização em substituições de var()

Para simplificar a edição de CSS, a guia Elementos > Estilos agora permite usar o Seletor de cores, o Relógio de ângulos e o Editor de suavização em substituições var().

O seletor de cores, o relógio de ângulo e o editor de suavização antes e depois da renderização em substituições var().

Problema do Chromium: 1520417.

A ferramenta de comprimento do CSS está descontinuada

A ferramenta de criação de comprimento de CSS foi descontinuada devido ao feedback de que ela diminui o fluxo de trabalho e não agrega muito valor.

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

Para reativar a ferramenta de comprimento, limpe Configurações > Experimentos > Descontinuar a ferramenta de criação de CSS <length> na guia "Estilos".

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

O experimento de descontinuação está desativado.

Popover para o resultado da pesquisa selecionado em "Performance" > "Faixa principal"

Para facilitar a pesquisa, o gráfico de chamas na faixa Performance > Principal agora mostra um popover na parte de cima do evento correspondente quando você navega pelos resultados da pesquisa.

O antes e o depois mostrando um popover sobre o resultado da pesquisa selecionado.

Problema do Chromium: 1523279.

Atualizações do painel "Network"

Esta versão traz algumas atualizações para o painel Rede.

Botão "Limpar" e filtro de pesquisa na guia "Rede" > "EventStream"

A guia Rede > EventStream recebe:

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

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

A equipe do DevTools agradece a Charles Vazac 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 a API EventSource. Teste nesta página de demonstração.

Problema do Chromium: 1488863, 40659493.

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

A guia Rede > Cookies agora mostra dicas com motivos de isenção ao lado dos cookies que deveriam ter sido bloqueados pela descontinuação de cookies de terceiros.

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

Os cookies de terceiros podem ser permitidos pelos seguintes motivos:

Problema do Chromium: 41491846.

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

A seção Fontes > Pontos de interrupção traz de volta as opções Ativar e Desativar todos os pontos de interrupção ao menu suspenso. Antes, essas opções não eram incluídas no redesign 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 ponto de interrupção em Fontes > Pontos de interrupção e selecione a opção correspondente.

O antes e o depois de trazer de volta as opções de ativar e desativar.

Problema do Chromium: 1522037.

Ver scripts carregados no DevTools para Node.js

As DevTools para Node.js agora mostram scripts carregados na árvore de navegação em Fontes > Scripts.

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

Problema do Chromium: 1518364.

Lighthouse 11.5.0

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

Entre as mudanças notáveis, há uma nova auditoria que estima as causas principais das mudanças de layout. Essa auditoria substitui a "layout-shift-elements", que listava apenas os elementos afetados por mudanças no layout.

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

Para aprender os conceitos básicos de uso do painel Lighthouse nas 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 agora anunciam:
    • O texto do link Saiba mais ao lado dos tipos de seletor no painel Gravador.
    • Quando nenhum experimento corresponde ao filtro em Configurações > Experimentos.
    • A confirmação da ação ao remover, confirmar ou restaurar um atalho em Configurações > Atalhos.
  • A tabela em Configurações > Locais agora é renderizada corretamente como uma tabela para ferramentas de acessibilidade.

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

Destaques diversos

Confira algumas correções e melhorias importantes nesta versão:

  • As fontes no DevTools foram atualizadas para corresponder ao Chrome (1523538).
  • Performance: corrigimos a exibição de capturas de tela ao passar o cursor sobre a linha do tempo (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).

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada aos DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.