Eseguire il debug dell'app in Firebase Studio

Firebase Studio offre diversi modi per eseguire il debug dell'app direttamente dal tuo workspace. Per le app web e Flutter, una console web e Lighthouse sono integrate direttamente nel workspace. Le app Flutter offrono anteprime web e Android per controllare e testare l'app durante la codifica.

Il debug più completo basato sui punti di interruzione è disponibile anche per le lingue più comuni, tramite la console di debug integrata ed è estensibile con le estensioni del debugger di OpenVSX. Per il debug basato sui punti di interruzione del codice web frontend (ad esempio JavaScript), puoi continuare a utilizzare gli strumenti per sviluppatori integrati del browser, come Chrome DevTools.

Visualizza l'anteprima dell'app

Firebase Studio include anteprime dell'app nel workspace per le app web (Chrome) e le app Flutter (Android, Chrome). Le anteprime di Android e Chrome supportano il ricaricamento rapido e l'aggiornamento a caldo e offrono funzionalità complete dell'emulatore.

Per scoprire di più sulle anteprime Firebase Studio, consulta Visualizzare l'anteprima dell'app.

Utilizza la console web integrata per le anteprime web

La console web integrata ti aiuta a diagnosticare i problemi dell'app direttamente dall'anteprima web. Puoi accedere alla console web nel Firebase Studio riquadro di anteprima web espandendo la barra in basso.

Tieni presente che questa funzionalità è sperimentale e non è attiva per impostazione predefinita. Per attivarla, segui questi passaggi e condividi il tuo feedback dopo averla provata:

1. Aggiungi la console web al tuo Firebase Studio workspace:

   1. Apri Impostazioni facendo clic su settings o premendo Ctrl + , (su Windows/Linux/ChromeOS) o Cmd + , (su macOS).
   2. Trova l'impostazione Firebase Studio: strumenti di sviluppo web e attivala. Se stai modificando direttamente il file settings.json, puoi aggiungere "IDX.webDevTools": true.
   3. Aggiorna la finestra del browser per ricaricare il Firebase Studio workspace.

2. Apri l'anteprima web in Firebase Studio: apri il riquadro dei comandi (Cmd+Shift+P su Mac o Ctrl+Shift+P su ChromeOS, Windows o Linux) e seleziona Firebase Studio: mostra anteprima web.

3. Per impostazione predefinita, il riquadro della console web è ridotto a icona all'interno del riquadro di anteprima web. Fai clic sulla barra o trascinala verso l'alto per espanderla.

Il riquadro della console web nell'anteprima web Firebase Studio funziona in modo simile ad altre console, ad esempio quella disponibile in Chrome DevTools:

• Gli errori JavaScript e le istruzioni console.log verranno visualizzati durante l'utilizzo dell'app.
  • Per gli errori e gli avvisi, hai anche la possibilità di ricevere assistenza da Gemini selezionando il Comprendi questo errore pulsante a destra del messaggio di errore.
• Puoi valutare JavaScript arbitrario nel contesto dell'anteprima web utilizzando la barra dei prompt in basso.

Esegui Lighthouse per le anteprime web

Lighthouse esegue il controllo dell'app in base alle categorie di controllo specifiche selezionate e restituisce un report con risultati e suggerimenti. Puoi eseguire i report di Lighthouse direttamente dall'anteprima web in Firebase Studio.

1. Apri l'anteprima web in Firebase Studio: apri il riquadro dei comandi (Cmd+Shift+P su Mac o Ctrl+Shift+P su ChromeOS, Windows o Linux) e seleziona Firebase Studio: mostra anteprima web.

2. Fai clic sull'icona Esegui Lighthouse dalla barra degli strumenti dell'anteprima web.

3. Nel riquadro Lighthouse, seleziona le categorie di controllo che vuoi utilizzare. Puoi scegliere tra i report che controllano le prestazioni, l'accessibilità, la conformità alle best practice, la SEO e le prestazioni delle app web progressive. Fai clic su Analizza pagina per generare i report.

   La generazione dei report potrebbe richiedere alcuni minuti.

4. Dopo che i report vengono visualizzati nel riquadro Lighthouse, puoi esaminare i risultati per ogni categoria di controllo o passare da una categoria all'altra facendo clic sul punteggio e sul nome della categoria.

Utilizza la console di debug

Firebase Studio include la console di debug integrata di Code OSS. Utilizza questa console per eseguire il debug dell'app con i debugger predefiniti per le lingue di programmazione più comuni oppure aggiungi un'estensione di debug da OpenVSX.

Per personalizzare l'esperienza di debug, puoi anche aggiungere un file .vscode/launch.json al tuo workspace e specificare configurazioni di avvio personalizzate. Scopri di più sull'utilizzo dei file di configurazione di avvio per personalizzare il debug in Configurazione del debug di Visual Studio Code.

Esegui il debug con Gemini

Puoi utilizzare Gemini per eseguire il debug del codice con la chat nel workspace Code o App Prototyping agent.

Sebbene Gemini possa scrivere codice per te, a volte potrebbe anche produrre errori. Quando rileva un errore, tenta di correggerlo. Se ritieni che non sia in grado di risolvere il problema dato il messaggio di errore, puoi provare alcune delle seguenti tecniche:

• Descrivi il problema: nell'interfaccia di chat, descrivi il problema che stai riscontrando nel modo più chiaro e conciso possibile. Sebbene Gemini possa avere accesso a contesti come messaggi di errore e log, potrebbe non comprendere il contesto completo. Descrivere il comportamento insieme al messaggio di errore può aiutare Gemini a correggere gli errori più rapidamente.

• Poni domande specifiche: non aver paura di porre a Gemini Gemini domande dirette sul tuo codice. Ad esempio: "Cosa potrebbe causare un'eccezione di puntatore nullo in questa funzione?" o "Come posso impedire questa race condition?"

• Suddividi i problemi complessi: se hai a che fare con un problema complesso, suddividilo in parti più piccole e gestibili. Chiedi Gemini di aiutarti a eseguire il debug di ogni parte separatamente e di risolvere i problemi passo dopo passo.

• Utilizza i recinti di codice: quando condividi snippet di codice, utilizza i recinti di codice per assicurarti che il codice sia formattato correttamente. In questo modo, è più facile per Gemini leggere e comprendere il tuo codice.

• Esegui iterazioni e perfezionamenti: Gemini potrebbe non fornire sempre la soluzione perfetta al primo tentativo. Esamina le risposte, poni domande chiarificatrici e fornisci ulteriori informazioni, se necessario.

• Evita i loop di prompt: se Gemini si blocca in un loop o non è in grado di rispondere alla tua domanda, prova a riformulare il prompt o a fornire un contesto aggiuntivo. A volte, la semplice riformulazione della tua domanda può aiutare Gemini a capire cosa stai chiedendo.

  Se la riformulazione del prompt non risolve il loop, prova le seguenti tecniche:

  • Avvia una nuova chat: Se utilizzi la chat di Gemini nel tuo workspace Code, avvia una nuova sessione di chat per reimpostare il contesto di Gemini. Questo può aiutarti a liberarti da eventuali idee sbagliate o ipotesi che Gemini potrebbe aver fatto nella conversazione precedente.

  • Fornisci controesempi: se Gemini fa ipotesi errate, fornisci controesempi per aiutarlo a comprendere il comportamento corretto.