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 Web-Vorschauen, 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 Web-Vorschauen verwenden

Minimierte Konsolenleiste in der Firebase Studio-Webvorschau

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

Beachten Sie, dass diese Funktion experimentell ist und nicht standardmäßig aktiviert ist. So aktivieren Sie sie. Wir freuen uns über Ihr 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 das Zahnrad klicken 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 Web-Vorschau 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: Web-Vorschau anzeigen aus.

  3. Das Webkonsolenfenster ist standardmäßig im Web-Vorschaufenster minimiert. Klicken Sie auf die Leiste oder ziehen Sie sie nach oben, um sie zu maximieren.

Das Webkonsolenfenster in der Firebase Studio Web-Vorschau 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 haben Sie auch die Möglichkeit, Unterstützung von Gemini zu 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 Web-Vorschau auswerten, indem Sie die Eingabeaufforderungsleiste unten verwenden.

Lighthouse für Web-Vorschauen 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 Web-Vorschau in Firebase Studio ausführen.

  1. Öffnen Sie die Web-Vorschau 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: Web-Vorschau anzeigen aus.

  2. Klicken Sie in der Symbolleiste der Web-Vorschau auf das Symbol Bild eines Symbols für die Geschwindigkeitsprüfung Lighthouse ausführen.

  3. Bild des Lighthouse-Bereichs in Firebase Studio Wählen Sie im Lighthouse-Fenster 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.

    Das Generieren der Berichte kann einige Minuten dauern.

  4. Nachdem die Berichte im Lighthouse-Fenster 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 Debugging in Visual Studio Code konfigurieren.

Mit Gemini debuggen

Sie können Gemini verwenden, um Ihren Code mit Chat in Ihrem Code-Arbeitsbereich oder mit 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 im Chat 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. Prüfen Sie die Antworten, stellen Sie klärende Fragen und geben Sie bei Bedarf zusätzliche Informationen an.

  • Schleifen vermeiden: Wenn Gemini in einer Schleife hängen bleibt oder Ihre Frage nicht beantworten kann, formulieren Sie die Eingabeaufforderung neu oder geben Sie zusätzlichen Kontext an. Manchmal hilft es schon, die Frage anders zu formulieren, damit Gemini versteht, was Sie fragen.

    Wenn das Problem durch das Umformulieren der Eingabeaufforderung nicht behoben wird, 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 falschen Vorstellungen oder Annahmen beseitigen, die Gemini im vorherigen Gespräch gemacht haben.

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