O DevTools oferece um painel de assistência de IA que ajuda você a entender seu site e corrigir problemas conversando com um agente de IA.
Com a assistência de IA, você pode depurar estilos, redes, desempenho e fontes do seu site.
Para conversar com o Gemini no painel Assistência de IA de maneira eficaz, aprenda a abrir o painel, enviar comandos e controlar o fluxo da conversa.
Abrir o painel da Assistência de IA
O painel Assistência de IA é aberto na gaveta.
Para abrir o painel, clique no botão Assistência de IA, localizado no ponto de entrada global à direita da barra de ferramentas principal na parte de cima.
Você também pode abrir o painel diretamente nos painéis Elementos, Rede, Fontes ou Performance. Para isso, clique com o botão direito do mouse em um elemento ou solicitação e selecione Perguntar à IA.
No menu de comandos
Para abrir a Assistência de IA no menu de comandos, digite AI e execute o comando
Mostrar assistência de IA, que tem o selo Gaveta ao lado.
No menu "Mais ferramentas"
Como alternativa, no canto superior direito, selecione Mais opções > Mais ferramentas > Assistência de IA.
Comandos
Ao iniciar uma nova conversa, a assistência de IA oferece exemplos de comandos para ajudar você a começar rapidamente.
Clique em qualquer um dos comandos para preencher o campo de entrada de comando na parte de baixo do painel.
Se preferir, digite seu próprio comando ou pergunta no campo de entrada.
Para enviar um comando, pressione Enter ou clique na seta à direita do campo de entrada.
Com a caixa de chat sem custo financeiro, você pode fazer perguntas de nível mais alto, como "como usar as ferramentas de desenvolvimento para depurar a acessibilidade?" ou "quais solicitações de rede são lentas?", além de copiar partes de um arquivo, por exemplo, do painel Fontes, e colar no chat para perguntar o que ele faz.
Assistência de IA para estilização
Use o painel Assistência de IA para entender o layout geral de um site, estilos de elementos específicos e receber correções geradas por IA para bugs de CSS.
Abrir a Assistência de IA no painel "Elementos"
Para abrir a assistência de IA no painel Elementos ao inspecionar um nó DOM, clique com o botão direito do mouse no nó e selecione a opção Perguntar à IA.
Quando você abre a assistência de IA assim, o elemento DOM inspecionado já está pré-selecionado como um elemento de contexto para a conversa.
Ou clique no botão flutuante anexado a um nó do DOM em que você passou o cursor.
Contexto da conversa
As conversas com a assistência de IA sempre se relacionam ao elemento inspecionado no momento, que é o último elemento selecionado na árvore DOM do painel "Elementos". Uma referência a esse elemento aparece no canto inferior esquerdo do painel.
Mude o contexto usando o seletor de elementos ao lado do elemento atual ou selecionando na árvore DOM do painel "Elementos".
Com o contexto selecionado, você pode fazer uma captura de tela da janela de visualização e enviar para o chat. Clique no botão Capturar tela ao lado do campo de entrada de texto do chat.
Você pode usar capturas de tela para fornecer contexto visual adicional aos comandos, por exemplo, para verificar se todos os botões visíveis têm o mesmo espaçamento.
Embora o elemento inspecionado no momento seja a base da conversa, a assistência de IA tem acesso a todas as APIs da Web para coletar mais informações da página inspecionada. Isso inclui consultar outros elementos com
document.querySelector ou avaliar estilos computados.
Assistência de IA para rede
Use o painel Assistência de IA para rede e entenda as solicitações enviadas pelo seu site.
Abrir a Assistência de IA no painel Network
Para abrir a Assistência de IA no painel Network, clique com o botão direito do mouse em uma solicitação e selecione a opção Perguntar à IA.
Quando você abre a Assistência de IA dessa forma, a solicitação de rede selecionada é pré-selecionada como contexto para a conversa.
Ou clique no botão flutuante ao lado da solicitação de rede em que você passa o cursor.
Contexto da conversa
As conversas com a assistência de IA estão relacionadas à solicitação de rede selecionada no momento na lista de solicitações do painel Rede. Uma referência a essa solicitação é mostrada no canto inferior esquerdo do painel.
Para mudar o contexto, clique em outra solicitação no painel Rede.
A assistência de IA usa o URL, os cabeçalhos, os tempos e a cadeia de iniciadores de solicitação para responder às suas perguntas.
Importante: os cabeçalhos que podem conter informações sensíveis são automaticamente censurados.
Clique no botão Expandir no ícone Analyzing network data depois de iniciar uma conversa para ver os dados brutos usados pela assistência de IA.
Assistência de IA para performance
Use o painel Assistência de IA para entender os perfis de performance registrados no painel de performance.
Abrir a Assistência de IA no painel "Performance"
Para abrir a Assistência de IA no painel Performance, primeiro grave um perfil de performance.
Dependendo do que você quer investigar, abra o painel **Assistência de IA** nos insights de performance individuais ou nas atividades da visualização de rastreamento de performance.
Insights de performance
Na guia Insights, abra um insight, por exemplo, **LCP por fase, e clique no botão Perguntar à IA**.
O DevTools abre o painel Assistência de IA com essa análise de desempenho pré-selecionada como contexto para a conversa.
Visualização de rastreamento de performance
Para abrir a Assistência de IA na visualização de rastreamento, clique com o botão direito do mouse em uma atividade e selecione a opção Perguntar à IA.
Nesse caso, a atividade é pré-selecionada como contexto para a conversa.
Contexto da conversa
A atividade de performance selecionada é usada como contexto para sua conversa com a assistência de IA. Uma referência a essa atividade é mostrada no canto inferior esquerdo do painel.
Insights de performance
Se você clicou em Perguntar à IA para um insight de performance específico, ele vai aparecer como contexto selecionado. Clique em Perguntar à IA em "Outros insights" para mudar sua seleção.
Depois de iniciar uma conversa, expanda a seção Analyzing insight: ... para ver os dados brutos usados pela assistência de IA.
Visualização de trace
Você pode selecionar diferentes itens no rastreamento de performance, e o contexto vai mudar de acordo com isso.
A assistência de IA está usando os tempos da árvore de chamadas selecionada para responder ao seu comando.
Clique no botão
no ícone Analyzing call tree depois de iniciar uma conversa para ver
os dados brutos usados pela assistência de IA.
Assistência de IA para fontes
Use o painel Assistência de IA para entender os arquivos carregados e usados pelo seu site.
Abrir a Assistência de IA no painel "Origens"
Para abrir a assistência de IA no painel Fontes, clique com o botão direito do mouse em um arquivo e selecione a opção Perguntar à IA.
Quando você abre a assistência de IA dessa forma, o arquivo selecionado é pré-selecionado como contexto para a conversa.
Ou clique no botão flutuante ao passar o cursor sobre um arquivo.
Contexto da conversa
O arquivo selecionado é usado como contexto para sua conversa com a assistência de IA. Uma referência a esse arquivo é mostrada no canto inferior esquerdo do painel.
Clique em outro arquivo no painel "Fontes" para mudar o contexto.
A assistência de IA usa o nome, o URL, o mapa de origem (se disponível) e o conteúdo do arquivo selecionado para responder às suas perguntas.
Clique no botão
no ícone Analyzing file depois de iniciar uma conversa para ver os dados
brutos usados pela assistência de IA.
Fluxo de conversa
Enviar um comando inicia a conversa com o agente de estilização. Para receber as informações necessárias para responder melhor ao seu comando, o agente gera e executa JavaScript que chama APIs da Web. O progresso do agente é mostrado em etapas. O status da etapa inicial é Investigating….
O rótulo da etapa é atualizado à medida que o agente executa ações mais específicas para resolver sua dúvida.
Quando o agente chega a uma resposta final, ela é mostrada abaixo das etapas de investigação, incluindo sugestões de comandos de acompanhamento.
Clique em qualquer um dos comandos sugeridos para continuar a conversa. Clique em .
de uma etapa de investigação para entender melhor o que a assistência de IA fez nos bastidores.
Ao expandir um ícone de progresso, você vê o código executado pelo agente e o valor de retorno dele. Copie o código executado para uso posterior, como executar com o painel do console.
Conversas pausadas
A assistência de IA pode gerar código com efeitos colaterais. Quando isso acontece, a conversa é pausada antes da execução do código.
Quando a conversa pausar, revise o código proposto pelo agente. Clique em Continuar para prosseguir ou em Cancelar para impedir a execução.
Salvar as mudanças no espaço de trabalho
Com uma pasta de espaço de trabalho conectada, é possível salvar as mudanças de estilo sugeridas pela Assistência de IA de volta nos arquivos de origem CSS do seu computador.
Para fazer isto:
Primeiro, gere um arquivo de metadados e conecte uma pasta do espaço de trabalho.
Como alternativa, você pode adicionar uma pasta manualmente.
Inicie um chat no painel "Elementos".
Peça à assistência de IA para modificar seu CSS.
A assistência de IA pode gerar código e pausar a execução. Revise o código e clique em Continuar para testar as mudanças em tempo real.
Abra a seção Mudanças não salvas e clique em Aplicar ao espaço de trabalho.
Revise as mudanças em um
diffe clique em Salvar tudo.
Para aprender esse fluxo de trabalho, consulte:
Nenhuma resposta
A assistência de IA pode não fornecer respostas por vários motivos.
Se você acha que seu comando é algo que a assistência de IA deveria conseguir discutir, registre um bug.
Histórico da conversa
Depois que você inicia uma conversa, cada resposta subsequente é baseada nas suas interações anteriores com a IA.
A assistência de IA salva o histórico de conversas entre sessões para que você possa acessar seus chats anteriores mesmo depois de recarregar o DevTools ou o Chrome.
Use os controles no canto superior esquerdo do painel para controlar seu histórico de conversas.
Iniciar nova
Para iniciar uma nova conversa com o contexto de conversa selecionado, clique no botão .
Continuar
Para continuar uma conversa anterior, clique no botão e selecione no menu de contexto.
Excluir
Para excluir uma conversa do histórico, clique no botão .
Classificar respostas e dar feedback
A assistência de IA é um recurso experimental. Por isso, estamos buscando seu feedback para saber como melhorar a qualidade das respostas e a experiência geral.
Votar em respostas
Avalie uma resposta usando os botões Gostei e Não gostei abaixo dela.
Denunciar respostas
Para denunciar conteúdo inadequado, clique no botão ao lado dos botões de votação.