Novidades no DevTools (Chrome 123)

Sofia Emelianova
Sofia Emelianova
GitHub

Encontre o ovo de Páscoa

Para comemorar o Dia da Mentira deste ano, a equipe do DevTools escondeu um ovo de Páscoa em algum lugar das Ferramentas do desenvolvedor.

Para encontrá-lo, 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 vão se ocultar 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.

Antes e depois da emulação de uma página em foco na guia "Styles".

Problema do Chromium: 1468393.

O seletor de cores, o relógio de ângulo e o editor de suavização em substitutos de var()

Para simplificar a edição de CSS, a guia Elements > Styles agora permite usar o Color Picker, o Angle Clock e o Easing Editor em substitutos var().

As ferramentas de renderização antes e depois do Color Picker, Angle Clock e Easing Editor em var() foram substituídas.

Problema do Chromium: 1520417.

A ferramenta de comprimento do CSS foi descontinuada

A ferramenta de criação de comprimento CSS foi descontinuada devido a feedback de que ela diminui a velocidade do fluxo de trabalho 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 reativar a ferramenta de comprimento, limpe Settings > Experiments > Deprecate CSS <length> authoring tool in the Styles tab.

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

O experimento de descontinuação foi 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 pop-up sobre o evento correspondente quando você alterna entre os 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 de rede

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

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

A guia Network > 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 gostaria de agradecer a Charles Vazac por lançar esse recurso.

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

Problema do Chromium: 1488863, 40659493.

Tooltips 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 o motivo da isenção de 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 "Origens"

A seção Breakpoints > Sources 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 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 Origens > Pontos de interrupção e selecione a opção correspondente.

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

Problema do Chromium: 1522037.

Conferir scripts carregados nas Ferramentas do desenvolvedor para Node.js

As Ferramentas do desenvolvedor para Node.js agora mostram os scripts carregados na árvore de navegação em Origens > Scripts.

Antes e 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. Consulte a lista completa de mudanças.

Entre as mudanças importantes, há uma nova auditoria que estima as causas-raiz das mudanças de layout. Essa auditoria substitui a auditoria de elementos de mudança 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 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 Recorder.
    • Quando nenhum experimento corresponde ao filtro em Configurações > Experimentos.
    • A confirmação de 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 desta versão:

  • As fontes no DevTools foram atualizadas para corresponder ao Chrome (1523538).
  • Performance: correção da 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: foram corrigidos 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 navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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 ao DevTools.

Novidades no DevTools

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