Flutter-Debugging und DevTools
Dieser Abschnitt führt in die Debugging-Tools von Flutter und gängige Debugging-Techniken ein.
Einführung in Flutter DevTools
Flutter DevTools ist eine Suite von Tools zum Debuggen und Analysieren von Flutter-Anwendungen.
DevTools starten
$ flutter run
Nach dem Ausführen der Anwendung zeigt das Terminal die DevTools-URL an, normalerweisehttp://127.0.0.1:9100
Häufige Befehle
| Befehl | Beschreibung |
|---|---|
| flutter doctor | Konfiguration der Entwicklungsumgebung prüfen |
| flutter analyze | Statische Codeanalyse |
| flutter test | Tests ausführen |
print debugPrint
Beispiel: Grundlegende Debug-Ausgabe
// Einfache Ausgabe
print('Hello Debug'); // Ausgabe an die Konsole
// debugPrint vermeidet das Abschneiden von langem Text
debugPrint('This is a long text that can be output in full without being truncated');
// Bedingte Ausgabe
if (debugMode) {
print('Debug info');
}
Objekt ausgeben (erfordert toString)
final user = {'name': 'Zhang San', 'age': 25};
print('Benutzerinfo: $user'); // Ausgabe: Benutzerinfo: {name: John Doe, age: 25}
print('Hello Debug'); // Ausgabe an die Konsole
// debugPrint vermeidet das Abschneiden von langem Text
debugPrint('This is a long text that can be output in full without being truncated');
// Bedingte Ausgabe
if (debugMode) {
print('Debug info');
}
Objekt ausgeben (erfordert toString)
final user = {'name': 'Zhang San', 'age': 25};
print('Benutzerinfo: $user'); // Ausgabe: Benutzerinfo: {name: John Doe, age: 25}
Assertion - assert
Assertions werden verwendet, um Bedingungen während der Entwicklung zu prüfen, und wirken nur im Debug-Modus.
< h class="example">Beispiel: Verwendung von Assertions
// Einfache Assertion
assert(user != null, 'Benutzer darf nicht leer sein');
// Validierung von Funktionsparametern
void setAge(int age) {
// Alter muss größer als 0 sein
assert(age > 0, 'Alter muss größer als 0 sein');
this.age = age;
}
// Assertions beim UI-Aufbau (nur in der Entwicklung)
Widget build(BuildContext context) {
// Sicherstellen, dass context nicht null ist
assert(context != null);
// Stellen Sie sicher, dass ein übergeordnetes Scaffold vorhanden ist
assert(debugCheckHasMaterial(context));
return Scaffold(...);
}
assert(user != null, 'Benutzer darf nicht leer sein');
// Validierung von Funktionsparametern
void setAge(int age) {
// Alter muss größer als 0 sein
assert(age > 0, 'Alter muss größer als 0 sein');
this.age = age;
}
// Assertions beim UI-Aufbau (nur in der Entwicklung)
Widget build(BuildContext context) {
// Sicherstellen, dass context nicht null ist
assert(context != null);
// Stellen Sie sicher, dass ein übergeordnetes Scaffold vorhanden ist
assert(debugCheckHasMaterial(context));
return Scaffold(...);
}
Debuggen mit Haltepunkten
Legen Sie Haltepunkte in VS Code oder Android Studio fest, um zu debuggen.
Debuggen in VS Code
- Klicken Sie auf die linke Seite der Zeilennummer, um einen Haltepunkt zu setzen
- Drücken Sie F5 oder klicken Sie auf die Debug-Schaltfläche, um das Debuggen zu starten
- Verwenden Sie die Debug-Symbolleiste, um die Programmausführung zu steuern
Gängige Haltepunkt-Befehle
| Aktion | Beschreibung |
|---|---|
| Fortfahren / F5 | Ausführung bis zum nächsten Haltepunkt fortsetzen |
| Step Over / F10 | Step over, ohne in Funktionen einzusteigen |
| Step Into / F11 | Step into, in Funktionen einsteigen |
| Step Out / Shift+F11 | Step Out aus der aktuellen Funktion |
Flutter Inspector
Flutter Inspector ist Teil von DevTools und wird verwendet, um den Widget-Baum zu visualisieren und zu inspizieren.
Hauptfunktionen
- Widget-Baum: Widget-Hierarchiestruktur anzeigen
- Layout-Explorer: Layout-Einschränkungen prüfen
- Performance-Overlay: Leistungsmetriken anzeigen
Häufige Probleme debuggen
Beispiel: Fehlersuche: UI wird nicht aktualisiert
// Problem: UI wird nicht aktualisiert
// Grund: setState wurde nach dem Ändern des Zustands nicht aufgerufen
// Falsches Beispiel
void _increment() {
_counter++; // Der Zustand hat sich geändert, aber die UI wird nicht aktualisiert!
}
// Korrektes Beispiel
void _increment() {
setState(() {
_counter++; // setState muss aufgerufen werden
});
}
// Problem: Zustandsverwaltung ist unordentlich
// Vorschlag: Verwende Provider oder eine andere Lösung für die Zustandsverwaltung
// Grund: setState wurde nach dem Ändern des Zustands nicht aufgerufen
// Falsches Beispiel
void _increment() {
_counter++; // Der Zustand hat sich geändert, aber die UI wird nicht aktualisiert!
}
// Korrektes Beispiel
void _increment() {
setState(() {
_counter++; // setState muss aufgerufen werden
});
}
// Problem: Zustandsverwaltung ist unordentlich
// Vorschlag: Verwende Provider oder eine andere Lösung für die Zustandsverwaltung
Weitere ErweiterungenGängige Werkzeuge zum Debuggen: print zum Ausgeben von Protokollen, Inspector zum Inspizieren des Widget-Baums und Timeline zur Analyse der Leistung.