Il progetto IDX offre diversi modi per eseguire il debug dell'app, direttamente dall'area di lavoro. Le app web e Flutter offrono Lighthouse e Chrome DevTools nell'anteprima web di Chrome nell'area di lavoro. Le app Flutter offrono anteprime per iOS,
Android e web per controllare e testare l'app durante la programmazione. La console di debug integrata supporta il debug automatico per la maggior parte dei linguaggi più comuni e il debug personalizzato che puoi definire in un file launch.json nell'area di lavoro.
Visualizza l'anteprima dell'app
IDX include le anteprime delle app in-workspace per le app web (Chrome e Safari per dispositivi mobili) e le app Flutter (iOS, Android, Chrome). Le anteprime di Android e Chrome supportano il ricaricamento a caldo e l'aggiornamento a caldo e offrono funzionalità complete di emulatore. I simulatori Safari e iOS offrono anteprime visive e interattive su vari dispositivi iOS e simulano l'esperienza iOS per app web e mobile.
Per scoprire di più sulle anteprime IDX, consulta Visualizzare l'anteprima dell'app.
Utilizza Chrome DevTools per le anteprime web (sperimentale)
Chrome DevTools per aiutarti a diagnosticare
i problemi nella tua app direttamente dall'anteprima web. Puoi accedere a Chrome
DevTools nel riquadro di anteprima web di IDX come faresti per aprire DevTools
dal browser Chrome. 
Questa funzionalità è sperimentale perché lavoriamo per creare un'esperienza utente ideale. Inviaci un feedback per aiutarci a migliorarlo.
Aggiungi Chrome DevTools alla tua area di lavoro IDX:
- Apri la finestra Impostazioni facendo clic sull'icona a forma di ingranaggio o premendo Ctrl+ , (su Windows/Linux/ChromeOS) o Cmd+ , (su MacOS).
- Individua l'impostazione IDX: Web Dev Tools e seleziona Abilita Chrome DevTools per l'anteprima web (è necessario ricaricare il browser). Se usi
un file
settings.json, puoi anche impostare"IDX.webDevTools": true. - Aggiorna la finestra del browser e ricarica lo spazio di lavoro IDX.
Apri l'anteprima web nel progetto IDX: apri la tavolozza dei comandi (Cmd+Maiusc+P su Mac o Ctrl+Maiusc+P su ChromeOS, Windows o Linux) e seleziona Progetto IDX: mostra anteprima web.
Il riquadro DevTools è ridotto a icona all'interno del riquadro di anteprima web. Fai clic sulla barra degli strumenti DevTools per espandere il riquadro e utilizzare DevTools all'interno del riquadro di anteprima web.
Utilizza il riquadro DevTools nell'anteprima web di IDX come faresti per il debug dell'app nel browser Chrome.
Esegui le anteprime di Lighthouse per il web
Lighthouse controlla la tua app in base alle specifiche categorie di controllo selezionate e restituisce un report con risultati e suggerimenti. Puoi eseguire i report Lighthouse direttamente dall'anteprima web in Project IDX.
Apri l'anteprima web nel progetto IDX: apri la tavolozza dei comandi (Cmd+Maiusc+P su Mac o Ctrl+Maiusc+P su ChromeOS, Windows o Linux) e seleziona Progetto IDX: mostra anteprima web.
Fai clic sull'icona per il controllo del rendimento nella barra degli strumenti dell'anteprima web.
Nel riquadro Lighthouse, seleziona le categorie di controllo che preferisci. Puoi scegliere tra report che controllano rendimento, accessibilità, conformità alle best practice, SEO, e prestazioni delle app web progressive. Fai clic su Analizza pagina per generare i report.La generazione dei report potrebbe richiedere alcuni minuti.
Una volta visualizzati i report nel riquadro Lighthouse, puoi esaminare i risultati per ciascuna categoria di controllo o passare da una categoria di controllo all'altra facendo clic sul punteggio e sul nome della categoria.
Utilizzo della console di debug
Il progetto IDX include la console di debug integrata di Code OSS. Utilizza questa console per eseguire il debug della tua app con i debugger pronti all'uso per i linguaggi di programmazione più comuni oppure per aggiungere un'estensione di debug da VSCode Marketplace.
Se vuoi scrivere debug personalizzato, aggiungi un file launch.json all'area di lavoro.