Novidades do DevTools, Chrome 141

Sofia Emelianova
Sofia Emelianova
GitHub

Chrome DevTools (MCP) para seu agente de IA

Agora você pode conferir uma prévia do novo servidor do protocolo de contexto de modelo (MCP) do Chrome DevTools. Ele traz o poder do Chrome DevTools para assistentes de programação de IA.

Antes, os agentes de programação não conseguiam ver o que o código gerado realmente fazia quando era executado no navegador. O servidor MCP do Chrome DevTools muda isso. Os assistentes de programação de IA podem depurar páginas da Web diretamente no Chrome e aproveitar os recursos de depuração e os insights de desempenho do DevTools. Isso melhora a precisão deles ao identificar e corrigir problemas.

Veja como funciona:

Para mais informações, consulte Chrome DevTools (MCP) para seu agente de IA.

Depurar a árvore de dependência da rede com o Gemini

O insight Performance > Insights > Árvore de dependência de rede agora tem o botão Depurar com IA, que leva você ao painel Assistência de IA. Assim, é possível discutir e depurar a árvore com a ajuda do Gemini.

Antes e depois de adicionar o botão "Depurar com IA" ao insight "Árvore de dependência de rede".

Exportar suas conversas com o Gemini

Agora você pode exportar sua conversa atual com o Gemini ou copiar a resposta dele para a área de transferência clicando no botão Exportar conversa na barra de ações superior ou em Copiar resposta abaixo da mensagem do Gemini no chat.

Antes e depois de adicionar o botão de exportação e cópia à assistência de IA.

Configuração de faixa persistente no painel "Performance"

Quando você configura uma faixa gravada no painel Performance, o DevTools salva a configuração e a aplica quando você a importa de volta ou grava uma nova.

Filtrar solicitações de rede protegidas por IP

No painel Rede, agora é possível filtrar solicitações enviadas para proxies de proteção de IP.

Antes e depois de adicionar o filtro "Solicitações protegidas por IP" ao painel "Rede".

Elementos > A guia "Layout" adiciona suporte ao layout em alvenaria

Agora você pode inspecionar o layout em alvenaria na guia Elementos > Estilos.

O layout em alvenaria é um método em que um eixo usa um layout de grade estrito típico, geralmente colunas, e o outro usa um layout em alvenaria.

Antes e depois de adicionar o suporte ao layout em alvenaria a "Elementos - Layout".

Lighthouse 12.8.2

O painel Lighthouse agora executa o Lighthouse 12.8.2.

Principalmente nesta versão, o Lighthouse separa os problemas encontrados com propriedades personalizadas de CSS em mensagens de erro próprias.

Consulte também a lista completa de mudanças.

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

Problema do Chromium: 40543651.

Destaques diversos

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

  • Performance: os eventos de callback inativo de solicitação agora incluem a propriedade timeout (crbug.com/441679219).
  • Acessibilidade. Os leitores de tela vão ler o seguinte:
  • Rede: clicar com o botão direito em um item de registro de rede o seleciona (crbug.com/368510578).

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