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

Published on quinta-feira, 9 de março de 2023

Translated to: English, 中文, 日本語

Jecelyn Yeen

Developer Advocate trabalhando no Chrome DevTools no Google.

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.

Atualizações do Gravador

Suporte para extensões de replay

O Gravador apresenta o suporte para opções de replay personalizadas que você pode incorporar no DevTools com uma extensão.

Experimente a extensão de exemplo. Selecione a nova opção de reprodução personalizada para abrir a interface de replay personalizada.

Para personalizar o Gravador de acordo com suas necessidades e integrá-lo às suas ferramentas, considere desenvolver sua própria extensão: explore a API chrome.devtools.recorder e confira mais exemplos de extensão.

Issue relacionada: 1400243.

Gravação com seletores pierce

Além dos seletores personalizados, CSS, ARIA, texto e XPath, agora você pode gravar usando [seletores pierce](https://pptr.dev/guides/ query-selectors#pierce-selectors-pierce). Esses seletores se comportam como os CSS, mas também podem penetrar shadow roots.

Inicie uma nova gravação em uma página com shadow DOM e marque Pierce em Selecione o tipo de Gravação. Registre sua interação com elementos no shadow DOM e inspecione a etapa correspondente.

Configurando o gravador para usar seletores pierce; Seletor pierce em ação.

Issue relacionada: 1411188.

Exportar gravações como um script Puppeteer com análise Lighthouse

O Gravador apresenta uma nova opção de exportação: Puppeteer (incluindo análise do Lighthouse). Com Puppeteer, você pode automatizar e controlar o Chrome. Com Lighthouse, você pode capturar e melhorar o desempenho do seu site.

Abra sua gravação, clique em Exportar, selecione a nova opção e salve o arquivo .js.

Exportar Puppeteer (incluindo análise do Lighthouse).

Execute o script Puppeteer para obter um relatório Lighthouse em um arquivo flow.report.html.

O relatório do Lighthouse foi aberto no Chrome.

Obter extensões

Explore as opções para personalizar sua experiência de gravação, por exemplo, com opções de exportação personalizadas. Obtenha extensões para o Gravador clicando em Exportar > Obter extensões em uma gravação.

Sinta-se à vontade para adicionar sua própria extensão à lista de Extensões do Gravador. Estamos ansiosos para ver a sua extensão na lista!

Issues relacionadas: 1417104, 1413168.

Elementos > Atualizações de estilos

Documentação CSS no painel Estilos

Quantas vezes por dia você procura documentação sobre propriedades CSS? O painel Elementos > Estilos agora mostra uma breve descrição quando você passa o mouse sobre uma propriedade.

O tooltip com documentação sobre uma propriedade CSS.

O tooltip também tem um link Saiba mais que leva você a uma Referência CSS MDN desta propriedade.

Se você conhece bem o CSS, pode achar as dicas incômodas. Para desativá-las, marque Não mostrar .

Para ativá-las novamente, marque Configurações > Preferências > Elementos > Mostrar dica da documentação CSS.

O DevTools extrai as descrições das dicas do VS Code Custom Data.

Issue relacionada: 1401107.

Suporte de aninhamento de CSS

O painel Elementos > Estilos agora reconhece a sintaxe CSS Nesting e aplica estilos aninhados aos elementos certos.

Issue relacionada: 1172985.

Destaque de logpoints e breakpoints condicionais no Console

Nós melhoramos ainda mais a UX do breakpoint, o Console agora destaca mensagens acionadas por breakpoints:

console.* chamadas em breakpoints condicionais com um ponto de interrogação laranja ?

Logpoint mensagens com dois pontos rosa ..

Mudanças na forma como o console agora exibe mensagens acionadas por pontos de interrupção: com ícones e link de origem adequado.

O Console agora fornece links de âncora adequados para breakpoints nos arquivos fonte de origem, em vez de scripts VM<number> que o Chrome cria para executar qualquer parte do Javascript no V8.

Clique no link ao lado da mensagem do breakpoint para pular diretamente para o editor do breakpoint.

O link de âncora ao lado de uma mensagem de logpoint que abre o editor no breakpoint.

Issue relacionada: 1027458.

Ignorar scripts irrelevantes durante a depuração

Para ajudá-lo a se concentrar nas partes mais importantes do seu código, agora você pode adicionar scripts irrelevantes à Ignore List diretamente da árvore de arquivos no painel Código Fonte > Página.

Clique com o botão direito do mouse em qualquer script ou pasta e selecione uma das opções relacionadas a ignorar. Você pode ver opções para adicionar ou remover o script ou pasta de e para a lista. O Debugger ignora scripts adicionado à lista e os omite na pilha de chamadas.

Menus de contexto de uma pasta e script com opções relacionadas a ignorar.

Todos os scripts e pastas listados como ignorados ficam esmaecidos na árvore de arquivos.

Os scripts e pastas listados para ignorar estão esmaecidos, você pode ocultá-los com uma opção experimental no menu suspenso Mais opções.

Se você selecionar um script ignorado, o botão Configurar o levará para Configurações > Ignorar lista. Você também pode ocultar códigos fontes ignorados da árvore de arquivos com > Ocultar arquivos fontes listados como ignorados .

Issue relacionada: 883325.

Início da descontinuação do JavaScript Profiler

Já no Chrome 58, a equipe do DevTools planejava eventualmente descontinuar o JavaScript Profiler e fazer com que os desenvolvedores Node.js e Deno usassem o Painel Desempenho para criação de perfil de desempenho da CPU do JavaScript.

Esta versão do DevTools (112) inicia a depreciação em quatro fases do JavaScript Profiler. O painel JavaScript Profiler agora mostra o banner de aviso correspondente.

Banner de descontinuação na parte superior do Profiler.

Em vez do Profiler, use o painel Performance para criar o perfil da CPU.

Saiba mais e forneça feedback no RFC e crbug.com/1354548 correspondentes.

Issue relacionada: 1417647.

Emulação de contraste reduzido

A guia Renderização adiciona uma nova opção para a lista de emulação deficiências de visão — Contraste reduzido. Com esta opção, você pode descobrir a aparência do seu site para pessoas com sensibilidade reduzida ao contraste.

A opção de contraste reduzido em Renderização > Emular deficiências de visão.

Observe que as opções da lista foram atualizadas para informar qual insensibilidade de cor as opções representam.

Com o DevTools, você pode encontrar e corrigir todos os problemas de contraste de uma só vez. Para obter mais informações, consulte Torne seu site mais legível.

Issues relacionadas: 1412719, 1412721.

Lighthouse 10

O painel Lighthouse agora executa Lighthouse 10.0.1. Para obter mais detalhes, consulte O que há de novo no Lighthouse 10.0.1.

Lighthouse > > Navegação legada agora está desativada por padrão. Esta opção usa a configuração do Lighthouse legada no modo de navegação.

O Lighthouse 10 agora usa o Moto G Power como dispositivo de emulação padrão. DevTools adicionou este dispositivo a Configurações > Dispositivos.

Issue relacionada: 772558.

Outras novidades

Mais algumas novidades dignas de atenção nessa versão:

O painel Código Fonte > Breakpoints agora mostra caminhos de arquivo diferenciados ao lado de nomes de arquivo ambíguos (1403924).

A seção Principal no diagrama de chamas do painel Performance agora designa CpuProfiler::StartProfiling como Profiler Overhead (1358602).

Autocompletar aprimorado do DevTools:

Código Fonte: Conclusões consistentes de qualquer palavra (1320204).

Console: Seta para baixo seleciona a primeira sugestão e as sugestões recebem dicas Tab (1276960).

O DevTools adicionou um event listener para breakpoint para permitir que você faça uma pausa ao abrir uma janela Picture-in-Picture do documento (1315352).

O DevTools configura uma solução alternativa que exibe corretamente os artefatos do webpack Vue2 como JavaScript (1416562).

Uma configuração Console recebe um nome melhor: Expandir automaticamente as mensagens console.trace(). (1139616).

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.

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