Novidades do DevTools, Chrome 142

Matthias Rohmer

Sugestões de código do Gemini

Agora você pode receber sugestões de preenchimento automático geradas por IA nos painéis Console e Fontes.

Recurso de sugestão de código nos painéis "Console" e "Fontes"

Para ativar esse recurso, acesse Configurações > Inovações de IA e ative Sugestões de código.

Melhorias no servidor MCP do DevTools

Desde o lançamento do pré-lançamento público do servidor MCP do DevTools com a v0.2.1, implementamos várias melhorias com contribuições da comunidade e lançamos a v0.9.0.

  • O suporte ao Node.js foi estendido até a versão 20.
  • As solicitações de rede e as mensagens do console podem ser paginadas para economizar tokens e filtradas com base no tipo de solicitação (por exemplo, scripts, folhas de estilo, imagens) e no tipo de mensagem (registro, aviso, erro).
  • As capturas de tela podem ser geradas em um caminho específico e em vários formatos.
  • Com as categorias de ferramentas configuráveis, você organiza quais recursos são expostos, reduzindo ruídos desnecessários.
  • Agora é possível transmitir argumentos de inicialização para a instância do Chrome usada pelo servidor MCP.

Consulte o changelog público no GitHub para conferir a lista completa de mudanças e correções de bugs e saiba mais sobre o servidor MCP do DevTools na postagem do blog de anúncio.

Acesso mais rápido à ajuda da IA

As DevTools agora incluem mais links que abrem a assistência de IA. O item do menu de contexto Perguntar à IA foi renomeado como Depurar com a IA e alterado com ações diretas que a IA pode ajudar você a realizar, com base no contexto.

Com o novo botão adicional no canto superior direito do DevTools, é possível abrir a assistência de IA em qualquer lugar do DevTools.

Os novos pontos de entrada para a assistência de IA no DevTools

Depurar o trace de desempenho completo com o Gemini

Depois de gravar um rastreamento no painel Performance, você pode conversar sobre o rastreamento completo, insights de performance relacionados e dados de campo com o Gemini sem selecionar um contexto específico com antecedência, tudo na mesma conversa. Assim, você pode analisar os problemas de performance de forma mais abrangente antes de se aprofundar.

Depois de identificar um possível problema com a ajuda do Gemini, você pode selecionar um item de contexto mais específico, como um evento de rastreamento ou um insight de performance, para uma inspeção mais detalhada e continuar a mesma conversa.

Da mesma forma, todos os insights em Performance > Insights agora estão disponíveis para você conversar com o Gemini.

Mudar orientação da gaveta

O menu suspenso também pode ser movido para o lado. Isso permite que você veja os painéis lado a lado em vez de empilhados. Clique com o botão direito do mouse no nome de um painel na barra de guias principal e selecione Mover para gaveta para mover o painel selecionado para a gaveta.

Adicione mais painéis ao gaveteiro em ⋮ > Mais ferramentas.

Novo botão na gaveta para mudar a orientação

Programa Google Developers

O Google Developer Program agora está integrado ao DevTools, com links diretos para gerenciamento de perfil e novos selos para ganhar.

Controles do perfil do desenvolvedor do Google nas configurações do DevTools

As medalhas são um recurso opcional. Para ativar os selos, acesse Configurações > Preferências > Conta e ative a opção Ganhar selos.

Destaques diversos

Confira algumas das várias correções e melhorias importantes desta versão:

  • O painel Application agora oferece suporte à inspeção de armazenamento para todos os tipos de worker, incluindo Service Workers, Shared Workers e Dedicated Workers.
  • Agora, :target-current aparece no painel Estilos.
  • Agora, o painel Rede pode filtrar solicitações com base em um novo booleano Is ad-related.

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 ao DevTools.

Novidades no DevTools

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