App in Firebase Studio debuggen

Firebase Studio bietet verschiedene Möglichkeiten, Ihre App direkt über Ihren 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 Programmierung überprüfen und testen können.

Für die meisten gängigen Sprachen ist auch ein umfassenderes, auf Breakpoints basierendes Debugging über die integrierte Debugging-Konsole möglich. Es kann mit Debugger-Erweiterungen von OpenVSX erweitert werden. Für das Breakpoint-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 Vorschaubilder von Apps im Arbeitsbereich für Web-Apps (Chrome) und Flutter-Apps (Android, Chrome). Die Android- und Chrome-Vorschau unterstützt Hot-Reload und Hot-Refresh und bietet vollständige Emulatorfunktionen.

Weitere Informationen zu Firebase Studio-Vorschauen

Integrierte Webkonsole für Webvorschauen verwenden

Minimierte Konsolenleiste in der Firebase Studio-Webvorschau

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 die Funktion: Folgen Sie dieser Anleitung und 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 Ihre 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 im Bereich „Webvorschau“ standardmäßig 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 verfügbare Konsole:

  • Dort werden JavaScript-Fehler und console.log-Anweisungen angezeigt, wenn Sie Ihre App verwenden.
    • Bei Fehlern und Warnungen haben Sie auch die Möglichkeit, Unterstützung von Gemini zu erhalten. Klicken Sie dazu rechts neben der Fehlermeldung auf die Schaltfläche Diesen Fehler verstehen.
  • Sie können beliebigen JavaScript-Code im Kontext Ihrer Webvorschau mithilfe der Eingabeaufforderungsleiste unten auswerten.

Lighthouse für Webvorschauen ausführen

Lighthouse prüft Ihre App anhand der von Ihnen ausgewählten Audit-Kategorien 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 die Geschwindigkeitsprüfung Lighthouse ausführen.

  3. Bild des Lighthouse-Bereichs in Firebase Studio Wählen Sie im Lighthouse-Bereich die gewünschten Prüfkategorien aus. Sie können Berichte auswählen, in denen Leistung, Barrierefreiheit, Einhaltung von Best Practices, SEO und Leistung von Progressive Web-Apps geprüft werden. Klicken Sie auf Seite analysieren, um die Berichte zu generieren.

    Das Erstellen der Berichte kann einige Minuten dauern.

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

Debug-Konsole verwenden

Firebase Studio enthält die integrierte Debugkonsole von Code OSS. Mit dieser Konsole können Sie Ihre App 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 zum Anpassen des Debuggings mit Startkonfigurationsdateien

Fehlerbehebung mit Gemini

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

Gemini kann zwar Code für Sie schreiben, aber es kann auch zu Fehlern kommen. 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, das Sie haben, in der Chatoberfläche so klar und prägnant wie möglich. Gemini hat möglicherweise Zugriff auf Kontext wie Fehlermeldungen und Protokolle, versteht aber möglicherweise nicht den vollständigen 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. Beispiele: „What could be causing a null pointer exception in this function?“ (Was könnte eine Nullzeiger-Ausnahme in dieser Funktion verursachen?) oder „How can I prevent this race condition?“ (Wie kann ich diese Race Condition verhindern?).

  • Komplexe Probleme aufschlüsseln:Wenn Sie es mit einem komplexen Problem zu tun haben, zerlegen Sie es in kleinere, übersichtlichere Teile. Bitten Sie Gemini, Ihnen bei der separaten Fehlerbehebung für die einzelnen Teile zu helfen und Probleme Schritt für Schritt zu durchdenken.

  • Code-Fences verwenden:Wenn Sie Code-Snippets teilen, verwenden Sie Code-Fences, damit der Code richtig formatiert wird. 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. Sehen Sie sich die Antworten an, stellen Sie bei Bedarf klärende Fragen und geben Sie zusätzliche Informationen an.

  • Schleifen vermeiden:Wenn Gemini in einer Schleife hängen bleibt oder Ihre Frage nicht beantworten kann, versuchen Sie, den Prompt umzuformulieren oder zusätzlichen Kontext anzugeben. Manchmal reicht es schon, die Frage umzuformulieren, damit Gemini versteht, was Sie fragen.

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

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

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