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.
Apri il riquadro "Assistenza AI"
Si apre il riquadro Assistenza AI nel riquadro estraibile.
Dal riquadro Elementi
Per aprire 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.
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 Altre opzioni > Altri strumenti > Assistenza AI.
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.
Prompting
Quando avvii una nuova conversazione, l'assistenza AI per lo stile 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 Invio o fai clic sulla freccia sul lato destro del campo di input.
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 viene aggiornata man mano che l'agente esegue azioni più specifiche per risolvere la 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 dell'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 tue interazioni precedenti con 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 pannello 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 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.