Turbine seu fluxo de trabalho de desenvolvimento com o Gemini integrado diretamente ao Chrome DevTools. Simplifique a depuração com a assistência de IA para estilização, desempenho, rede e fontes.

Pode ser difícil depurar problemas de estilo. Receba uma explicação detalhada dos estilos do elemento e receba ajuda para corrigir bugs de layout e estilo:

Can you center this element?

Os cabeçalhos de solicitação e resposta geralmente contêm informações importantes que não são óbvias à primeira vista. Use a assistência da IA para:

Why does this request fail?

É raro que você tenha escrito todo o código do seu site. Não sabe para que serve um determinado script? A assistência por IA pode ajudar a:

What is this file used for?

Core Web Vitals ruins? Encontrar a causa raiz de um site lento pode ser difícil. A assistência da IA pode investigar e propor soluções para você:

Help me optimize my LCP score

Receber assistência da IA onde você estiver

Procure o botão Ask AI para receber ajuda do Gemini com sua tarefa atual.

Demonstrações

Confira nossas demonstrações interativas para saber como começar a usar a assistência de IA nos seus projetos.
Use correções de estilo com tecnologia de IA para transformar um avião estático em uma maravilha voadora, garantindo que as medidas de segurança sejam tomadas.
Você vai conquistar a barra de rolagem da morte com a assistência da IA ou uma equipe de mergulho vai ficar presa para sempre em um pesadelo de layout?

Não sabe como começar?

Conheça ideias de comandos para a assistência de IA no DevTools. Teste nossas demonstrações ou tente usar nos seus próprios sites.

Corrigir a proporção de uma imagem

Make all teaser images always be 16:9

Uma das imagens não é cortada da mesma forma que as outras?

  • Abra a página chrome.dev/cinemai/devtools/ e abra o DevTools.
  • Encontre e selecione a seção Saiba mais assistindo.
  • Clique no ícone de assistência de IA.
  • Comando: Make all teaser images always be 16:9.
  • Clique em Apply the suggested change e continue.
  • O botão precisa estar centralizado.

Corrigir um problema de estouro

How can I make this element visible?

O elemento não está visível?

  • Abra a página chrome.dev/cinemai/devtools/ e abra o DevTools.
  • Encontre um elemento img de mergulhador.
  • Clique no ícone de assistência de IA.
  • Comando: How can I make this element visible without scrollbars?.
  • Clique em Apply the suggested change e continue.
  • O mergulhador precisa estar visível na tela.

Cabeçalhos de desmistificação

Are there any security headers present?

Para saber mais sobre cabeçalhos de segurança de um determinado recurso...

  • Abra a página chrome.dev/cinemai/devtools/ e abra o DevTools.
  • No painel de rede, selecione as solicitações v4-chrome.dev.js.
  • Clique no ícone de assistência de IA.
  • Comando: Are there any security headers present?
  • O LLM vai explicar os cabeçalhos relacionados à segurança no recurso.

Análises aprofundadas

Confira vídeos que explicam como usar a assistência de IA no DevTools para resolver problemas comuns de desenvolvimento da Web.
Conheça o histórico de conversa persistente com IA no Chrome 133 a 135
Jecelyn, Oliver e Matthias apresentam a assistência por IA no Chrome 130-132

Começar

Verifique se você está usando a versão mais recente do Chrome e fez login. Você precisa ter pelo menos 18 anos e estar em um dos locais com suporte.
A assistência por IA fica desativada por padrão. Para ativar, acesse a seção "Configurações" > "Assistência por IA". Você precisa concordar com os Termos de Serviço do Google para usar a assistência por IA.
Uma política empresarial pode ser usada para controlar se os dados compartilhados com o Gemini são registrados e usados para treinamento

Ajude a melhorar nossos serviços.

Esse recurso é experimental e está sujeito a mudanças futuras. Ele pode gerar informações imprecisas ou ofensivas que não representam as opiniões do Google. Vote nas respostas para nos ajudar a melhorar e continue enviando feedback.