Chattare con l'assistenza AI

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

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

• È specializzato nello sviluppo web.
• Può rispondere a domande generali sull'intera pagina web, nonché fornire informazioni specifiche su una varietà di argomenti, tra cui, a titolo esemplificativo, stili, rete, prestazioni e altro ancora.
• Restringe e seleziona autonomamente un contesto specifico su cui chattare, ad esempio elementi DOM, richieste di rete, eventi di traccia delle prestazioni e altro ancora.
• Può eseguire azioni autonome come l'esecuzione di controlli e la registrazione di tracce delle prestazioni.
• Fornisce una procedura dettagliata passo passo delle sue azioni e del suo ragionamento e link alle parti pertinenti di DevTools, in modo che tu possa esaminarle con un clic.
• Può suggerire modifiche al codice e generare un prompt con le sue informazioni per l'esecuzione da parte del tuo agente di programmazione.

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 di assistenza AI, scopri come aprire il riquadro, inserire un prompt e controllare il flusso della conversazione.

Aprire il riquadro di assistenza AI

Per impostazione predefinita, il riquadro di 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 riquadri

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

• Fai clic sul pulsante Esegui il debug con l'AI accanto a un elemento, una richiesta di rete, un file di origine o un'informazione sulle prestazioni espansa.

  

• 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 Esegui il 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 a scomparsa.

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 a forma libera, 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 Lighthouse per l'accessibilità per rispondere meglio al tuo prompt.

• What are the slowest network requests on this page?

  L'assistenza AI fornirà un elenco di richieste sospette e link a queste nel riquadro Rete, in modo che tu possa selezionare una richiesta come contesto della conversazione con un clic.

• What performance issues exist on the page?

  L'assistenza AI registrerà automaticamente una traccia delle prestazioni con le impostazioni selezionate per rispondere a questo prompt.

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

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

Prompt con contesto

Quando apri l' assistenza AI da un riquadro, nella casella di chat viene selezionato il contesto della conversazione corrispondente, in modo che tu possa 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 Prestazioni o un file in Origini.

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

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 del passaggio iniziale è 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ò di cui stai eseguendo il debug, l'agente potrebbe anche eseguire azioni in DevTools, ad esempio registrare una traccia delle prestazioni o eseguire controlli Lighthouse.

Procedura dettagliata dell'agente

Una volta che l'agente genera una risposta al tuo 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 fornisce una risposta finale, potrebbe suggerire prompt di follow-up. Fai clic su uno qualsiasi 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 le informazioni e fornirà un prompt pratico, in formato ridotto o in formato Markdown leggibile, che puoi copiare negli appunti e continuare a programmare con un agente AI di tua scelta.

Conversazioni in pausa

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

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

Puoi esaminare le modifiche al codice suggerite nel riquadro Modifiche.

L'agente applica le modifiche all'interno di DevTools, ma puoi configurare l'area di lavoro in modo che DevTools salvi le modifiche alle tue origini.

Salvare le modifiche nell'area di lavoro

Con una cartella dell'area di lavoro connessa, puoi salvare le modifiche agli stili suggerite dall'assistenza AI nei file di origine CSS sul computer.

Per

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

   In alternativa, puoi aggiungere una cartella manualmente.

2. Avvia una chat dal riquadro Elementi.

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

4. L'assistenza AI potrebbe generare codice e mettere in pausa l'esecuzione. Esamina 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 all'area di lavoro.

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

Per scoprire di più su questo flusso di lavoro, consulta:

Nessuna risposta fornita

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

Se ritieni che il tuo prompt sia qualcosa di cui 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 precedente, fai clic sul pulsante Cronologia e selezionala dal menu contestuale.

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, stiamo cercando attivamente il tuo feedback per scoprire come possiamo migliorare la qualità delle risposte e l'esperienza complessiva.

Votare le risposte

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

Segnalare le risposte

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