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.
Con l'assistenza AI, puoi eseguire il debug di stili, rete, prestazioni e origini del tuo sito web.
Per chattare in modo efficace con Gemini nel riquadro Assistenza AI, scopri come aprire il riquadro, inserire un prompt e controllare il flusso della conversazione.
Apri il riquadro Assistenza AI
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 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 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 Esegui il debug con l'AI.
Dal menu dei comandi
Per aprire 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 Altre opzioni > Altri strumenti > Assistenza AI.
Prompting
Quando avvii una nuova conversazione, 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?Assistenza AI eseguirà prima un controllo di accessibilità di Lighthouse per rispondere meglio al tuo prompt.
What are the slowest network requests on this page?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?Assistenza AI registrerà automaticamente una traccia del rendimento con le impostazioni selezionate per rispondere a questo prompt.
I prompt come
How do I use the Animation panel?oWhere is the high contrast setting in DevTools?forniranno assistenza diretta con DevTools stesso.
Una volta avviata la chat, 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 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 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 fa.
Scopri di più sull'utilizzo di Assistenza AI con diversi riquadri.
Assistenza AI per gli stili
Utilizza il riquadro Assistenza AI per gli stili 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.
Apri Assistenza AI dal riquadro Elementi
Per aprire Assistenza AI dal riquadro Elementi, quando esamini un nodo DOM, fai clic con il tasto destro del mouse sul nodo e seleziona l'opzione Chiedi all'AI.
Quando apri Assistenza AI in questo modo, l'elemento DOM esaminato è già preselezionato come elemento di contesto per la conversazione.
In alternativa, fai clic sul pulsante mobile collegato a un nodo DOM su cui hai passato il mouse.
Contesto della conversazione
Le chat con Assistenza AI sono sempre correlate all'elemento attualmente esaminato, 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 dall'albero DOM del riquadro Elementi.
Con il contesto selezionato, puoi acquisire uno screenshot della finestra e inviarlo alla chat. Fai clic sul pulsante Scatta screenshot accanto al campo di immissione 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 esaminato sia la base della conversazione, Assistenza AI ha accesso a tutte le API web per raccogliere ulteriori informazioni dalla pagina esaminata. Ciò include l'esecuzione di query su 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.
Apri Assistenza AI dal riquadro Rete
Per aprire 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 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 rete su cui passi il mouse.
Contesto della conversazione
Le chat con Assistenza AI sono correlate 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.
Modifica il contesto facendo clic su un'altra richiesta nel riquadro Rete.
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 da Assistenza AI.
Assistenza AI per il rendimento
Utilizza il riquadro Assistenza AI per il rendimento per comprendere i profili di rendimento registrati nel riquadro Rendimento.
Apri Assistenza AI dal riquadro Rendimento
Per aprire Assistenza AI dal riquadro Rendimento, registra prima un profilo di rendimento.
A seconda di ciò che vuoi esaminare, puoi aprire il riquadro **Assistenza AI** da singoli approfondimenti sul rendimento 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 sul rendimento preselezionato come contesto per la conversazione.
Visualizzazione della traccia del 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 conversazione con 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 sul rendimento specifico, vedrai questo approfondimento come contesto selezionato. Puoi fare clic su Chiedi all'AI in altri approfondimenti per modificare la selezione.
Dopo aver avviato una conversazione, espandi la sezione Analyzing insight: ... per visualizzare i dati non elaborati utilizzati da Assistenza AI.
Visualizzazione della traccia
Puoi selezionare elementi diversi nella traccia del rendimento e il contesto cambierà di conseguenza.
Assistenza AI utilizza i tempi dell'albero delle chiamate 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 da Assistenza AI.
Assistenza AI per le origini
Utilizza il riquadro Assistenza AI per le origini per comprendere i file caricati e utilizzati dal tuo sito web.
Apri Assistenza AI dal riquadro Origini
Per aprire Assistenza AI dal riquadro Origini, fai clic con il tasto destro del mouse su un file e seleziona l'opzione Chiedi all'AI.
Quando apri 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 Assistenza AI. Un riferimento a questo file viene mostrato nell'angolo in basso a sinistra del riquadro.
Modifica il contesto facendo clic su un altro file nel riquadro Origini.
Assistenza AI utilizza il nome, l'URL, la mappa di origine (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 non elaborati utilizzati da 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 del passaggio iniziale è Investigating….
L'etichetta del passaggio viene aggiornata man mano che l'agente esegue azioni più specifiche per risolvere la tua domanda.
Una volta che l'agente arriva a una risposta finale, questa viene visualizzata sotto i passaggi di indagine, inclusi i suggerimenti per i prompt di follow-up.
Fai clic su uno dei prompt suggeriti per continuare la conversazione. Fai clic su
di un passaggio di indagine per comprendere meglio cosa ha fatto Assistenza AI dietro le quinte.
Quando espandi un chip di avanzamento, vedi il codice eseguito dall'agente, insieme al relativo valore restituito. Copia il codice eseguito per un utilizzo successivo, ad esempio eseguendolo con il riquadro Console.
Conversazioni in pausa
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 Continua per procedere o su Annulla per impedire l'esecuzione.
Salva le modifiche nel workspace
Con una cartella del workspace collegata, puoi salvare le modifiche di stile suggerite da Assistenza AI nei file di origine CSS sul tuo computer.
Per
Per prima cosa, genera un file di metadati e collega una cartella del workspace.
In alternativa, puoi aggiungere una cartella manualmente.
Avvia una chat dal riquadro Elementi.
Chiedi a Assistenza AI di modificare il CSS.
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.
Espandi la sezione Modifiche non salvate e fai clic su Applica al workspace.
Esamina le modifiche in un
diffe fai clic su Salva tutto.
Per scoprire di più su questo flusso di lavoro, consulta:
Nessuna risposta fornita
Assistenza AI potrebbe non fornire risposte per vari motivi.
Se ritieni che il tuo prompt sia qualcosa di cui 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.
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 .
Continua
Per continuare una conversazione precedente, fai clic sul pulsante della e selezionala dal menu contestuale.
Elimina
Per eliminare una conversazione dalla cronologia, fai clic sul pulsante .
Valuta le risposte e fornisci feedback
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.
Vota le risposte
Valuta una risposta utilizzando i pulsanti Mi piace e Non mi piace sotto la risposta.
Segnala le risposte
Per segnalare contenuti non appropriati, fai clic sul pulsante accanto ai pulsanti di voto.