O Google recentemente lançou uma atualização significativa das ferramentas de desenvolvimento do Chrome (Chrome DevTools) versão v137, integrando o assistente inteligente Gemini AI, proporcionando aos desenvolvedores uma experiência de análise de desempenho e depuração sem precedentes. Desde a marcação inteligente de rastreamento de desempenho até a salvamento automático ao modificar CSS, as novas funcionalidades da versão v137 do Chrome大幅提升 a eficiência do desenvolvimento. A AIbase reuniu as informações mais recentes para detalhar os destaques e perspectivas de aplicação dessa atualização.
Marcação Inteligente com Gemini: Análise de Desempenho Mais Intuitiva
A versão v137 das Ferramentas de Desenvolvimento do Chrome introduziu a funcionalidade de marcação inteligente com Gemini. Os desenvolvedores podem gerar automaticamente etiquetas para eventos no rastreamento principal (Main Track) ao clicar duas vezes em um evento e selecionar o botão "Gerar Etiqueta". O Gemini gera essas etiquetas com base no rastreamento de pilha e contexto, simplificando consideravelmente o processo de análise de desempenho e ajudando os desenvolvedores a entender rapidamente o significado dos dados complexos de desempenho. Além disso, os desenvolvedores podem adicionar etiquetas e conectar eventos no painel "Annotations", ou até compartilhar resultados de marcação, aumentando a eficiência da colaboração em equipe.
Depuração de CSS impulsionada por IA: Modificação e Salvamento Automáticos
A nova versão das Ferramentas de Desenvolvimento permite que os desenvolvedores modifiquem e corrijam CSS diretamente usando o assistente inteligente Gemini. Basta clicar em "Perguntar à IA" no painel "Elementos", inserir a solicitação de modificação de CSS e o Gemini irá gerar o código e permitir pré-visualização em tempo real. Com a funcionalidade experimental de área de trabalho automática, os desenvolvedores podem salvar automaticamente as modificações no CSS, JavaScript ou HTML diretamente nos arquivos de origem locais, aumentando significativamente a eficiência da depuração. A AIbase acredita que essa funcionalidade reduzirá significativamente o fluxo de trabalho do desenvolvimento front-end.
Nova Visão no Painel de Desempenho: Identificando Problemas Ocultos
O painel de desempenho da versão v137 do Chrome adicionou duas novas percepções fundamentais: JavaScript repetido e JavaScript tradicional. Essas percepções ajudam os desenvolvedores a identificar partes redundantes e obsoletas do código, otimizando a velocidade de carregamento do site e o desempenho em tempo de execução. Além disso, os desenvolvedores podem iniciar uma conversa com o Gemini com um clique para analisar gargalos de desempenho e receber sugestões específicas de otimização.
Ajuda Visual e Captura de Tela: Depuração com Mais Contexto
Para aumentar a intuição durante a depuração, o Chrome v137 adicionou uma função de captura de tela no painel auxiliado por IA. Os desenvolvedores podem clicar no botão "Fotografia" para capturar uma captura de tela da página e enviá-la como contexto ao Gemini para analisar problemas de layout ou estilos, como verificar se o espaçamento entre botões está consistente. Essa funcionalidade oferece suporte visual mais rico para a depuração.
Gemini Empodera o Ecossistema de Desenvolvedores
A atualização das Ferramentas de Desenvolvimento do Chrome v137 marca a integração profunda da IA nas ferramentas de desenvolvedor. O Gemini não apenas simplifica tarefas complexas por meio de marcações inteligentes e modificações automáticas de CSS, mas também oferece suporte abrangente à depuração por meio de insights de desempenho e funções de captura de tela. A AIbase acredita que, com a integração de modelos de IA locais como o Gemini Nano, as Ferramentas de Desenvolvimento do Chrome poderão se tornar o "assistente superpoderoso" dos desenvolvedores front-end, impulsionando a eficiência do desenvolvimento web para um novo patamar.
Conclusão
A atualização das Ferramentas de Desenvolvimento do Chrome v137, centrada no Gemini AI, traz inovações como marcação inteligente, modificação automática de CSS e insights de otimização de desempenho, proporcionando aos desenvolvedores uma experiência de depuração mais eficiente e intuitiva.