Fehler in der Anwendung in Projekt-IDX beheben

Projekt-IDX bietet verschiedene Möglichkeiten zum Debuggen Ihrer Anwendung direkt über Ihren Arbeitsbereich. Web- und Flutter-Anwendungen bieten Lighthouse und die Chrome-Entwicklertools in der Chrome-Webvorschau in Ihrem Arbeitsbereich. Flutter-Apps bieten eine iOS-, Android- und Webvorschau, um Ihre App während des Programmierens stichprobenartig zu prüfen und zu testen. Die integrierte Debug Console unterstützt die automatische Fehlerbehebung für die gängigsten Sprachen sowie benutzerdefiniertes Debugging, das Sie in einer launch.json-Datei in Ihrem Arbeitsbereich definieren können.

App als Vorschau ansehen

IDX bietet eine Vorschau der direkt im Arbeitsbereich befindlichen Apps für Web-Apps (Chrome und mobile Safari) und Flutter-Apps (iOS, Android, Chrome). Die Android- und Chrome-Vorschauen unterstützen Hot-Refresh und Heißaktualisierung und bieten vollständige Emulatorfunktionen. Die Safari- und iOS-Simulatoren bieten visuelle und interaktive Vorschauen auf einer Vielzahl von iOS-Geräten und simulieren die Nutzung von iOS für mobile und Web-Apps.

Weitere Informationen zur IDX-Vorschau finden Sie unter Vorschau Ihrer App.

Chrome-Entwicklertools für die Webvorschau verwenden (experimentell)

Mit den Chrome-Entwicklertools können Sie Probleme in Ihrer App direkt über die Webvorschau diagnostizieren. Sie können im IDX-Webvorschaubereich auf die Chrome-Entwicklertools genauso zugreifen wie auf die Entwicklertools in Ihrem Chrome-Browser. Minimierter Bereich für Entwicklertools in der IDX-Webvorschau

Diese Funktion befindet sich noch in der Testphase, während wir an einer idealen Nutzererfahrung arbeiten. Senden Sie uns Feedback, damit wir sie weiter verbessern können.

  1. Fügen Sie Ihrem IDX-Arbeitsbereich die Chrome-Entwicklertools hinzu:

    1. Öffnen Sie das Fenster Einstellungen. Klicken Sie dazu auf das Zahnradsymbol oder drücken Sie Strg + , (unter Windows/Linux/ChromeOS) oder Cmd + , (unter MacOS).
    2. Suchen Sie die Einstellung IDX: Web Dev Tools und wählen Sie Chrome-Entwicklertools für die Webvorschau aktivieren (Browseraktualisierung erforderlich) aus. Wenn Sie eine settings.json-Datei verwenden, können Sie auch "IDX.webDevTools": true festlegen.
    3. Aktualisieren Sie das Browserfenster und Ihren IDX-Arbeitsbereich.

  2. Öffnen Sie die Webvorschau in Projekt-IDX: Öffnen Sie die Befehlspalette (Cmd + Umschalt + P auf einem Mac oder Strg + Umschalttaste + P unter ChromeOS, Windows oder Linux) und wählen Sie Projekt-IDX: Webvorschau anzeigen aus.

  3. Der Entwicklertools-Bereich wird in der Webvorschau minimiert. Klicken Sie auf die Leiste mit den Entwicklertools, um den Bereich zu maximieren, und verwenden Sie die Entwicklertools in der Webvorschau.

Verwenden Sie den Bereich „Entwicklertools“ in der IDX-Webvorschau so, wie Sie das Debugging Ihrer Anwendung im Chrome-Browser ausführen würden.

Lighthouse für Webvorschauen ausführen

Lighthouse prüft Ihre Anwendung 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 Project IDX ausführen.

  1. Öffnen Sie die Webvorschau in Projekt-IDX: Öffnen Sie die Befehlspalette (Cmd + Umschalt + P auf einem Mac oder Strg + Umschalttaste + P unter ChromeOS, Windows oder Linux) und wählen Sie Projekt-IDX: Webvorschau anzeigen aus.

  2. Klicken Sie in der Symbolleiste der Webvorschau auf das Symbol für die Leistungsprüfung. Bild eines Symbols für einen Geschwindigkeitscheck

  3. Bild des Leuchtturms in Idx Wählen Sie im Lighthouse-Steuerfeld die gewünschten Prüfungskategorien aus. Sie haben die Wahl zwischen Berichten, in denen die Leistung, die Barrierefreiheit, die Einhaltung von Best Practices, SEO und die Leistung progressiver Web-Apps geprüft werden. Klicken Sie auf Seite analysieren, um die Berichte zu generieren.

    Es kann einige Minuten dauern, bis die Berichte erstellt sind.

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

Fehlerbehebungskonsole verwenden

Projekt IDX enthält die integrierte Debug Console von Code OSS. Sie können diese Konsole verwenden, um Fehler in Ihrer Anwendung mit vorkonfigurierten Debuggern für die gängigsten Programmiersprachen zu beheben. Sie können auch eine Debugging-Erweiterung aus dem VSCode Marketplace hinzufügen.

Wenn Sie eine benutzerdefinierte Fehlerbehebung schreiben möchten, fügen Sie Ihrem Arbeitsbereich eine launch.json-Datei hinzu.