Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Firebase Studio offre diversi modi per eseguire il debug della tua app direttamente
dall'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 controllare e testare l'app mentre scrivi il codice.
Il debug più avanzato basato sui punti di interruzione è disponibile anche per i linguaggi 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 (come JavaScript), 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 app web (Chrome)
e app Flutter (Android, Chrome). Le anteprime
di Android e Chrome supportano il ricaricamento e l'aggiornamento rapido e offrono funzionalità
complete dell'emulatore.
Utilizzare la console web integrata per le anteprime web
La console web integrata ti aiuta a diagnosticare i problemi nella 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 è attivata per impostazione predefinita. Per
attivarla, segui questi passaggi e condividi il tuo
feedback dopo
averla provata:
Aggiungi la console web al tuo spazio di lavoro Firebase Studio:
Apri le Impostazioni facendo clic su
settings o premendo
Ctrl + , (su Windows/Linux/ChromeOS) o Cmd + , (su MacOS).
Trova l'impostazione Firebase Studio: Strumenti di sviluppo web e attivala. Se modifichi direttamente il file settings.json, puoi
aggiungere "IDX.webDevTools": true.
Aggiorna la finestra del browser per ricaricare lo spazio di lavoro Firebase Studio.
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.
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, ad esempio quella disponibile in
Chrome DevTools:
Gli errori JavaScript e le istruzioni console.log verranno visualizzati man mano che 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
esamina 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.
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.
Fai clic sull'icona Esegui Lighthouse dalla barra degli strumenti di anteprima web.
La generazione dei report potrebbe richiedere alcuni minuti.
Una volta visualizzati i report nel riquadro di 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 predefiniti 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 avvio per personalizzare il debug nella
configurazione di debug di Visual Studio Code.
Debug con Gemini
Puoi usare Gemini in Firebase per eseguire il debug del codice con la chat nel tuo spazio di lavoro Code o in App Prototyping agent.
Anche se Gemini può scrivere codice per te, a volte potrebbe
produrre errori. Quando rileva un errore, tenta
di correggerlo. Se riscontri che non è 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.
Anche se Gemini potrebbe 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 risolvere gli errori
più rapidamente.
Fai domande specifiche: non aver paura di fare domande dirette sul tuo codice.Gemini Ad esempio, "Quale potrebbe essere la causa di un'eccezione di puntatore nullo in questa funzione?" o "Come posso evitare questa condizione di competizione?"
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 di analizzare
i problemi passo dopo passo.
Utilizza recinzioni di codice:quando condividi snippet di codice, utilizza recinzioni di codice
per assicurarti che il codice sia formattato correttamente. In questo modo, è più facile
per Gemini leggere e comprendere il tuo codice.
Esegui l'iterazione e perfeziona:Gemini potrebbe non fornire sempre la soluzione perfetta al primo tentativo. Esamina le risposte, poni domande
per chiarire dubbi 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, basta riformulare la domanda per aiutare Gemini a capire cosa stai chiedendo.
Se la riformulazione del prompt non risolve il problema del loop, prova
le seguenti tecniche:
Avvia una nuova chat:se utilizzi Gemini nella chat Firebase
nel tuo spazio di lavoro Code, avvia una nuova sessione di chat per reimpostare
il contesto di Gemini. In questo modo, puoi superare eventuali
idee sbagliate o presupposti che Gemini potrebbe aver fatto
nella conversazione precedente.
Fornisci controesempi:se Gemini sta facendo ipotesi errate, fornisci controesempi per aiutarlo a comprendere il comportamento corretto.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2025-07-25 UTC."],[],[],null,["Firebase Studio offers a few different ways to debug your app, directly\nfrom your workspace. For web and Flutter apps, a web console and\n[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview)\nare directly integrated into the workspace. Flutter apps offer Android and web\npreviews to spot-check and test your app while you code.\n\nRicher, breakpoint-based debugging is also available for most common languages,\nthrough the built-in Debug Console, and extensible with [Debugger extensions\nfrom OpenVSX](https://open-vsx.org/?category=Debuggers). For\nbreakpoint-based debugging of your frontend web code (like JavaScript), you can\ncontinue using your browser's built-in developer tools, like\n[Chrome's DevTools](https://developer.chrome.com/docs/devtools).\n\nPreview your app\n\nFirebase Studio includes\n[in-workspace app previews](/docs/studio/preview-apps) for web apps (Chrome)\nand Flutter apps (Android, Chrome). The\nAndroid and Chrome previews support hot reload and hot refresh, and offer full\nemulator capabilities.\n\nTo learn more about Firebase Studio previews, see\n[Preview your app](/docs/studio/preview-apps).\n\nUse the integrated web console for web previews\n\nThe integrated web console helps you diagnose issues in your app directly\nfrom the web preview. You can access the web console in the\nFirebase Studio web preview panel by expanding the bar at the bottom.\n\nNote that this feature is experimental and isn't enabled by default. To\nturn it on, follow these steps, and [share your\nfeedback](/support/troubleshooter/studio) after\nyou've tried it out:\n\n1. Add the web console to your Firebase Studio workspace:\n\n 1. Open **Settings** by clicking settings or pressing `Ctrl + ,` (on Windows/Linux/ChromeOS) or `Cmd + ,` (on MacOS).\n 2. Find the **Firebase Studio: Web Dev Tools** setting and enable it. If you're editing your `settings.json` file directly, you can add `\"IDX.webDevTools\": true`.\n 3. Refresh your browser window to reload your Firebase Studio workspace.\n2. Open the web preview in Firebase Studio: Open the command palette\n (`Cmd+Shift+P` on Mac or `Ctrl+Shift+P` on ChromeOS, Windows, or Linux)\n and select **Firebase Studio: Show Web Preview**.\n\n3. The web console panel is minimized within the web preview panel by default.\n Click the bar or drag it up to expand it.\n\nThe web console panel in the Firebase Studio web preview works\nsimilarly to other consoles, such as the one available in\n[Chrome DevTools](https://developer.chrome.com/docs/devtools):\n\n- JavaScript errors and `console.log` statements will appear there as you use your app.\n - For errors and warnings, you also have the option to get assistance from Gemini by selecting the **Understand this error** button at the right of the error message.\n- You can evaluate arbitrary JavaScript in the context of your web preview by using the prompt bar at the bottom.\n\nRun Lighthouse for web previews\n\n[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview)\naudits your app based on the specific audit categories you select, and returns\na report with findings and suggestions. You can run Lighthouse reports directly\nfrom the web preview in Firebase Studio.\n\n1. Open the web preview in Firebase Studio: Open the command palette\n (`Cmd+Shift+P` on Mac or `Ctrl+Shift+P` on ChromeOS, Windows, or\n Linux) select **Firebase Studio: Show Web Preview**.\n\n2. Click the\n **Run Lighthouse** icon from the web preview toolbar.\n\n3. In\n the Lighthouse panel, select the audit categories you want. You can\n choose from reports auditing [performance](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring), [accessibility](https://developer.chrome.com/docs/lighthouse/accessibility/scoring),\n [conformance with best practices](https://developer.chrome.com/docs/lighthouse/best-practices/doctype), [SEO](https://developer.chrome.com/docs/lighthouse/seo/meta-description), and [Progressive Web\n App performance](https://developer.chrome.com/docs/lighthouse/pwa/load-fast-enough-for-pwa). Click **Analyze page** to generate the reports.\n\n The reports might take a few minutes to generate.\n4. After the reports appear in the Lighthouse panel, you can review the\n findings for each audit category, or switch between audit categories by\n clicking the score and category name.\n\nUse the Debug Console\n\nFirebase Studio includes the built-in Debug Console from Code OSS. Use this\nconsole to debug your app with out-of-the-box debuggers for most common\nprogramming languages, or add a debugging extension from\n[OpenVSX](https://open-vsx.org/?category=Debuggers).\n\nTo customize your debugging experience, you can also add a `.vscode/launch.json`\nfile to your workspace and specify custom launch configurations. Learn more\nabout using launch configuration files to customize debugging at\n[Visual Studio Code debug\nconfiguration](https://github.com/microsoft/vscode-docs/blob/main/docs/debugtest/debugging-configuration.md).\n\nDebug with Gemini\n\nYou can use Gemini in Firebase to help you debug your code with\nchat in your **Code** workspace\nor the App Prototyping agent.\n\nWhile Gemini can write code for you, it might sometimes also\nproduce errors. When it detects an error, it will attempt\nto fix it. If you find that it isn't able to resolve the issue given\nthe error message, you can try some of the following techniques:\n\n- **Describe the issue:** In the chat interface, describe the\n problem you're encountering as clearly and concisely as possible.\n While Gemini might have access to context like error messages\n and logs, it might not understand the full context. Describing the behavior\n along with the error message can help Gemini fix errors\n faster.\n\n- **Ask specific questions:** Don't be afraid to ask Gemini\n direct questions about your code. For example, \"What could be causing a\n null pointer exception in this function?\" or \"How can I prevent\n this race condition?\"\n\n- **Break down complex problems:** If you're dealing with a complex\n issue, break it down into smaller, more manageable parts. Ask\n Gemini to help you debug each part separately and think\n through problems step-by-step.\n\n- **Use code fences:** When sharing code snippets, use code fences\n to ensure that the code is properly formatted. This makes it easier\n for Gemini to read and understand your code.\n\n- **Iterate and refine:** Gemini may not always provide the perfect\n solution on the first try. Review the responses, ask clarifying\n questions, and provide additional information as needed.\n\n- **Avoid prompting loops:** If Gemini gets stuck in a loop or is\n unable to answer your question, try rephrasing your prompt or\n providing additional context. Sometimes, just rewording your\n question can help Gemini understand what you're asking.\n\n If rephrasing your prompt doesn't resolve the loop, try\n the following techniques:\n - **Start a new chat:** If you're using Gemini in Firebase\n chat in your Code\n workspace, start a new chat session to reset\n Gemini's context. This can help break free from any\n misconceptions or assumptions that Gemini may have made\n in the previous conversation.\n\n - **Provide counter-examples:** If Gemini is making incorrect\n assumptions, provide counter-examples to help it understand\n the correct behavior."]]
Esegui Lighthouse dalla barra degli strumenti di anteprima web.
Nel
pannello 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.