Chat com a assistência de IA

Matthias Rohmer

Sofia Emelianova

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 integrado.

O painel Assistência de IA é desenvolvido pelo Gemini e faz o seguinte:

• Especialista em desenvolvimento da Web.
• Pode responder a perguntas gerais sobre toda a página da Web e fornecer insights específicos sobre vários tópicos, incluindo, entre outros, estilo, rede, desempenho e muito mais.
• Reduz e seleciona de forma autônoma um contexto específico para você conversar, como elementos DOM, solicitações de rede, eventos de rastreamento de performance e muito mais.
• Pode realizar ações autônomas, como executar auditorias e gravar rastros de desempenho.
• Oferece um tutorial detalhado das ações e do raciocínio, além de links para as partes relevantes do DevTools, para que você possa inspecioná-las com um clique.
• Pode sugerir mudanças no código e gerar um comando com insights para seu agente de programação executar.

Observação: os recursos de ações autônomas, tutorial detalhado e geração de comandos estão disponíveis no Chrome versão 149 e mais recentes.

Com a assistência de IA, é possível depurar estilo, rede, performance, fontes do seu site e muito mais.

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 por padrão.

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.

Nos painéis

Você pode abrir o painel, com o contexto da conversa selecionado, diretamente dos painéis Elementos, Rede, Origens ou Performance de duas maneiras:

• Clique no botão Depurar com IA ao lado de um elemento, solicitação de rede, arquivo de origem ou insight de performance expandido.

  

• Clique com o botão direito do mouse em um elemento, solicitação, arquivo ou entrada de rastreamento e selecione uma das opções de comando comuns no menu de contexto Depurar com 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 Configurações 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.

Comandos abertos sem contexto

Com a caixa de chat de formato livre, você pode fazer perguntas abertas de nível mais alto sem contexto prévio. Exemplo:

• How to use DevTools to debug accessibility?

  A assistência de IA primeiro executa uma auditoria do Lighthouse para acessibilidade e, assim, responder melhor ao seu comando.

• What are the slowest network requests on this page?

  A assistência de IA vai fornecer uma lista de solicitações suspeitas e links para elas no painel Rede. Assim, você pode selecionar uma solicitação como contexto de conversa com um clique.

• What performance issues exist on the page?

  A assistência de IA vai gravar automaticamente um rastreamento de performance com as configurações selecionadas para responder a esse comando.

• Comandos como How do I use the Animation panel? ou Where is the high contrast setting in DevTools? oferecem ajuda direta com o DevTools.

Depois que você iniciar a conversa, a assistência de IA vai atualizar o contexto de forma inteligente com base nas suas ações quando a conversa estiver vazia, respeitando suas seleções manuais quando você as fizer.

Comandos com contexto

Quando você abre a assistência de IA em um painel, o contexto da conversa correspondente é selecionado na caixa de chat. Assim, você pode conversar especificamente sobre o que selecionou.

A qualquer momento, é possível mudar manualmente o contexto selecionando um elemento em Elementos, uma solicitação em Rede, uma entrada de rastreamento em Performance ou um arquivo em Fontes.

Você também pode copiar partes de um arquivo, por exemplo, do painel Fontes, e colar no chat para perguntar o que ele faz.

Em seguida, saiba mais sobre o fluxo de conversa na assistência de IA.

Fluxo de conversa

Enviar um comando inicia a conversa com o agente. 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 inicial da etapa é Investigating….

O rótulo da etapa inicial é atualizado à medida que o agente executa ações mais específicas para responder ao seu comando.

Dependendo do que você está depurando, o agente também pode executar ações no DevTools, como gravar um rastreamento de desempenho ou executar auditorias do Lighthouse.

Tutorial do agente

Depois que o agente gera uma resposta ao seu comando, o rótulo da etapa inicial muda para Mostrar explicação do agente ou Mostrar raciocínio. É possível abrir essas opções para conferir as etapas realizadas pelo agente para analisar os dados em um painel lateral à direita.

As etapas incluem:

• Snippets de código expansíveis que o agente executou junto com os dados retornados. Copie o código e execute-o no Console.
• Widgets que apresentam descobertas em um formato mais legível.

Os widgets têm um botão Revelar no canto superior direito que leva você à parte relevante do DevTools.

Comandos complementares

Quando o agente chega a uma resposta final, ele pode sugerir comandos de acompanhamento. Clique em qualquer uma para continuar a conversa.

Gerar um comando para o agente de programação

Para gerar um comando para seu agente de programação, clique em Copiar para o agente de programação.

O agente vai resumir as descobertas e insights e fornecer um comando útil, de forma minimizada ou em formato Markdown legível, que você pode copiar para a área de transferência e continuar programando com um agente de IA da sua escolha.

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 play_arrow Continuar para prosseguir ou em Cancelar para impedir a execução.

Observação: enquanto a conversa está pausada, a entrada de comandos fica desativada.

Você pode inspecionar as mudanças de código sugeridas no painel Mudanças.

O agente aplica as mudanças no DevTools, mas você pode configurar seu espaço de trabalho para que o DevTools salve as mudanças nas suas fontes.

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:

1. Primeiro, gere um arquivo de metadados e conecte uma pasta do espaço de trabalho.

   Como alternativa, você pode adicionar uma pasta manualmente.

2. Inicie um chat no painel "Elementos".

3. Peça à assistência de IA para modificar seu CSS.

4. 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.

5. Abra a seção Mudanças não salvas e clique em Aplicar ao espaço de trabalho.

   Observação: se você não tiver uma pasta do espaço de trabalho conectada, o painel Assistência de IA vai pedir que você a adicione manualmente nesta etapa.

6. Revise as mudanças em um diff e 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 seu histórico de conversas entre sessões para que você possa acessar seus chats anteriores mesmo depois de recarregar o Chrome ou o DevTools.

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 selecionado, clique no botão Adicionar.

Continuar

Para continuar uma conversa anterior, clique no botão histórico e selecione no menu de contexto.

Observação:o contexto da conversa não é atualizado automaticamente, já que pode ter desaparecido desde que a conversa foi interrompida.

Excluir

Para excluir uma conversa do histórico, clique no botão Excluir.

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 thumb_up Gostei e thumb_down Não gostei abaixo dela.

Denunciar respostas

Para denunciar conteúdo inadequado, clique no botão Denunciar ao lado dos botões de votação.