O que há de novo no DevTools (Chrome 105)

Published on Updated on

Translated to: English, Español, 한국어, 中文, Pусский, 日本語

Tradução realizada por Alvaro Camillo Neto . Revisão por Lucas Santos.

Interessado em ajudar a melhorar o DevTools? Inscreva-se para participar da Pesquisa de usuário do Google.

Replay passo a passo no Recorder

Agora você pode definir um breakpoint e reproduzir um fluxo de usuário passo a passo no painel Recorder.

Para definir um breakpoint, clique no ponto azul ao lado de uma etapa. Reproduza seu fluxo de usuário, a reprodução será pausada antes de executar a etapa. A partir daqui, você pode continuar a reprodução, executar uma etapa ou cancelar a reprodução.

Com esse recurso, você pode visualizar e depurar totalmente seu fluxo de usuários com facilidade.

Consulte Referência de recursos do Recorder para obter mais informações.

Replay passo a passo no Recorder

Issue relacionada: 1257499

Suporte ao evento do mouse over no painel do Recorder

O Recorder agora é compatível com a adição manual de uma etapa de passar o mouse (hover) em uma gravação.

Esta demonstração mostra um menu pop-up ao passar o mouse. Tente gravar um fluxo de usuário e clique em um item de menu.

Se você reproduzir o fluxo do usuário agora, ele falhará porque o Recorder não captura eventos do mouse over automaticamente durante a gravação. Para resolver isso, adicione uma etapa manualmente para passar o mouse sobre o seletor antes de clicar no item de menu.

Suporte ao evento mouse over no Recorder

Issue relacionada: 1257499

Largest Contentful Paint (LCP) no painel de insights de desempenho

O LCP é uma métrica importante e centrada no usuário para medir a velocidade de carga percebida. Agora você pode descobrir os caminhos críticos e as causas-raiz de uma Largest Contentful Paint (LCP).

Em uma gravação de desempenho, clique no selo do LCP na Linha do tempo. No painel Detalhes, você pode ver a pontuação do LCP, saber como corrigir recursos que tornam o LCP mais lento e ver o caminho crítico para o recurso do LCP.

Consulte Performance Insights para saber como obter insights acionáveis e melhorar o desempenho do seu site com o painel. LCP no painel de insights de desempenho

Issue relacionada: 1326481

Identificação de flashes de texto (FOIT, FOUT) como possíveis causas-raiz para mudanças de layout

O painel Performance Insights agora detecta flash de texto invisível (FOIT) e flash de texto sem estilo (FOUT) como raiz potencial causas para mudanças de layout.

Para ver as possíveis causas principais de uma mudança de layout, clique em uma captura de tela na faixa Mudanças de layout.

Consulte Otimizar carregamento e renderização de WebFont para aprender a técnica para evitar mudanças de layout.

FOUT no painel de insights de desempenho

Issue relacionadas: 1334628, 1328873

Handlers de protocolo no painel Manifesto

