Eseguire il debug dell'app in Firebase Studio

Firebase Studio offre diversi modi per eseguire il debug dell'app direttamente dalla tua area di lavoro. Per le app web e Flutter, una console web e Lighthouse sono integrate direttamente nello spazio di lavoro. Le app Flutter offrono anteprime per Android e web per verificare e testare la tua app durante la programmazione.

È disponibile anche un debug più completo basato su breakpoint per la maggior parte dei linguaggi comuni, tramite la console di debug integrata ed estensibile con le estensioni del debugger di OpenVSX. Per il debugging del codice web frontend (ad esempio JavaScript) basato su breakpoint, puoi continuare a utilizzare gli strumenti per sviluppatori integrati del browser, come Chrome DevTools.

Visualizza l'anteprima dell'app

Firebase Studio include anteprime delle app nello spazio di lavoro per le app web (Chrome) e le app Flutter (Android, Chrome). Le anteprime di Android e Chrome supportano il ricaricamento e l'aggiornamento in tempo reale e offrono funzionalità di emulazione complete.

Per scoprire di più sulle anteprime Firebase Studio, consulta Anteprima dell'app.

Utilizzare la console web integrata per le anteprime web

Barra della console minimizzata nell'anteprima web di Firebase Studio

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 Firebase Studio 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 spazio di lavoro 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 lo spazio 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: mostra anteprima web.

  3. Il riquadro della console web è ridotto a icona nel riquadro di anteprima web per impostazione predefinita. 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 durante l'utilizzo della tua app.
    • Per gli errori e gli avvisi, hai anche la possibilità di ricevere assistenza daGemini selezionando il pulsante Informazioni su questo errore a destra del messaggio di errore.
  • Puoi valutare codice JavaScript arbitrario nel contesto dell'anteprima web utilizzando la barra di prompt in basso.

Eseguire 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 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) seleziona Firebase Studio: mostra anteprima web.

  2. Fai clic sull'icona Immagine di un'icona di controllo della velocità Esegui Lighthouse nella barra degli strumenti di Anteprima web.

  3. immagine del riquadro Lighthouse in Firebase Studio Nel pannello Lighthouse, seleziona le categorie di controllo che ti interessano. Puoi scegliere tra i report di controllo del rendimento, dell'accessibilità, della conformità alle best practice, della SEO e del rendimento delle app web progressive. Fai clic su Pagina Analizza per generare i report.

    La generazione dei report potrebbe richiedere alcuni minuti.

  4. Una volta visualizzati i report 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.

Utilizzare 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 la maggior parte dei linguaggi di programmazione oppure aggiungi un'estensione di debug da OpenVSX.

Per personalizzare la tua esperienza di debug, puoi anche aggiungere un file .vscode/launch.json alla tua area di lavoro e specificare configurazioni di lancio personalizzate. Scopri di più sull'utilizzo dei file di configurazione di avvio per personalizzare il debug nella configurazione di debug di Visual Studio Code.

Eseguire il debug con Gemini

Puoi utilizzare Gemini in Firebase per eseguire il debug del codice con chat nello spazio di lavoro Code o nel App Prototyping agent.

Sebbene Gemini possa scrivere codice per te, a volte potrebbe anche produrre errori. Quando rileva un errore, tenterà di correggerlo. Se non riesci a risolvere il problema indicato dal messaggio di errore, puoi provare alcune delle seguenti tecniche:

  • Descrivi il problema: nell'interfaccia della chat, descrivi il problema che stai riscontrando nel modo più chiaro e conciso possibile. Sebbene Gemini possa avere accesso a un contesto 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 porre domande Gemini dirette sul tuo codice. Ad esempio, "Quale potrebbe essere la causa di un'eccezione di indicazione null in questa funzione?" o "Come faccio a evitare questa condizione di gara?"

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

  • Utilizza i segni di delimitazione del codice:quando condividi snippet di codice, utilizza i segni di delimitazione del codice per assicurarti che il codice sia formattato correttamente. In questo modo, sarà più facile per Gemini leggere e comprendere il codice.

  • Esegui l'iterazione e perfeziona:Gemini la soluzione perfetta potrebbe non essere sempre fornita al primo tentativo. Esamina le risposte, fai domande per chiarire e fornisci ulteriori informazioni, se necessario.

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

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

    • Avvia una nuova chat:se utilizzi Gemini nella chat di Firebase nel tuo spazio di lavoro Code, avvia una nuova sessione di chat per reimpostare il contesto di Gemini. In questo modo, puoi evitare eventuali malintesi o supposizioni che Gemini potrebbe aver fatto nella conversazione precedente.

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