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: explore 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 atravessar as raízes de sombra.

Inicie uma nova gravação em uma página com o 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 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. Estamos ansiosos para 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 CSS do MDN nessa 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 logpoints 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 ir diretamente para o editor do ponto 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 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. Você pode ver opções para adicionar ou remover o script ou a pasta da lista. O Debugger ignora os 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

Já no Chrome 58 (link em inglês), a equipe do DevTools planejava suspender o uso do JavaScript Profiler e fazer com que os desenvolvedores do Node.js e do Deno usassem o painel Performance para criar o perfil de desempenho da CPU JavaScript.

Esta versão do DevTools (112) inicia a descontinuação em quatro fases do JavaScript Profiler. 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, é possível descobrir como seu site é exibido para pessoas com sensibilidade ao contraste reduzida.

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 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. O DevTools adicionou o 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

Estas são algumas correções importantes nesta versão:

• O painel Sources > Breakpoints agora mostra diferentes caminhos de arquivo 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 Tab dicas (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).
• O DevTools configurou uma solução alternativa que mostra corretamente os artefatos do webpack do Vue2 como JavaScript (1416562).
• Uma configuração do Console tem um nome melhor: expandir automaticamente as mensagens do 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 pré-lançamento dão acesso aos recursos mais recentes do DevTools, permitem testar APIs modernas da plataforma da Web e ajudam a encontrar problemas no 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 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 que foi abordado na série Novidades no DevTools.