Novidades do DevTools (Chrome 112)

Atualizações do Gravador

Suporte a extensões de repetição

O Gravador 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 de repetição personalizada.

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

Problema do Chromium: 1400243.

Gravar com seletores de perfuração

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

Inicie uma nova gravação em uma página com DOM de sombra 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 do Puppeteer com a análise do Lighthouse

O Gravador apresenta uma nova opção de exportação: Puppeteer (incluindo a análise do Lighthouse). Com o Puppeteer, você pode automatizar e controlar o Chrome. Com o Lighthouse, você pode 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 as opções para personalizar sua experiência com o gravador, por exemplo, com opções de exportação personalizadas. Para receber extensões para o Gravador, clique em Exportar > Receber 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 você a uma referência do CSS da MDN sobre essa propriedade.

Se você conhece bem o CSS, talvez as dicas de ferramentas sejam incômodas. Para desativar todos, marque Não mostrar.

Para reativá-las, marque Configurações > Preferências > Elementos > Mostrar dica de ferramenta da documentação do CSS.

Problema do Chromium: 1401107.

Suporte a aninhamento de CSS

O painel Elements > Styles agora reconhece a sintaxe de aninhamento de CSS 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 UX de pontos de interrupção, o Console agora marca mensagens acionadas por pontos de interrupção:

• console.* chama pontos de interrupção condicionais com um ponto de interrogação laranja ?
• Mensagens de Logpoint com dois pontos cor-de-rosa ..

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 do Javascript no V8.

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

Problema do Chromium: 1027458.

Ignorar scripts irrelevantes durante a depuração

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

Clique com o botão direito do mouse em qualquer script ou pasta e selecione uma das opções relacionadas ao modo de ignorar. Talvez você veja opções para adicionar ou remover o script ou a pasta da lista. O depuração ignora scripts adicionados à lista e os omite na pilha de chamadas.

Todos os scripts e pastas ignorados estão esmaecidos na árvore de arquivos.

Se você selecionar um script ignorado, o botão Configure vai levar você a Settings > Ignore List. Você também pode ocultar 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

No Chrome 58, a equipe do DevTools planejou a desatualização do JavaScript Profiler e 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 JavaScript Profiler 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 no RFC e em crbug.com/1354548.

Problema do Chromium: 1417647.

Emular contraste reduzido

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

As opções da lista foram atualizadas para informar a insensibilidade à cor que elas representam.

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

Problemas do Chromium: 1412719, 1412721.

Farol 10

O painel do 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 do Lighthouse nas DevTools, consulte Lighthouse: otimizar a velocidade do site.

A navegação legada do Lighthouse > > 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. As Ferramentas do desenvolvedor adicionaram esse dispositivo a Configurações > Dispositivos.

Problema do Chromium: 772558.

Um aviso do console para remover o gerenciador de busca do worker de serviço sem operação

O Chrome 112 ignora gerenciadores de busca de Service Workers sem operação (no-op) porque eles podem desacelerar a navegação, mas não servem para nada. 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 gerenciador de busca sem operação no seu site. Considere removê-lo.

Problema do Chromium: 1347319.

Destaques diversos

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

• O painel Origens > Pontos de interrupção agora mostra caminhos de arquivo diferentes ao lado de nomes de arquivo ambíguos (1403924).
• A seção principal no gráfico de chamas do painel Performance agora designa CpuProfiler::StartProfiling como Profiler Overhead (1358602).
• Melhoria na autopreenchimento do DevTools:
  • Origens: finalizaçõ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 de listener de evento para que você possa pausar ao abrir uma janela picture-in-picture de documento (1315352).
• As ferramentas do desenvolvedor configuraram uma solução alternativa que exibe corretamente os artefatos do webpack do Vue2 como JavaScript (1416562).
• Uma configuração do console recebe um nome melhor: "Abrir automaticamente as mensagens console.trace()". (1139616).

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.

• Envie feedback e solicitações de recursos para crbug.com.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

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