Fehler in Ihrer App in Firebase Studio beheben

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

Für die gängigsten Sprachen ist auch ein umfangreicheres, auf Haltepunkten basierendes Debugging über die integrierte Debugging-Konsole verfügbar. Es kann mit Debugger-Erweiterungen von OpenVSX erweitert werden. Für das Haltepunkt-basierte Debugging Ihres Frontend-Webcodes (z. B. JavaScript) können Sie weiterhin die integrierten Entwicklertools Ihres Browsers verwenden, z. B. die Chrome-Entwicklertools.

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 Vorschau der App ansehen.

Integrierte Webkonsole für Webvorschauen verwenden

Mit der integrierten Webkonsole können Sie Probleme in Ihrer Anwendung direkt in der Webvorschau diagnostizieren. Sie können die Webkonsole im Firebase Studio-Webvorschaufenster aufrufen, indem Sie die Leiste unten maximieren.

Diese Funktion ist experimentell und nicht standardmäßig aktiviert. So aktivieren Sie die Funktion: Geben Sie uns Feedback, nachdem Sie sie ausprobiert haben.

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

   1. Öffnen Sie die Einstellungen, indem Sie auf klicken oder Ctrl + , (unter Windows/Linux/ChromeOS) oder Cmd + , (unter macOS) drücken.
   2. Suchen Sie die Einstellung Firebase Studio: Web Dev Tools und aktivieren Sie sie. Wenn Sie die Datei settings.json direkt bearbeiten, können Sie "IDX.webDevTools": true hinzufügen.
   3. Aktualisieren Sie das Browserfenster, um den Arbeitsbereich Firebase Studio neu zu laden.

2. Öffnen Sie die Webvorschau in Firebase Studio: Ö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 für die Webkonsole ist standardmäßig im Bereich für die Webvorschau minimiert. Klicken Sie auf die Leiste oder ziehen Sie sie nach oben, um sie zu maximieren.

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

• JavaScript-Fehler und console.log-Anweisungen werden dort angezeigt, wenn Sie Ihre Anwendung verwenden.
  • Bei Fehlern und Warnungen können Sie sich auch von Gemini unterstützen lassen. Wählen Sie dazu rechts neben der Fehlermeldung die Schaltfläche Diesen Fehler verstehen aus.
• Sie können beliebigen JavaScript-Code im Kontext Ihrer Webvorschau auswerten, indem Sie das Prompt-Feld unten verwenden.

Lighthouse für Webvorschauen ausführen

Lighthouse prüft Ihre Anwendung anhand der von Ihnen ausgewählten Prüfkategorien 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. Öffnen Sie die Webvorschau in Firebase Studio: Ö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 für die Webvorschau auf das Symbol Lighthouse ausführen.

3. Wählen Sie im Lighthouse-Bereich die gewünschten Prüfkategorien aus. Sie können Berichte zur Prüfung von Leistung, Bedienungshilfen, Einhaltung von Best Practices, SEO und Leistung von progressiven Web-Apps auswählen. Klicken Sie auf Seite analysieren, um die Berichte zu erstellen.

   Das Erstellen der Berichte kann einige Minuten dauern.

4. Sobald die Berichte im Lighthouse-Bereich angezeigt werden, können Sie die Ergebnisse für jede Audit-Kategorie prüfen oder zwischen den Audit-Kategorien wechseln, indem Sie auf die Punktzahl und den Kategorienamen klicken.

Debugging-Konsole verwenden

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

Wenn Sie das Debugging anpassen möchten, können Sie Ihrem Arbeitsbereich auch eine .vscode/launch.json-Datei hinzufügen und benutzerdefinierte Startkonfigurationen angeben. Weitere Informationen zur Verwendung von Startkonfigurationsdateien zum Anpassen des Debuggings finden Sie unter Visual Studio Code-Debugging-Konfiguration.

Fehler mit Gemini beheben

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

Gemini kann zwar Code für Sie schreiben, aber manchmal auch Fehler produzieren. Wenn ein Fehler erkannt wird, versucht das System, ihn zu beheben. Wenn Sie feststellen, dass das Problem anhand der Fehlermeldung nicht behoben werden kann, können Sie einige der folgenden Techniken ausprobieren:

• Problem beschreiben: Beschreiben Sie das Problem in der Chat-Oberfläche so klar und prägnant wie möglich. Gemini hat zwar möglicherweise Zugriff auf Kontext wie Fehlermeldungen und Logs, versteht aber möglicherweise nicht den gesamten Kontext. Wenn Sie das Verhalten zusammen mit der Fehlermeldung beschreiben, kann Gemini Fehler schneller beheben.

• Konkrete Fragen stellen: Scheuen Sie sich nicht, Gemini direkte Fragen zu Ihrem Code zu stellen. Beispiel: „Was könnte in dieser Funktion eine NullPointerException verursachen?“ oder „Wie kann ich diese Race-Bedingung verhindern?“

• Komplexe Probleme aufschlüsseln: Wenn Sie es mit einem komplexen Problem zu tun haben, unterteilen Sie es in kleinere, überschaubare Teile. Bitten Sie Gemini, Ihnen bei der Fehlerbehebung für jeden Teil einzeln zu helfen und Probleme Schritt für Schritt durchzugehen.

• Codeblöcke verwenden: Verwenden Sie beim Teilen von Code-Snippets Codeblöcke, damit der Code richtig formatiert ist. So kann Gemini Ihren Code leichter lesen und verstehen.

• Wiederholen und verfeinern: Gemini liefert möglicherweise nicht immer beim ersten Versuch die perfekte Lösung. Prüfen Sie die Antworten, stellen Sie klärende Fragen und geben Sie bei Bedarf zusätzliche Informationen an.

• Prompt-Schleifen vermeiden: Wenn Gemini in einer Schleife hängen bleibt oder Ihre Frage nicht beantworten kann, versuchen Sie, Ihren Prompt umzuformulieren oder zusätzlichen Kontext anzugeben. Manchmal hilft es, die Frage einfach umzuformulieren, damit Gemini versteht, was Sie wissen möchten.

  Wenn das Problem durch Umformulieren des Prompts nicht behoben wird, versuchen Sie es mit den folgenden Techniken:

  • Neuen Chat starten: Wenn Sie den Gemini-Chat in Ihrem Code-Arbeitsbereich verwenden, starten Sie eine neue Chatsitzung, um den Kontext von Gemini zurückzusetzen. So können Sie sich von Missverständnissen oder Annahmen befreien, die Gemini in der vorherigen Unterhaltung möglicherweise getroffen hat.

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