Chattare con l'assistenza AI

Matthias Rohmer

Sofia Emelianova

DevTools fornisce un riquadro di assistenza AI che ti aiuta a comprendere il tuo sito web e a risolvere i problemi interagendo con un agente AI integrato.

Il riquadro Assistenza AI è basato su Gemini e svolge le seguenti operazioni:

• Specializzato nello sviluppo web.
• Può rispondere a domande generali sull'intera pagina web e fornire approfondimenti specifici su una serie di argomenti, tra cui, a titolo esemplificativo, stile, networking, prestazioni e altro ancora.
• Restringe e seleziona autonomamente un contesto specifico su cui chattare, ad esempio elementi DOM, richieste di rete, eventi di traccia del rendimento e altro ancora.
• Può eseguire azioni autonome come eseguire audit e registrare tracce di rendimento.
• Fornisce una procedura dettagliata delle sue azioni e del suo ragionamento e link alle parti pertinenti di DevTools, in modo da poterle ispezionare con un clic.
• Può suggerire modifiche al codice e generare un prompt con i suoi approfondimenti per l'agente di codifica dell'utente da eseguire.

Nota: le funzionalità di azioni autonome, procedura dettagliata passo passo e generazione di prompt sono disponibili in Chrome versione 149 e successive.

Con l'assistenza AI, puoi eseguire il debug di stili, rete, prestazioni, origini del tuo sito web e altro ancora.

Per chattare in modo efficace con Gemini nel riquadro Assistenza AI, scopri come aprire il riquadro, creare prompt e controllare il flusso della conversazione.

Apri il riquadro dell'assistenza AI

Per impostazione predefinita, il riquadro Assistenza AI si apre nel riquadro a scomparsa.

Per aprire il riquadro, fai clic sul pulsante Assistenza AI situato nel punto di accesso globale a destra della barra degli strumenti principale in alto.

Dai pannelli

Puoi aprire il riquadro con il contesto della conversazione selezionato direttamente dai riquadri Elementi, Rete, Origini o Rendimento in due modi:

• Fai clic sul pulsante Esegui il debug con l'AI accanto a un elemento, a una richiesta di rete, a un file di origine o a un approfondimento sul rendimento espanso.

  

• Fai clic con il tasto destro del mouse su un elemento, una richiesta, un file o una voce di traccia e seleziona una delle opzioni di prompt comuni dal menu contestuale Debug con l'AI.

  

Dal menu dei comandi

Per aprire l'assistenza AI dal menu dei comandi, digita AI e poi esegui il comando Mostra assistenza AI, accanto al quale è presente il badge Riquadro.

Dal menu "Altri strumenti"

In alternativa, nell'angolo in alto a destra, seleziona Impostazioni Altre opzioni > Altri strumenti > Assistenza AI.

Prompting

Quando avvii una nuova conversazione, l'assistenza AI offre prompt di esempio per aiutarti a iniziare rapidamente.

Fai clic su uno dei prompt per precompilare il campo di immissione del prompt nella parte inferiore del riquadro.

In alternativa, digita il tuo prompt o la tua domanda nel campo di immissione.

Per inviare un prompt, premi Enter o fai clic sulla freccia a destra del campo di immissione.

Prompt aperti senza contesto

Con la casella di chat in formato libero, puoi porre domande aperte di livello superiore senza un contesto precedente. Ad esempio:

• How to use DevTools to debug accessibility?

  L'Assistenza AI eseguirà innanzitutto un controllo di Lighthouse per l'accessibilità per rispondere meglio al tuo prompt.

• What are the slowest network requests on this page?

  L'assistenza AI fornisce un elenco di richieste sospette e i relativi link nel riquadro Rete, in modo da poter selezionare una richiesta come contesto della conversazione con un clic.

• What performance issues exist on the page?

  Assistenza AI registrerà automaticamente una traccia del rendimento con le impostazioni selezionate per rispondere a questo prompt.

• Prompt come How do I use the Animation panel? o Where is the high contrast setting in DevTools? forniscono assistenza diretta per DevTools.

Una volta avviata la chat, l'assistenza dell'AI aggiornerà in modo intelligente il contesto in base alle tue azioni quando la chat è vuota, rispettando le tue selezioni manuali quando le effettui.

Prompt con contesto

Quando apri l'assistenza AI da un riquadro, il contesto della conversazione corrispondente viene selezionato nella casella di chat, in modo da poter chattare in modo specifico su ciò che hai selezionato.

In qualsiasi momento, puoi modificare manualmente il contesto selezionando un elemento in Elementi, una richiesta in Rete, una voce di traccia in Rendimento o un file in Origini.

Puoi anche copiare parti di un file, ad esempio dal riquadro Fonti, e incollarle nella chat per chiedere a cosa servono.

Successivamente, scopri di più sul flusso della conversazione nell'assistenza AI.

Flusso della conversazione

L'invio di un prompt avvia la conversazione con l'agente. Per ottenere le informazioni necessarie per rispondere al meglio al tuo prompt, l'agente genera ed esegue JavaScript che chiama le API web.

