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.
Con l'assistenza AI, puoi eseguire il debug di stili, reti, rendimento e origini del tuo sito web.
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
Si apre il riquadro Assistenza AI nel riquadro estraibile.
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.
Puoi anche aprire il riquadro direttamente dai riquadri Elementi, Rete, Origini o Rendimento facendo clic con il tasto destro del mouse su un elemento o una richiesta e selezionando Chiedi all'AI.
Dal menu dei comandi
Per aprire Assistenza AI dal menu dei comandi, digita AI ed 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 Altre opzioni > Altri strumenti > Assistenza AI.
Prompting
Quando inizi 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 input.
Per inviare un prompt, premi Enter o fai clic sulla freccia a destra del campo di input.
Con la casella di chat senza costi, puoi porre domande di livello superiore come "come si usano gli strumenti di sviluppo per eseguire il debug dell'accessibilità?" o "quali richieste di rete sono lente?", nonché copiare parti di un file, ad esempio, dal riquadro Origini e incollarle nella chat per chiedere cosa fanno.
Assistenza AI per lo stile
Utilizza il riquadro Assistenza AI per lo stile per comprendere il layout generale di un sito web, gli stili di elementi specifici e per ottenere correzioni generate dall'AI per i bug CSS.
Aprire l'assistenza AI dal riquadro Elementi
Per aprire l'assistenza AI dal riquadro Elementi, quando ispezioni un nodo DOM, fai clic con il tasto destro del mouse sul nodo e seleziona l'opzione Chiedi all'AI.
Quando apri l'assistenza AI in questo modo, l'elemento DOM ispezionato è già preselezionato come elemento di contesto per la conversazione.
In alternativa, fai clic sul pulsante mobile collegato a un nodo DOM su cui è stato passato il mouse.
Contesto della conversazione
Le chat con l'assistenza AI riguardano sempre l'elemento attualmente ispezionato, ovvero l'ultimo elemento selezionato nell'albero DOM del riquadro Elementi. Un riferimento a questo elemento viene mostrato nell'angolo in basso a sinistra del riquadro.
Modifica il contesto utilizzando il selettore di elementi accanto all'elemento corrente o selezionando un elemento dall'albero DOM del riquadro Elementi.
Con il contesto selezionato, puoi acquisire uno screenshot del riquadro di visualizzazione e inviarlo alla chat. Fai clic sul pulsante Acquisisci screenshot accanto al campo di input della chat.
Puoi utilizzare gli screenshot per fornire un contesto visivo aggiuntivo ai tuoi prompt, ad esempio per verificare se tutti i pulsanti visibili hanno la stessa spaziatura.
Sebbene l'elemento attualmente ispezionato sia la base della conversazione,
l'assistenza AI ha accesso a tutte le API web per raccogliere ulteriori informazioni dalla
pagina ispezionata. Ciò include l'interrogazione di altri elementi con
document.querySelector o la valutazione degli stili calcolati.
Assistenza AI per la rete
Utilizza il riquadro Assistenza AI per la rete per comprendere le richieste inviate dal tuo sito web.
Aprire l'assistenza AI dal riquadro Rete
Per aprire l'assistenza AI dal riquadro Rete, fai clic con il tasto destro del mouse su una richiesta e seleziona l'opzione Chiedi all'AI.
Quando apri l'assistenza AI in questo modo, la richiesta di rete selezionata viene preselezionata come contesto per la conversazione.
In alternativa, fai clic sul pulsante mobile accanto alla richiesta di emittente su cui passi il mouse.
Contesto della conversazione
Le chat con l'assistenza AI si riferiscono alla richiesta di rete attualmente selezionata nell'elenco delle richieste del riquadro Rete. Un riferimento a questa richiesta viene mostrato nell'angolo in basso a sinistra del riquadro.
Cambia contesto facendo clic su un'altra richiesta nel riquadro Rete.
L'assistenza AI utilizza l'URL della richiesta, le intestazioni, i tempi e la catena di inizializzazione della richiesta per rispondere alle tue domande.
Importante: le intestazioni che potrebbero contenere informazioni sensibili vengono automaticamente oscurate.
Fai clic sul pulsante Espandi
nel chip Analyzing network data dopo aver avviato una conversazione per visualizzare i dati
non elaborati utilizzati dall'assistenza dell'IA.
Assistenza AI per il rendimento
Utilizza il riquadro Assistenza AI per le prestazioni per comprendere i profili di rendimento registrati nel riquadro Prestazioni.
Aprire l'assistenza AI dal riquadro Rendimento
Per aprire l'assistenza AI dal riquadro Rendimento, devi prima registrare un profilo di rendimento.
A seconda di ciò che vuoi esaminare, puoi aprire il riquadro **Assistenza AI** dalle informazioni sul rendimento individuale o per le attività nella visualizzazione della traccia del rendimento.
Approfondimenti sul rendimento
Nella scheda Approfondimenti, apri un approfondimento, ad esempio **LCP per fase, quindi fai clic sul pulsante Chiedi all'AI**
DevTools apre il riquadro Assistenza AI con questo approfondimento sulle prestazioni preselezionato come contesto per la conversazione.
Visualizzazione della traccia di rendimento
Per aprire Assistenza AI dalla visualizzazione della traccia, fai clic con il tasto destro del mouse su un'attività e seleziona l'opzione Chiedi all'AI.
In questo caso, questa attività è preselezionata come contesto per la conversazione.
Contesto della conversazione
L'attività di rendimento selezionata viene utilizzata come contesto per la tua conversazione con l'assistenza AI. Un riferimento a questa attività viene mostrato nell'angolo in basso a sinistra del riquadro.
Approfondimenti sul rendimento
Se hai fatto clic su Chiedi all'AI per un approfondimento specifico sul rendimento, lo vedrai come contesto selezionato. Puoi fare clic su Chiedi all'AI sotto altri approfondimenti per modificare la selezione.
Dopo aver avviato una conversazione, espandi la sezione Analyzing insight: ... per visualizzare i dati non elaborati utilizzati dall'assistenza dell'AI.
Visualizzazione di Trace
Puoi selezionare elementi diversi nella traccia del rendimento e il contesto cambierà di conseguenza.
L'assistenza AI utilizza i tempi dell'albero di chiamata selezionato per rispondere al tuo prompt.
Fai clic sul pulsante
nel chip Analyzing call tree dopo aver avviato una conversazione per visualizzare
i dati non elaborati utilizzati dall'assistenza AI.
Assistenza AI per le fonti
Utilizza il riquadro Assistenza AI per le fonti per comprendere i file caricati e utilizzati dal tuo sito web.
Aprire l'assistenza AI dal riquadro Origini
Per aprire l'assistenza AI dal riquadro Fonti, fai clic con il tasto destro del mouse su un file e seleziona l'opzione Chiedi all'AI.
Quando apri l'assistenza AI in questo modo, il file selezionato viene preselezionato come contesto per la conversazione.
In alternativa, fai clic sul pulsante mobile quando passi il mouse sopra un file.
Contesto della conversazione
Il file selezionato viene utilizzato come contesto per la conversazione con l'assistenza AI. Un riferimento a questo file viene mostrato nell'angolo in basso a sinistra del riquadro.
Cambia contesto facendo clic su un altro file nel riquadro Fonti.
L'assistenza AI utilizza il nome, l'URL, la mappa delle origini (se disponibile) e i contenuti del file selezionato per rispondere alle tue domande.
Fai clic sul pulsante
nel chip Analyzing file dopo aver avviato una conversazione per visualizzare i dati
grezzi utilizzati dall'assistenza AI.
Flusso della conversazione
L'invio di un prompt avvia la conversazione con l'agente di stile. 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 si aggiorna man mano che l'agente esegue azioni più specifiche per rispondere alla tua domanda.
Una volta che l'agente ha trovato una risposta definitiva, questa viene visualizzata sotto i passaggi dell'indagine, inclusi suggerimenti per ulteriori prompt.
Fai clic su uno dei prompt suggeriti per continuare la conversazione. Fai clic su .
di un passaggio dell'indagine per comprendere meglio cosa ha fatto l'assistenza AI dietro le quinte.
Quando espandi un chip di avanzamento, viene visualizzato il codice eseguito dall'agente, insieme al relativo valore restituito. Copia il codice eseguito per un utilizzo successivo, ad esempio per eseguirlo con il riquadro della console.
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 Continua per procedere o su Annulla per impedire l'esecuzione.
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
Innanzitutto, genera un file di metadati e collega una cartella dell'area di lavoro.
In alternativa, puoi aggiungere una cartella manualmente.
Avvia una chat dal riquadro Elementi.
Chiedi all'assistente AI di modificare il CSS.
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.
Espandi la sezione Modifiche non salvate e fai clic su Applica al workspace.
Rivedi le modifiche in un
diffe 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 da poter 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 .
Continua
Per continuare una conversazione passata, fai clic sul pulsante e selezionala dal menu contestuale.
Elimina
Per eliminare una conversazione dalla cronologia, fai clic sul pulsante .
Valutare le risposte e fornire feedback
L'assistenza dell'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 e Non mi piace thumb_down sotto la risposta.
Segnala risposte
Per segnalare contenuti inappropriati, fai clic sul pulsante accanto ai pulsanti di voto.