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

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

# 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.

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.

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.

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.

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.

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.

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 source maps 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.

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

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.

Issue relacionada: 1337777

# Melhorias no Source map

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

• O DevTools agora resolve corretamente os identificadores do source map 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 source map para construtores com uma chamada de método super.

  

• Indexação de URL do source map 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     > 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 112

• Atualizações do Gravador
• Extensões de replay no Gravador
• Gravação com seletores pierce
• Exportar gravações como um script Puppeteer com análise Lighthouse
• Obter extensões
• Elementos > Atualizações de estilos
• Documentação CSS no painel Estilos
• Suporte de aninhamento de CSS
• Destaque de logpoints e breakpoints condicionais no Console
• Ignorar scripts irrelevantes durante a depuração
• Início da descontinuação do JavaScript Profiler
• Emulação de contraste reduzido
• Lighthouse 10
• Outras novidades

# Chrome 111

• Debugging de cores HD no painel de Estilos
• Melhorias na UX dos breakpoints
• Atalhos customizáveis no Gravador
• Melhor syntax highlighting para Angular
• Reorganize caches no painel de Aplicação
• Outras novidades

# Chrome 110

• Limpeza do painel Performance ao recarregar
• Novidades no Gravador
• Veja e realçe códigos do fluxo do usuário no Gravador
• Customize os tipos de seletores de uma gravação
• Edição de fluxo de usuário durante a gravação
• Auto formatação de código na mesma aba
• Melhor syntax highlight para Vue, SCSS e mais
• Autocomplete ergonômico e consistente no Console
• Outras novidades

# Chrome 109

• Gravador: opção "copiar como" para etapas, reprodução na página, no menu de contexto da etapa
• Mostra os nomes das funções reais nas gravações da performance
• Novos atalhos de teclado no painel Console e fontes
• Depuração de JavaScript aprimorada
• Outros destaques
• [Experimental] UX aprimorado no gerenciamento de breakpoints
• [Experimental] Formatação automática (pretty print) no mesmo painel

# Chrome 108

• Hints para propriedades CSS inativas
• Detectação automática de XPath e seletores de texto no painel Gravador
• Percorrer expressões separadas por vírgulas
• Configuração de lista de ignorados aprimorada
• Destaques diversos

# Chrome 107

• Personalize atalhos de teclado no DevTools
• Alternar temas claros e escuros com atalho de teclado
• Highlight de objetos C/C++ no Inspetor de Memória
• Suporte a informações completas do Initiator para importação HAR
• Inicie a pesquisa DOM depois de pressionar Enter
• Exibir ícones start e end para propriedades flexbox CSS align-content
• Destaques diversos

# Chrome 106

• Agrupamento de arquivos por Original / Publicado no painel de fontes
• Stack traces completos para operações assíncronas
• Ignore os scripts de terceiros conhecidos automaticamente
• Melhorias no call stack durante o debugging
• Escondendo fontes na lista de ignorados do painel de Fontes
• Escondendo arquivos ignorados no Command Menu
• Nova trilha de interações no painel de performance
• Detalhamento de tempos de LCP no painel de Performance Insights
• Nomes padrão auto-gerados para as gravações do painel do Gravador
• Outras novidades

# Chrome 105

• Replay passo a passo no Recorder
• Suporte ao evento do mouse over no painel do Recorder
• Largest Contentful Paint (LCP) no painel de insights de desempenho
• Identificação de flashes de texto (FOIT, FOUT) como possíveis causas-raiz para mudanças de layout
• Handlers de protocolo no painel Manifesto
• Selo da camada superior no painel Elementos
• Anexar informações de depuração do Wasm em tempo de execução
• Suporta edição ao vivo durante a depuração
• Visualize e edite @scope em regras no painel Estilos
• Melhorias no Source map
• Outras mudanças

# Chrome 104

• Reinicialização de frame durante o debugging
• Opção de replay lento no painel de gravação
• Construa uma extensão para o painel de gravação
• Agrupar arquivos por Autoral/Publicado no painel Sources
• Nova trilha de Tempos de Usuários no painel de Performance insights
• Revelar o slot atribuído de um elemento
• Simular a concorrência de hardware para gravações de desempenho
• Visualize valores de non-color ao preencher automaticamente as variáveis CSS
• Identifique os quadros de bloqueio no painel de Back/forward cache
• Melhorias nas sugestões de autocomplete para objetos JavaScript
• Melhorias em source maps
• Outras melhorias

# Chrome 103

• Gravação de eventos de clique duplo e clique com o botão direito do mouse
• Novo intervalo de tempo e modo de instantâneo no painel Lighthouse
• Controle de zoom aprimorado no painel Performance Insights
• Confirmação para excluir uma gravação de apresentação
• Reordenar painéis no painel Elementos
• Escolhendo uma cor fora do navegador
• Visualização aprimorada do valor inline durante a depuração
• Suporte a blobs grandes para autenticadores virtuais
• Novos atalhos de teclado no painel Sources
• Melhorias nos source maps