L'avanzamento dell'agente viene mostrato in passaggi. Lo stato iniziale del passaggio è Investigating….

L'etichetta del passaggio iniziale si aggiorna man mano che l'agente esegue azioni più specifiche per rispondere al tuo prompt.

A seconda di ciò che stai eseguendo il debug, l'agente potrebbe anche eseguire azioni in DevTools, ad esempio registrare una traccia delle prestazioni o eseguire audit Lighthouse.

Procedura dettagliata dell'agente

Una volta che l'agente genera una risposta al prompt, l'etichetta del passaggio iniziale cambia in Mostra procedura dettagliata dell'agente o Mostra ragionamento, che puoi espandere per visualizzare i passaggi eseguiti dall'agente per analizzare i dati in un riquadro laterale a destra.

I passaggi includono:

• Snippet di codice espandibili eseguiti dall'agente insieme ai dati restituiti. Puoi copiare il codice ed eseguirlo nella console.
• Widget che presentano i risultati in un formato più leggibile.

I widget hanno un pulsante Mostra nell'angolo in alto a destra che ti porta alla parte pertinente di DevTools.

Prompt di follow-up

Una volta che l'agente arriva a una risposta definitiva, potrebbe suggerire prompt di follow-up. Fai clic su una delle opzioni per continuare la conversazione.

Generare un prompt per l'agente di programmazione

Per generare un prompt per il tuo agente di programmazione, fai clic su Copia nell'agente di programmazione.

L'agente riepilogherà i risultati e gli approfondimenti e fornirà un prompt azionabile, in formato ridotto o in formato Markdown leggibile, che potrai copiare negli appunti e continuare a programmare con un agente AI a tua scelta.

Conversazioni in pausa

L'assistenza dell'AI potrebbe generare codice con effetti collaterali. In questo caso, la conversazione viene sospesa prima dell'esecuzione del codice.

Quando la conversazione si interrompe, esamina il codice proposto dall'agente. Fai clic su play_arrow Continua per procedere o su Annulla per impedire l'esecuzione.

Nota: mentre la conversazione è in pausa, l'inserimento dei prompt è disattivato.

Puoi esaminare le modifiche al codice suggerite nel riquadro Modifiche.

L'agente applica le modifiche all'interno di DevTools, ma puoi configurare il tuo spazio di lavoro per consentire a DevTools di salvare le modifiche nelle tue origini.

Salvare le modifiche apportate allo spazio di lavoro

Con una cartella del workspace collegata, puoi salvare le modifiche allo stile suggerite dall'assistenza AI nei file di origine CSS sul tuo computer.

Per

1. Innanzitutto, genera un file di metadati e collega una cartella dell'area di lavoro.

   In alternativa, puoi aggiungere una cartella manualmente.

2. Avvia una chat dal riquadro Elementi.

3. Chiedi all'assistente AI di modificare il CSS.

4. L'assistenza AI potrebbe generare codice e mettere in pausa l'esecuzione. Controlla il codice e fai clic su Continua per testare le modifiche in tempo reale.

5. Espandi la sezione Modifiche non salvate e fai clic su Applica al workspace.

   Nota: se non hai una cartella di workspace collegata, in questo passaggio il riquadro Assistenza AI ti chiederà di aggiungerla manualmente.

6. Rivedi le modifiche in un diff e fai clic su Salva tutto.

Per scoprire questo flusso di lavoro, consulta:

Nessuna risposta fornita

L'assistenza AI potrebbe non fornire risposte per diversi motivi.

Se ritieni che il tuo prompt sia qualcosa che l'assistenza AI dovrebbe essere in grado di discutere, segnala un bug.

Cronologia conversazione

Una volta avviata una conversazione, ogni risposta successiva si basa sulle interazioni precedenti tra te e l'AI.

L'assistenza AI salva la cronologia delle conversazioni tra le sessioni, in modo che tu possa accedere alle chat precedenti anche dopo il ricaricamento di DevTools o Chrome.

Utilizza i controlli nell'angolo in alto a sinistra del riquadro per controllare la cronologia delle conversazioni.

Nuova misurazione

Per avviare una nuova conversazione con il contesto della conversazione attualmente selezionato, fai clic sul pulsante Aggiungi.

Continua

Per continuare una conversazione passata, fai clic sul pulsante Cronologia e selezionala dal menu contestuale.

Nota:il contesto della conversazione non viene aggiornato automaticamente perché potrebbe essere scomparso da quando la conversazione è terminata.

Elimina

Per eliminare una conversazione dalla cronologia, fai clic sul pulsante Elimina.

Valutare le risposte e fornire feedback

L'assistenza AI è una funzionalità sperimentale. Pertanto, cerchiamo attivamente il tuo feedback per capire come possiamo migliorare la qualità delle risposte e l'esperienza complessiva.

Votare le risposte

Valuta una risposta utilizzando i pulsanti Mi piace thumb_up e Non mi piace thumb_down sotto la risposta.

Segnala risposte

Per segnalare contenuti inappropriati, fai clic sul pulsante Segnala accanto ai pulsanti di voto.