Novidades do DevTools (Chrome 112)

Sofia Emelianova

Jecelyn Yeen

Atualizações do Gravador

Suporte para extensões de repetição

O Gravador agora oferece suporte a opções de repetição personalizadas que podem ser incorporadas ao DevTools com uma extensão.

Teste a extensão de exemplo. Selecione a nova opção de repetição personalizada para abrir a interface.

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

Problema do Chromium: 1400243.

Gravar com seletores de perfuração

Além dos seletores personalizados, de CSS, ARIA, texto e XPath, agora é possível gravar usando seletores de penetração. Esses seletores se comportam como os do CSS, mas também podem atravessar raízes shadow.

Inicie uma nova gravação em uma página com shadow DOM e marque Pierce em Tipos de seletor para gravar. Grave sua interação com elementos no shadow DOM e inspecione a etapa correspondente.

Problema do Chromium: 1411188.

Exportar como um script da biblioteca Puppeteer com análise do Lighthouse

O Gravador apresenta uma nova opção de exportação: Puppeteer (incluindo análise do Lighthouse). Com o Puppeteer, é possível automatizar e controlar o Chrome. Com o Lighthouse, é possível capturar e melhorar a performance do seu site.

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

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

Instalar extensões

Confira opções para personalizar sua experiência com o gravador, por exemplo, com opções de exportação personalizadas. Para acessar as extensões do Gravador, clique em Exportar > Acessar extensões em uma gravação.

Adicione sua própria extensão à lista de Extensões do gravador. Esperamos ver o seu na lista!

Problemas do Chromium: 1417104, 1413168.

Elementos > Atualizações de estilos

Documentação do CSS

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

A dica também tem um link Saiba mais que leva a uma referência de CSS da MDN (link em inglês) sobre essa propriedade.

Se você conhece bem o CSS, talvez ache as dicas irritantes. Para desativar todas, marque Não mostrar.

Para reativar, marque Configurações > Preferências > Elementos > Mostrar dica de ferramenta da documentação CSS.

Problema do Chromium: 1401107.

Suporte ao aninhamento de CSS

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

Problema do Chromium: 1172985.

Como marcar pontos de registro e pontos de interrupção condicionais no console

Para melhorar ainda mais a experiência do usuário de pontos de interrupção avançados, o Console agora marca as mensagens acionadas por pontos de interrupção:

• Chamadas console.* em pontos de interrupção condicionais com um ponto de interrogação laranja ?
• Mensagens de logpoint com dois pontos rosas ..

O Console agora oferece links de âncora adequados para pontos de interrupção em arquivos de origem, em vez de scripts VM<number> que o Chrome cria para executar qualquer parte de JavaScript no V8.

Clique no link ao lado da mensagem de ponto de interrupção para acessar diretamente o editor de pontos de interrupção.

Problema do Chromium: 1027458.

Ignorar scripts irrelevantes durante a depuração

Para ajudar você a se concentrar nas partes mais importantes do seu código, agora é possível adicionar scripts irrelevantes à Lista de ignorados diretamente da árvore de arquivos no painel Fontes > Página.

Clique com o botão direito do mouse em um script ou pasta e selecione uma das opções relacionadas a ignorar. Talvez apareçam opções para adicionar ou remover o script ou a pasta da lista. O depurador ignora scripts adicionados à lista e os omite na pilha de chamadas.

Todos os scripts e pastas na lista de ignorados ficam acinzentados na árvore de arquivos.

Se você selecionar um script ignorado, o botão Configurar vai direcionar você para Configurações > Lista de ignorados. Você também pode ocultar as fontes ignoradas da árvore de arquivos com > Ocultar fontes na lista de ignorados .

Problema do Chromium: 883325.

A descontinuação do criador de perfil do JavaScript começou

Desde o Chrome 58, a equipe do DevTools planejou descontinuar o Profiler JavaScript e fazer com que os desenvolvedores do Node.js e do Deno usassem o painel Performance para criar perfis de desempenho da CPU JavaScript.

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

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

Saiba mais e envie feedback na RFC e em crbug.com/1354548 correspondentes.

Problema do Chromium: 1417647.

Emular contraste reduzido

A guia Rendering adiciona uma nova opção à lista Emulate vision deficiencies: Reduced contrast. Com essa opção, você pode descobrir como seu site aparece para pessoas com sensibilidade reduzida ao contraste.

As opções da lista foram atualizadas para informar qual insensibilidade a cores elas representam.

Com o DevTools, você pode encontrar e corrigir todos os problemas de contraste de uma só vez. Para mais informações, consulte Melhorar a legibilidade do seu site.

Problemas do Chromium: 1412719, 1412721.

Farol 10

O painel Lighthouse agora executa o Lighthouse 10.0.1. Para mais detalhes, consulte Novidades no Lighthouse 10.0.1.

Para aprender os conceitos básicos de uso do painel Lighthouse nas DevTools, consulte Lighthouse: otimizar a velocidade do site.

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

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

Problema do Chromium: 772558.

Um aviso do console para remover o manipulador de busca do service worker sem operação

O Chrome 112 ignora os gerenciadores de busca de service worker sem operação porque eles podem deixar a navegação mais lenta, mas não têm uma finalidade. Esses gerenciadores não são mais necessários para que seu site se qualifique como um App Web Progressivo.

O Console agora mostra um aviso se encontrar um manipulador de busca sem operação no seu site. Considere remover.

Problema do Chromium: 1347319.

Destaques diversos

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

• O painel Fontes > Pontos de interrupção agora mostra caminhos de arquivo diferenciados ao lado de nomes de arquivo ambíguos (1403924).
• A seção Principal no gráfico de chamas do painel Desempenho agora designa CpuProfiler::StartProfiling como Profiler Overhead (1358602).
• Melhorias no preenchimento automático do DevTools:
  • Fontes: conclusões consistentes de qualquer palavra (1320204).
  • Console: Arrow down seleciona a primeira sugestão, e as sugestões recebem dicas Tab (1276960).
• O DevTools adicionou um ponto de interrupção do listener de eventos para permitir que você pause ao abrir uma janela picture-in-picture de documento (1315352).
• O DevTools configurou uma solução alternativa que mostra corretamente os artefatos do webpack do Vue2 como JavaScript (1416562).
• Uma configuração do Console recebe um nome melhor: "Expandir automaticamente as mensagens console.trace()". (1139616).

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.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

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