# Chrome 102

• Prévia de funcionalidade: Novo painel de insights de performance
• Novos atalhos para emular temas claros e escuros
• Melhorias na segurança da aba de Visualização de Rede
• Melhorias no reload em breakpoints
• Atualizações no Console
• Cancelamento de gravações de fluxo de usuário no início
• Veja pseudo-elementos herdados de seleção no painel de Estilos
• Outras novidades
• [Experimental] Copie mudanças de CSS
• [Experimental] Escolhendo cores fora do browser

# Chrome 101

• Importe e exporte fluxos de usuário gravados como um arquivo JSON
• Visualize cascade layers no painel Estilos
• Suporte para a função de cor hwb()
• Melhoria na exibição de propriedades privadas
• Destaques diversos
• [Experimental] Novos modos timespan e snapshot no painel Lighthouse

# Chrome 100

• Visualize e edite @supports em rules no painel Estilos
• Suporte a seletores comuns por padrão
• Personalize o seletor de gravação
• Renomeação de gravação
• Visualização de propriedades de classe/função ao passar o mouse
• Quadros parcialmente apresentados no painel Desempenho
• Destaques diversos

# Chrome 99

• Limitando requests de WebSocket
• Novo painel API de relatórios no painel Aplicativo
• Suporte para esperar até que o elemento esteja visível/clicável no painel Gravação
• Melhor estilização, formatação e filtragem no console
• Debug de extensões do Chrome com arquivos de source map
• Árvore de pastas aprimorada no painel Fontes
• Exibição arquivos fontes de workers no painel Origens
• Atualizações na funcionalidade de tema escuro automático do Chrome
• Seletor de cores amigável ao toque e painel dividido
• Destaques diversos

# Chrome 98

• Prévia de funcionalidade: Árvore de acessibilidade da página
• Alterações mais precisas na guia Alterações
• Defina um tempo limite mais longo para a gravação do fluxo do usuário
• Verifique se suas páginas podem ser armazenadas em cache com a guia Cache Voltar/Avançar
• Novo filtro do painel Propriedades
• Emular o recurso de mídia CSS cores forçadas
• Mostrar réguas no comando hover
• Suporte row-reverse e column-reverse no editor Flexbox
• Novos atalhos de teclado para reproduzir XHR e expandir todos os resultados da pesquisa
• Lighthouse 9 no painel Lighthouse
• Painel de fontes melhorado
• Destaques diversos
• [Experimental] Endpoints no painel API de relatórios

# Chrome 97

• Prévia de funcionalidade: Novo painel de Gravação
• Atualização da lista de dispositivos no modo de Dispositivo
• Preenchimento automático do Editar como HTML
• Melhoria na experiência de Debug
• Sincronizando as configurações do DevTools entre dispositivos

# Chrome 96

• Prévia de funcionalidade: novo painel de visão geral CSS
• Experiência de edição e cópia de comprimento de CSS foi restaurada e aprimorada
• Emule o recurso de prefers-contrast para CSS media
• Emule o recurso Auto Dark Theme do Chrome
• Copie as declarações como JavaScript no painel Estilos
• Nova guia Payload no painel Rede
• Melhoria na exibição de propriedades no painel Propriedades
• Opção para ocultar erros CORS no console
• Visualização e avaliação adequadas de objetos Intl no Console
• Consistência em stack traces assíncronos
• Mantida a barra lateral do console
• Obsolescência do Painel de cache no painel do Aplicativo
• [Experimental] Novo painel da API de relatórios no painel do aplicativo

# Chrome 95

• Nova ferramenta de edição de comprimentos CSS
• Ocultar problemas na guia Issues
• Melhorias na exibição de propriedades
• Lighthouse 8.4 no painel Lighthouse
• Ordenação dos snippets no painel Sources
• Novos links para notas de versão traduzidas e relatar um bug de tradução
• Melhoria de UI para o menu de comandos do DevTools

# Chrome 94

• Utilize o DevTools em seu idioma preferido
• Novos dispositivos Nest Hub na lista de dispositivos
• Origin trials na visão Frame Detail
• Novo ícone de consultas de contêiner CSS
• Nova caixa de seleção para inverter os filtros de rede
• Depreciação da barra lateral do Console
• Exibição dos cabeçalhos Set-Cookie na guia Issues e no painel Network
• Exibição consistente dos acessores nativos como propriedades no Console
• Adequação dos stacks traces para scripts inline com #sourceURL
• Alteração do formato da configuração da cor no painel Computed
• Substituição dos tooltips customizados por tooltips nativos do HTML
• Experimental - Ocultar problemas na guia Issues

# Chrome 93

• Consultas de contêiner CSS editáveis no painel Styles
• Prévia do web-bundle no painel Network
• Depuração da Attribution Reporting API
• Melhor manejo de string no console
• Depuração CORS aprimorada
• Lighthouse 8.1
• Exibir o novo URL da nota no painel Manifest
• Seletores de correspondência de CSS corrigidos
• Respostas JSON Pretty-printing no painel Network