Novidades do DevTools (Chrome 112)

Sofia Emelianova
Sofia Emelianova

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.

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: conheça 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 Caixa de seleção. Pierce em Tipos de seletor para gravar. Registre sua interação com elementos no shadow DOM e inspecione a etapa correspondente.

Configurar o Gravador para usar seletores de pierce. Seletor de perfuração em ação.

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. Exportar, selecione a nova opção e salve o arquivo .js.

Exportar Puppeteer (incluindo análise do Lighthouse).

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

O relatório do Lighthouse foi aberto no Chrome.

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 > Exportar.. Instalar extensões em uma gravação.

A opção Obter extensões no menu suspenso Exportar.

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 com documentação sobre uma propriedade CSS.

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 Caixa de seleção. Não mostrar.

Para ativá-las novamente, acesse Configurações. Configurações > Preferências > Elementos > Caixa de seleção. 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:

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

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.

O link de âncora ao lado de uma mensagem de logpoint que abre 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.

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

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

Os scripts e as pastas da lista de ignorados ficam esmaecidos. É possível ocultá-los com uma opção experimental no menu suspenso &quot;Mais opções&quot;.

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

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.

Banner de descontinuação na parte de cima 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 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.

A opção de contraste reduzido selecionada em &quot;Emular deficiências de visão&quot; funcionalidade de armazenamento.

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 > Configurações. > Caixa de seleção vazia. 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.

Navegação legada desativada.

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

Moto G Power na lista de 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.

Um gerenciador de busca de ambiente autônomo e o aviso correspondente no console.

Problema do Chromium: 1347319.

Destaques diversos

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

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   Mais > 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.