App in Firebase Studio debuggen

Firebase Studio bietet verschiedene Möglichkeiten, Ihre App direkt in Ihrem Arbeitsbereich zu debuggen. Bei Web- und Flutter-Apps sind eine Webkonsole und Lighthouse direkt in den Arbeitsbereich eingebunden. Flutter-Apps bieten Android- und Webvorschauen, mit denen Sie Ihre App während der Programmierung prüfen und testen können.

Für die meisten gängigen Sprachen ist auch eine umfassendere, Breakpoint-basierte Fehlerbehebung über die integrierte Debug-Konsole verfügbar. Sie kann mit Debugger-Erweiterungen von OpenVSX erweitert werden. Für das breakpointbasierte Debugging Ihres Frontend-Webcodes (z. B. JavaScript) können Sie weiterhin die integrierten Entwicklertools Ihres Browsers verwenden, z. B. die Chrome DevTools.

App als Vorschau

Firebase Studio enthält App-Vorschauen im Arbeitsbereich für Web-Apps (Chrome) und Flutter-Apps (Android, Chrome). Die Android- und Chrome-Vorabversionen unterstützen Hot Reload und Hot Refresh und bieten vollständige Emulatorfunktionen.

Weitere Informationen zu Firebase Studio-Vorschauen finden Sie unter App in der Vorschau ansehen.

Integrierte Webkonsole für Webvorschauen verwenden

Minimierte Console-Leiste in der Webvorschau von Firebase Studio

Mit der integrierten Webkonsole können Sie Probleme in Ihrer App direkt in der Webvorschau diagnostizieren. Sie können im Vorschaubereich für die Firebase Studio-Webversion auf die Webkonsole zugreifen, indem Sie die Leiste unten maximieren.

Diese Funktion befindet sich in der Entwicklungsphase und ist nicht standardmäßig aktiviert. So aktivierst du die Funktion:

  1. So fügen Sie die Webkonsole Ihrem Firebase Studio-Arbeitsbereich hinzu:

    1. Öffne die Einstellungen, indem du auf  klickst oder die Taste Ctrl + , (unter Windows/Linux/ChromeOS) oder Cmd + , (unter macOS) drückst.
    2. Aktivieren Sie die Einstellung Firebase Studio: Web-Entwicklertools. Wenn Sie die settings.json-Datei direkt bearbeiten, können Sie "IDX.webDevTools": true hinzufügen.
    3. Aktualisieren Sie das Browserfenster, um Ihren Firebase Studio-Arbeitsbereich neu zu laden.

  2. Webvorschau in Firebase Studio öffnen: Öffnen Sie die Befehlspalette (Cmd+Shift+P auf dem Mac oder Ctrl+Shift+P unter ChromeOS, Windows oder Linux) und wählen Sie Firebase Studio: Webvorschau anzeigen aus.

  3. Der Bereich „Webkonsole“ ist standardmäßig im Bereich „Webvorschau“ minimiert. Klicken Sie auf die Leiste oder ziehen Sie sie nach oben, um sie zu maximieren.

Der Bereich „Webkonsole“ in der Firebase Studio-Webvorschau funktioniert ähnlich wie andere Konsolen, z. B. die in den Chrome-Entwicklertools:

  • Dort werden JavaScript-Fehler und console.log-Anweisungen angezeigt, die während der Nutzung Ihrer App auftreten.
    • Bei Fehlern und Warnungen können Sie sich auch von Gemini unterstützen lassen. Klicken Sie dazu rechts neben der Fehlermeldung auf die Schaltfläche Diesen Fehler verstehen.
  • Mit der Promptleiste unten können Sie beliebiges JavaScript im Kontext Ihrer Webvorschau auswerten.

Lighthouse für Webvorschauen ausführen

Lighthouse prüft Ihre App anhand der von Ihnen ausgewählten Analysekategorien und gibt einen Bericht mit Ergebnissen und Vorschlägen zurück. Sie können Lighthouse-Berichte direkt über die Webvorschau in Firebase Studio ausführen.

  1. Webvorschau in Firebase Studio öffnen: Öffnen Sie die Befehlspalette (Cmd+Shift+P auf dem Mac oder Ctrl+Shift+P unter ChromeOS, Windows oder Linux) und wählen Sie Firebase Studio: Webvorschau anzeigen aus.

  2. Klicken Sie in der Symbolleiste der Webvorschau auf das Symbol Bild eines Symbols für Geschwindigkeitskontrollen Lighthouse ausführen.

  3. Bild des Lighthouse-Steuerfelds in Firebase Studio Wählen Sie im Lighthouse-Steuerfeld die gewünschten Analysekategorien aus. Sie können Berichte zur Leistung, Barrierefreiheit, Einhaltung von Best Practices, SEO und Leistung von progressiven Web-Apps auswählen. Klicken Sie auf Seite analysieren, um die Berichte zu generieren.

    Die Berichterstellung kann einige Minuten dauern.

  4. Nachdem die Berichte im Lighthouse-Steuerfeld angezeigt werden, können Sie die Ergebnisse für jede Analysekategorie prüfen oder durch Klicken auf die Bewertung und den Namen der Kategorie zwischen den Analysekategorien wechseln.

