Novidades do DevTools (Chrome 112)

Atualizações do Gravador

Suporte a extensões de repetição

O Recorder introduz o 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 reprodução personalizada para abrir a interface correspondente.

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 pierce

Além dos seletores personalizados, de CSS, ARIA, texto e XPath, agora é possível fazer gravações usando seletores de nível. Esses seletores se comportam como os de CSS, mas também podem cruzar as raízes paralelas.

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

Problema do Chromium: 1411188.

Exportar como script do Puppeteer com a análise do Lighthouse

O Gravador introduz uma nova opção de exportação: Puppeteer (incluindo a análise do Lighthouse). Com o Puppeteer, é possível automatizar e controlar o Chrome. Com o Lighthouse, você captura e melhora a performance do site.

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

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

Instalar extensões

Explore as opções para personalizar sua experiência com o gravador, por exemplo, com opções de exportação personalizadas. Faça o download das extensões do Gravador clicando no ícone Exportar > . Instalar extensões em uma gravação.

Fique à vontade para adicionar 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 estilo

Documentação de CSS

Quantas vezes por dia você procura documentos sobre propriedades CSS? Na seção Elementos > O painel 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, as dicas podem ser incômodas. Para desativar todos, marque Não mostrar.

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

Problema do Chromium: 1401107.

Suporte para aninhamento de CSS

Na seção Elementos > O painel Estilos agora reconhece a sintaxe de Ninhamento de CSS e aplica estilos aninhados aos elementos corretos.

Problema do Chromium: 1172985.

Como marcar logpoints e pontos de interrupção condicionais no Console

Além de melhorar ainda mais a UX aprimorada do ponto de interrupção, o Console agora marca mensagens acionadas por pontos de interrupção:

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

O Console agora oferece links fixos adequados para pontos de interrupção em arquivos de origem, em vez de scripts VM<number> criados pelo Chrome 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 seu código, agora é possível adicionar scripts irrelevantes à Lista de ignorados diretamente da árvore de arquivos em Fontes > Painel Page.

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 a pasta da lista. O Debugger ignora os scripts adicionados à lista e os omite na pilha de chamadas.

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

Se você selecionar um script ignorado, o botão Configurar direcionará para Configurações > Lista de ignorados. Também é possível ocultar origens ignoradas da árvore de arquivos com > Ocultar fontes na lista de ignorados .

Problema do Chromium: 883325.

Descontinuação do JavaScript Profiler iniciada

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 do JavaScript Profiler em quatro fases. O painel JavaScript Profiler agora mostra o banner de aviso correspondente.

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

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

Problema do Chromium: 1417647.

Emular contraste reduzido

A guia Renderização adiciona uma nova opção à lista Emulate deficiências de visão: Contraste reduzido. Com essa opção, você pode descobrir como seu site é exibido para pessoas com sensibilidade ao contraste reduzida.

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

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

Problemas do Chromium: 1412719, 1412721.

Farol 10

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

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

Farol > > A navegação legada agora fica 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 dispositivo de emulação padrão. O DevTools adicionou este dispositivo às Configurações > Dispositivos:

Problema do Chromium: 772558.

Um aviso do console para remover o gerenciador de busca do service worker de ambiente autônomo

O Chrome 112 ignora gerenciadores de busca de service worker de ambiente autônomo (sem operação) porque eles podem tornar 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 seja qualificado como Progressive Web App.

O Console agora mostra um aviso ao encontrar um gerenciador de busca do ambiente autônomo no seu site. Considere removê-la.

Problema do Chromium: 1347319.

Destaques diversos

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

• O menu Fontes > O painel Breakpoints agora mostra a diferenciação de caminhos de arquivo ao lado de nomes de arquivo ambíguos (1403924).
• A seção Main no Flame Chart do painel Performance agora designa CpuProfiler::StartProfiling como Profiler Overhead (1358602).
• Preenchimento automático aprimorado do DevTools:
  • Fontes: conclusõ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 eventos para permitir que você pause ao abrir uma janela picture-in-picture do 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 seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento dão acesso aos recursos mais recentes do DevTools, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.

• Envie uma sugestão ou feedback pelo site crbug.com.
• Informe um problema do DevTools usando Mais opções   > Ajuda > Relate problemas no DevTools no DevTools.
• Tuíte em @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

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