Novidades do DevTools, Chrome 143

Atualizações do servidor MCP do DevTools

Implementamos várias melhorias no servidor MCP do DevTools e lançamos a v0.11.0.

• Ao fazer solicitações no seu cliente do MCP (CLI do Gemini, Cursor etc.), agora é possível referenciar elementos e solicitações de rede selecionados nos painéis "Elementos" e "Rede".
• A ferramenta list_console_messages agora também inclui problemas detectados no painel Problemas.
• A nova ferramenta press_key agora pode ser usada para depurar eventos de teclado não relacionados a elementos de formulário.
• Agora é possível salvar snapshots da árvore de acessibilidade no disco
• Agora é possível recarregar as páginas, ignorando o cache opcionalmente
• Configurar a flag --user-data-dir para usar um perfil do Chrome

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.

Melhoria no compartilhamento de rastreamentos

Ao exportar um rastreamento de desempenho, agora é possível incluir mais dados no arquivo exportado para facilitar a depuração futura para você ou um colega. Agora você pode incluir o seguinte:

• Conteúdo do recurso: uma cópia de todos os arquivos HTML, CSS e JavaScript (exceto scripts de extensão).
• Mapas de origem do script: mapeamentos para o código criado, permitindo que você veja os nomes das funções originais e os arquivos de origem.

Saiba o que compartilhar e o que manter em particular na documentação atualizada.

Agradecemos aos nossos colegas da Microsoft, com quem colaboramos para alcançar esse objetivo e que lideraram o trabalho inicial.

Suporte para @starting-style

O painel Elementos agora oferece suporte à depuração da nova regra CSS @starting-style, que é essencial para criar animações de entrada.

Agora você pode ver um enfeite starting-style na árvore Elementos ao lado dos elementos relevantes, alternar o estado starting-style do elemento clicando na pílula e inspecionar e depurar o bloco @starting-style na guia Estilos.

Widget do editor para display: masonry

Se você testar o layout de alvenaria CSS, poderá usar o mesmo widget de editor que já conhece dos layouts display: flex e grid para alternar rapidamente entre várias opções de alinhamento em layouts masonry.

Farol 13

O painel Lighthouse agora executa o Lighthouse 13. Com esse marco, o trabalho de unificação dos insights de performance no DevTools e no Lighthouse é concluído.

Saiba mais na postagem do blog sobre o anúncio. Para saber para que o Lighthouse é útil e como ele se conecta ao painel "Performance" nas DevTools, consulte Lighthouse: otimize seu site.

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

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.