Debug-Konsole verwenden

Firebase Studio enthält die integrierte Debug-Konsole von Code OSS. Mit dieser Konsole können Sie Ihre App mit vorkonfigurierten Debuggern für die gängigsten Programmiersprachen debuggen oder eine Debug-Erweiterung von OpenVSX hinzufügen.

Sie können Ihren Arbeitsbereich auch um eine .vscode/launch.json-Datei ergänzen und benutzerdefinierte Startkonfigurationen angeben, um das Debuggen anzupassen. Weitere Informationen zur Verwendung von Startkonfigurationsdateien zum Anpassen des Debuggens finden Sie unter Debugkonfiguration in Visual Studio Code.

Mit Gemini debuggen

Sie können Gemini in Firebase verwenden, um mithilfe von Chat in Ihrem Code-Arbeitsbereich oder in der App Prototyping agent Ihren Code zu debuggen.

Gemini kann zwar Code für Sie schreiben, aber manchmal auch Fehler verursachen. Wenn ein Fehler erkannt wird, wird versucht, ihn zu beheben. Wenn das Problem durch die Fehlermeldung nicht behoben werden kann, können Sie einige der folgenden Methoden ausprobieren:

  • Beschreiben Sie das Problem:Beschreiben Sie in der Chatoberfläche das Problem so klar und prägnant wie möglich. Gemini hat zwar möglicherweise Zugriff auf Kontext wie Fehlermeldungen und Protokolle, versteht aber möglicherweise nicht den gesamten Kontext. Wenn Sie das Verhalten zusammen mit der Fehlermeldung beschreiben, können wir GeminiFehler schneller beheben.

  • Konkrete Fragen stellen: Scheuen Sie sich nicht, Geminidirekte Fragen zu Ihrem Code zu stellen. Beispiel: „Was könnte die Ursache für eine Nullzeigerausnahme in dieser Funktion sein?“ oder „Wie kann ich diese Race-Condition verhindern?“

  • Komplexe Probleme in kleinere Teile zerlegen: Wenn Sie mit einem komplexen Problem konfrontiert sind, zerlegen Sie es in kleinere, überschaubare Teile. Bitten Sie Gemini, Ihnen bei der Fehlerbehebung für jeden Teil einzeln zu helfen und die Probleme Schritt für Schritt zu durchdenken.

  • Code-Abschnitte verwenden:Wenn Sie Code-Snippets teilen, verwenden Sie Code-Abschnitte, damit der Code richtig formatiert ist. Dadurch ist es für Gemini einfacher, Ihren Code zu lesen und zu verstehen.

  • Iterieren und optimieren: Gemini bietet möglicherweise nicht immer beim ersten Versuch die perfekte Lösung. Sehen Sie sich die Antworten an, stellen Sie Nachfragen und machen Sie bei Bedarf weitere Angaben.

  • Schleifen vermeiden:Wenn Gemini in einer Schleife stecken bleibt oder Ihre Frage nicht beantworten kann, versuchen Sie, den Prompt umzuformulieren oder zusätzlichen Kontext hinzuzufügen. Manchmal kann es schon helfen, die Frage umzuformulieren, damit Gemini versteht, was Sie fragen.

    Wenn das Problem durch eine Umformulierung des Prompts nicht behoben wird, versuchen Sie Folgendes:

    • Neuen Chat starten:Wenn Sie Gemini in Firebase Chat in Ihrem Code-Arbeitsbereich verwenden, starten Sie eine neue Chatsitzung, um den Kontext von Gemini zurückzusetzen. So können Sie eventuelle Missverständnisse oder Annahmen, die Gemini in der vorherigen Unterhaltung gemacht hat, ausräumen.

    • Gegenbeispiele angeben:Wenn Gemini falsche Annahmen trifft, geben Sie Gegenbeispiele an, damit es das richtige Verhalten versteht.