Debuggingtools en -technieken
Beheers de debuggingtools van Flutter, waaronder DevTools, breakpoints en logging, om problemen efficiënt te identificeren en op te lossen.
Debuggingtools en -technieken is een gratis Mobiele ontwikkeling met Flutter-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Mobiele ontwikkeling met Flutter. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Mobiele ontwikkeling met Flutter bevat in totaal 4 lessen.
Wat is debuggen?
Debuggen is het proces waarbij je fouten, oftewel bugs, in je code opspoort en oplost. Het is een essentiële vaardigheid voor elke ontwikkelaar.
Een goed gedebugde app is stabiel, presteert zoals verwacht en biedt een goede gebruikerservaring.
Maak kennis met Flutter DevTools
Flutter DevTools is een krachtige verzameling hulpmiddelen voor het debuggen en profileren van Flutter-applicaties. Het helpt je de UI, prestaties en het geheugengebruik van je app te begrijpen.
Zie het als het diagnostisch centrum van je Flutter-app!
DevTools openen
Je kunt DevTools rechtstreeks vanuit je IDE starten, zoals VS Code of Android Studio, wanneer je Flutter-app actief is. Zoek naar een knop met de tekst 'Dart DevTools' of 'Open DevTools'.
Je kunt ook flutter pub global activate devtools en vervolgens flutter pub global run devtools uitvoeren vanuit je terminal.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('DevTools Demo')),
body: Center(
child: Text('Hello, Debugger!'),
),
),
);
}
}UI debuggen met Inspector
Met de Widget Inspector in DevTools kun je de UI-boom van je app visualiseren. Je kunt elke widget op het scherm selecteren en de eigenschappen, indelingsbeperkingen en details van het renderobject bekijken.
Zo begrijp je waarom widgets op een bepaalde manier zijn geplaatst of een bepaalde grootte hebben.
Prestaties en diagnostiek
Naast de Inspector biedt DevTools tabbladen voor analyse van Performance, Memory en Network. Hiermee kun je knelpunten, geheugenlekken en problemen met netwerkverzoeken opsporen.
In het tabblad Debugger beheer je onderbrekingspunten en doorloop je je Dart-code stap voor stap.
Onderbrekingspunten: uitvoering pauzeren
Een onderbrekingspunt is een speciale markering die je in je code instelt. Wanneer je programma wordt uitgevoerd en een onderbrekingspunt bereikt, wordt de uitvoering precies op die regel gepauzeerd.
Zo kun je variabelewaarden en de aanroepstack bekijken en de status van het programma op een bepaald moment begrijpen.
Een onderbrekingspunt instellen
In de meeste IDE's stel je een onderbrekingspunt in door in de marge, het gebied links van de regelnummers, naast de regel code te klikken waarop je wilt pauzeren.
Probeer er een in de methode _incrementCounter hieronder in te stellen en tik vervolgens op de knop.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++; // Set a breakpoint here!
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Breakpoints')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Counter: $_counter'),
ElevatedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
],
),
),
),
);
}
}Door de uitvoering van code navigeren
Wanneer de uitvoering op een onderbrekingspunt is gepauzeerd, heb je verschillende opties:
- Step Over: Voer de huidige regel uit en ga naar de volgende.
- Step Into: Als de huidige regel een functieaanroep is, ga je naar die functie.
- Step Out: Verlaat de huidige functie en ga terug naar de plek waar deze is aangeroepen.
- Continue: Hervat de normale uitvoering tot het volgende onderbrekingspunt of het einde van het programma.
Eenvoudige logging met `print`
Voor snelle controles kun je print() gebruiken om berichten naar de console te schrijven. Flutter biedt echter debugPrint(), dat geschikter is voor productie-apps.
debugPrint() voorkomt dat uitvoer verloren gaat wanneer er te veel gegevens zijn, vooral op Android.
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart'; // For debugPrint
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
void _logMessage() {
print('This is a regular print message.');
debugPrint('This is a debugPrint message, better for Flutter!');
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Logging Demo')),
body: Center(
child: ElevatedButton(
onPressed: _logMessage,
child: Text('Log it!'),
),
),
),
);
}
}Kenniscontrole over debuggen
Je hebt geleerd over essentiële Flutter-hulpmiddelen en -technieken voor het debuggen. Laten we controleren of je de stof begrijpt!
Samenvatting van de les
Goed gedaan! In deze les heb je een basisbegrip van debuggen in Flutter opgebouwd.
- We hebben Flutter DevTools verkend, je complete suite voor debuggen.
- Je hebt geleerd hoe je onderbrekingspunten gebruikt om de uitvoering te pauzeren en de status van de app te bekijken.
- We hebben ook eenvoudige logging met
print()endebugPrint()behandeld.
Deze vaardigheden zijn essentieel voor het bouwen van robuuste Flutter-applicaties zonder fouten!
Leer Dart met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 22
- Lessen
- 88
Veelgestelde vragen
Is de les “Debuggingtools en -technieken” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Mobiele ontwikkeling met Flutter, waaronder “Debuggingtools en -technieken”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Mobiele ontwikkeling met Flutter bevat in totaal 4 lessen.
Wat leer ik in “Debuggingtools en -technieken”?
Beheers de debuggingtools van Flutter, waaronder DevTools, breakpoints en logging, om problemen efficiënt te identificeren en op te lossen. Je oefent met Mobiele ontwikkeling met Flutter door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Mobiele ontwikkeling met Flutter te beginnen?
Ervaring vooraf is niet nodig. Mobiele ontwikkeling met Flutter op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Debuggingtools en -technieken”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Mobiele ontwikkeling met Flutter?
Ja. Elke les over Mobiele ontwikkeling met Flutter bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Principes van widgettesting
- Integratietests
- Debuggingtools en -technieken
- Unit testing en mocking