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 integriert. Flutter-Apps bieten Android- und Webvorschauen, mit denen Sie Ihre App während der Entwicklung überprüfen und testen können.

Eine umfassendere, auf Breakpoints basierende Debugging-Funktion ist über die integrierte Debug-Konsole für die meisten gängigen Sprachen verfügbar und kann mit Debugger-Erweiterungen von OpenVSX erweitert werden. Für das auf Breakpoints basierende 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-Vorschauen unterstützen Hot Reload und Hot Refresh und bieten alle Emulatorfunktionen.

Weitere Informationen zu Firebase Studio Vorschauen finden Sie unter App als Vorschau.

Integrierte Webkonsole für Webvorschauen verwenden

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

Diese Funktion befindet sich in der Entwicklungsphase und ist nicht standardmäßig aktiviert. So aktivieren Sie sie: Folgen Sie der Anleitung und geben Sie unsFeedback, nachdem Sie sie ausprobiert haben:

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

   1. Öffnen Sie die Einstellungen , indem Sie auf das Zahnrad klicken settings oder Ctrl + , (unter Windows/Linux/ChromeOS) oder Cmd + , (unter macOS) drücken.
   2. Suchen Sie die Einstellung Firebase Studio: Webentwicklertools 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 Ihren Firebase Studio Arbeitsbereich neu zu laden.

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

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

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

• JavaScript-Fehler und console.log-Anweisungen werden dort angezeigt, wenn Sie Ihre App verwenden.
  • Bei Fehlern und Warnungen können Sie auch Unterstützung von Gemini erhalten. 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 die Eingabeaufforderungsleiste unten verwenden.

Lighthouse für Webvorschauen ausführen

Lighthouse prüft Ihre App 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 in der Webvorschau in Firebase Studio ausführen.

1. Öffnen Sie die Webvorschau in Firebase Studio: Öffnen Sie die Befehlspalette (Cmd+Shift+P unter 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 Lighthouse ausführen.

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

   Die Berichte können einige Minuten in Anspruch nehmen.

4. Nachdem die Berichte im Lighthouse-Bereich angezeigt werden, können Sie die Ergebnisse für jede Prüfkategorie ansehen oder zwischen den Prüfkategorien wechseln, indem Sie auf die Punktzahl und den Kategorienamen klicken.

Debug-Konsole verwenden

Firebase Studio enthält die integrierte Debug-Konsole von Code OSS. Mit dieser Konsole können Sie Ihre App mit sofort einsatzbereiten Debuggern für die meisten gängigen Programmiersprachen debuggen oder eine Debugging-Erweiterung von OpenVSXhinzufügen.

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

Mit Gemini debuggen

Sie können Gemini verwenden, um Ihren Code mit dem Chat in Ihrem Code-Arbeitsbereich oder dem App Prototyping agent 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 anhand der Fehlermeldung nicht behoben werden kann, können Sie Folgendes versuchen:

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

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

• Komplexe Probleme aufteilen:Wenn Sie ein komplexes Problem haben, teilen Sie es in kleinere, besser handhabbare Teile auf. Bitten Sie Gemini , Ihnen beim Debuggen der einzelnen Teile zu helfen und Probleme Schritt für Schritt zu durchdenken.

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

• Iterieren und verfeinern: Gemini bietet möglicherweise nicht immer die perfekte Lösung beim ersten Versuch. Sehen Sie sich die Antworten an, stellen Sie klärende Fragen und geben Sie bei Bedarf zusätzliche Informationen an.

• Aufforderungsschleifen vermeiden: Wenn Gemini in einer Schleife hängen bleibt oder Ihre Frage nicht beantworten kann, formulieren Sie die Aufforderung um oder geben Sie zusätzlichen Kontext an. Manchmal kann es helfen, die Frage einfach umzuformulieren, damit Gemini versteht, was Sie fragen.

  Wenn das Umformulieren der Aufforderung die Schleife nicht beendet, versuchen Sie Folgendes:

  • 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 alle Missverständnisse oder Annahmen beseitigen, die Gemini im vorherigen Gespräch gemacht hat.

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