Eseguire il debug dell'app in Firebase Studio

Firebase Studio offre diversi modi per eseguire il debug della tua app, direttamente dal tuo workspace. Per le app web e Flutter, una console web e Lighthouse sono integrate direttamente nell'area di lavoro. Le app Flutter offrono anteprime per Android e web per controllare e testare l'app mentre scrivi il codice.

Il debug più completo basato su breakpoint è disponibile anche per i linguaggi più comuni, tramite la console di debug integrata ed estendibile con le estensioni del debugger di OpenVSX. Per il debug basato su breakpoint del codice web frontend (come JavaScript), puoi continuare a utilizzare gli strumenti per sviluppatori integrati nel browser, come Chrome DevTools.

Visualizza l'anteprima dell'app

Firebase Studio include anteprime delle app in 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 rapido e offrono funzionalità complete dell'emulatore.

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

Utilizza la console web integrata per le anteprime web

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

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

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

   1. Apri le Impostazioni facendo clic su o premendo Ctrl + , (su Windows/Linux/ChromeOS) o Cmd + , (su MacOS).
   2. Trova l'impostazione Firebase Studio: Strumenti per sviluppatori web e attivala. Se modifichi direttamente il file settings.json, puoi aggiungere "IDX.webDevTools": true.
   3. Aggiorna la finestra del browser per ricaricare l'area di lavoro Firebase Studio.

2. Apri l'anteprima web in Firebase Studio: apri la tavolozza dei comandi (Cmd+Shift+P su Mac o Ctrl+Shift+P su ChromeOS, Windows o Linux) e seleziona Firebase Studio: Show Web Preview.

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

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

• Gli errori JavaScript e le istruzioni console.log verranno visualizzati lì mentre utilizzi l'app.
  • Per errori e avvisi, hai anche la possibilità di ricevere assistenza da Gemini selezionando il pulsante Comprendi questo errore 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 controlla la tua app in base alle categorie di controllo specifiche che selezioni 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 la tavolozza dei comandi (Cmd+Shift+P su Mac o Ctrl+Shift+P su ChromeOS, Windows o Linux) e seleziona Firebase Studio: Show Web Preview.

2. Fai clic sull'icona Esegui Lighthouse dalla barra degli strumenti di Anteprima web.

3. Nel riquadro Lighthouse, seleziona le categorie di controllo che ti interessano. Puoi scegliere tra 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 di controllo 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 della tua app con debugger pronti all'uso per i linguaggi di programmazione più comuni o 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 lancio per personalizzare il debug nella configurazione di debug di Visual Studio Code.

Fai il debug con Gemini

Puoi utilizzare Gemini per eseguire il debug del codice con la chat nell'area di lavoro Code o in 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 in base al 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.

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

• Suddividi i problemi complessi: se stai affrontando un problema complesso, suddividilo in parti più piccole e gestibili. Chiedi a Gemini di aiutarti a eseguire il debug di ogni parte separatamente e di riflettere sui problemi passo dopo passo.

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

• Esegui l'iterazione e perfeziona: Gemini potrebbe non fornire sempre la soluzione perfetta al primo tentativo. Esamina le risposte, fai domande di chiarimento 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, basta riformulare la domanda per 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 spazio di lavoro Code , avvia una nuova sessione di chat per reimpostare il contesto di Gemini. In questo modo, puoi liberarti da eventuali idee sbagliate o supposizioni che Gemini potrebbe aver fatto nella conversazione precedente.

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