Agora você pode usar o DevTools para testar o registro do handler do protocolo da URL para [Progressive Web Apps (PWA)](https://web.dev/learn/ pwa/).

O registro do handler de protocolo de URL permite que os PWAs instalados manipulem links que usam um protocolo específico (por exemplo, magnet, web+example) para uma experiência mais integrada.

Navegue até a seção Handlers de Protocolos no painel Aplicação > Manifesto. Você pode visualizar e testar todos os protocolos disponíveis aqui.

Por exemplo, instale este PWA de demonstração. Na seção Handlers de Protocolos, digite “americano” e clique em Teste protocolo para abrir a página do café no PWA.

Handlers de protocolo no painel Manifesto

Issue relacionadas: 1300613

Selo da camada superior no painel Elementos

Use o emblema da camada superior para entender o conceito da camada superior e visualizar como o conteúdo da camada superior muda.

O elemento <dialog> tornou-se recentemente estável nos navegadores. Quando você abre uma caixa de diálogo, ela é colocada em uma camada superior. O conteúdo de nível superior é renderizado em cima de todo o outro conteúdo.

Nesta demonstração, clique em Abrir caixa de diálogo.

Para ajudar a visualizar os elementos da camada superior, o DevTools adiciona um contêiner da camada superior (#top-layer) à árvore DOM. Ele reside após a tag de fechamento </html>.

Para pular do elemento do contêiner da camada superior para o elemento da árvore da camada superior, clique no botão revelar ao lado do elemento ou de seu plano de fundo no contêiner da camada superior.

Ao lado do elemento de árvore da camada superior (por exemplo, o elemento de diálogo), clique no emblema camada superior para ir para o contêiner da camada superior.

Selo da camada superior no painel Elementos

Issue relacionada: 1313690

Anexar informações de depuração do Wasm em tempo de execução

Agora você pode anexar informações de depuração DWARF para wasm durante o tempo de execução. Anteriormente, o painel Fontes só suportava anexar sourcemaps a arquivos JavaScript e Wasm.

Abra um arquivo Wasm no painel Fontes. Clique com o botão direito do mouse no editor e selecione Adicionar informações de depuração DWARF… para anexar informações de depuração sob demanda.

ALT_TEXT_HERE

Issue relacionada: 1341255

Suporta edição ao vivo durante a depuração

Agora você pode editar a função mais alta na pilha sem reiniciar o depurador.

No Chrome 104, o DevTools traz de volta o recurso reiniciar frame. No entanto, você não conseguia editar a função na qual está pausado no momento. É comum os desenvolvedores interromperem uma função e editarem essa função enquanto estiverem pausados.

Com esta atualização, o depurador reinicia automaticamente a função com as seguintes restrições:

  • Apenas a função mais alta pode ser editada enquanto pausada
  • Nenhuma chamada recursiva na mesma função mais abaixo na pilha
edição ao vivo durante a depuração

Issue relacionada: 1334484

Visualize e edite @scope em regras no painel Estilos

Agora você pode visualizar e editar a funcionalidade do CSS @scope at-rules no painel Estilos.

O @scope at rules faz parte da especificação CSS Cascading and Inheritance Level 6. Essas regras permitem aos desenvolvedores definir o escopo das regras de estilo em CSS.

Abra esta página de demonstração e inspecione o hiperlink dentro do elemento <div class=”dark-theme”>. No painel Estilos, veja as regras do @scope. Clique na declaração de regra para editá-la.

O CSS @scope está atualmente em desenvolvimento. Para testar esse recurso, ative o sinalizador Recursos da Plataforma Web Experimental em chrome://flags/#enable-experimental-web-platform-features.

@scope em regras no painel Estilos

Issue relacionada: 1337777

Melhorias no Sourcemap

Aqui estão algumas correções nos sourcemaps para melhorar a experiência geral de depuração:

  • O DevTools agora resolve corretamente os identificadores do sourcemap com pontuação. Alguns minifiers modernos (por exemplo, esbuild) produzemsourcemap que mesclam identificadores com pontuação subsequente (vírgula, parênteses, ponto e vírgula).
  • DevTools agora resolve nomes de sourcemap para construtores com uma chamada de método super.

    ALT_TEXT_HERE
  • Indexação de URL do sourcemap corrigida para URLs canônicos duplicados. Anteriormente, os breakpoints não eram ativados em alguns arquivos devido a URLs canônicos duplicados.

Issue relacionada: 1335338, 1333411

Outras mudanças

Estas são algumas correções dignas de nota nesta versão:

  • Remoção correta de um par de valores de chave de armazenamento local da tabela no painel Aplicativo > Armazenamento local quando ele for excluído. (1339280)
  • As visualizações de cores agora são exibidas corretamente ao visualizar arquivos CSS no painel Fontes. Anteriormente, suas posições eram equivocadas. (1340062)
  • Exiba consistentemente os itens de grade e flex CSS no painel Layout, bem como exiba-os como emblemas no painel Elementos. Anteriormente, os itens flex e grid estavam ausentes aleatoriamente em ambos os lugares. (1340441, 1273992)
  • Um novo link Creator Ad Script está disponível para ad frames se o DevTools encontrar o script que fez com que o frame fosse rotulado como um anúncio. Você pode abrir um frame em Aplicativo > Frames. (1217041)

Baixe os canais de prévia

Considere usar o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de prévia fornecem acesso aos recursos do DevTools mais recentes, testam nas últimas APIs da plataforma web lançadas e encontram problemas em seu site antes que seus usuários o façam!

Entre em contato com a equipe Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças nesse artigo ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou comentários para nós pelo crbug.com.
  • Relate um problema de DevTools usando o More options   More   > Help > Report a DevTools issues em DevTools.
  • Mande um tweet para @ChromeDevTools.
  • Deixe comentários em nossos vídeos "What's new in DevTools" no YouTube.

Mais recursos do DevTools

Consulte a versão em inglês do What's New In DevTools para uma lista completa dos recursos lançados. Abaixo estão alguns conteúdos que foram traduzidos para o português.

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.