Felsökningsverktyg och tekniker
Lär er behärska Flutters felsökningsverktyg, inklusive DevTools, brytpunkter och loggning, för att effektivt identifiera och lösa problem.
Felsökningsverktyg och tekniker är en gratis lektion i Mobilutveckling med Flutter på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Mobilutveckling med Flutter, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.
Vad är felsökning?
Felsökning är processen att hitta och åtgärda fel, eller buggar, i koden. Det är en viktig färdighet för alla utvecklare.
En välfelsökt app är stabil, fungerar som förväntat och ger en bra användarupplevelse.
Möt Flutter DevTools
Flutter DevTools är en kraftfull uppsättning verktyg för felsökning och profilering av Flutter-applikationer. Den hjälper dig att förstå appens användargränssnitt, prestanda och minnesanvändning.
Se det som Flutter-appens diagnostikcentral!
Öppna DevTools
Du kan starta DevTools direkt från din IDE, till exempel VS Code eller Android Studio, när Flutter-appen körs. Leta efter en knapp med texten 'Dart DevTools' eller 'Open DevTools'.
Alternativt kan du köra flutter pub global activate devtools och sedan flutter pub global run devtools från terminalen.
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!'),
),
),
);
}
}Felsöka användargränssnittet med Inspector
Widget Inspector i DevTools gör att du kan visualisera appens träd för användargränssnittet. Du kan välja vilken widget som helst på skärmen och se dess egenskaper, layoutbegränsningar och information om renderingsrutan.
Det hjälper dig att förstå varför widgets placeras eller storleksbestäms på ett visst sätt.
Prestanda och diagnostik
Utöver Inspector erbjuder DevTools flikar för analys av Performance, Memory och Network. De hjälper dig att identifiera flaskhalsar, minnesläckor och problem med nätverksanrop.
På fliken Debugger hanterar du brytpunkter och stegar igenom Dart-koden.
Brytpunkter: pausa körningen
En brytpunkt är en särskild markering som du placerar i koden. När programmet körs och når en brytpunkt pausas körningen på exakt den raden.
Det gör att du kan granska variabelvärden och anropsstacken samt förstå programmets tillstånd vid ett visst ögonblick.
Ange en brytpunkt
I de flesta IDE:er kan du ange en brytpunkt genom att klicka i marginalen, området till vänster om radnumren, bredvid den kodrad där du vill pausa.
Försök att ange en i metoden _incrementCounter nedan och tryck sedan på knappen.
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'),
),
],
),
),
),
);
}
}Navigera i kodkörningen
När körningen har pausats vid en brytpunkt har du flera alternativ:
- Stega över: Kör den aktuella raden och går vidare till nästa.
- Stega in: Om den aktuella raden är ett funktionsanrop går du in i funktionen.
- Stega ut: Avslutar den aktuella funktionen och återgår till platsen där den anropades.
- Fortsätt: Återupptar den normala körningen fram till nästa brytpunkt eller programmets slut.
Enkel loggning med `print`
För snabba kontroller kan du använda print() för att skriva meddelanden till konsolen. Flutter tillhandahåller dock debugPrint(), som är bättre för produktionsappar.
debugPrint() förhindrar att utdata försvinner när datamängden är för stor, särskilt på 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!'),
),
),
),
);
}
}Kunskapskontroll: felsökning
Du har lärt dig om viktiga verktyg och tekniker för felsökning i Flutter. Nu testar vi dina kunskaper!
Lektionssammanfattning
Bra jobbat! I den här lektionen har du fått en grundläggande förståelse för felsökning i Flutter.
- Vi utforskade Flutter DevTools, din kompletta verktygssvit för felsökning.
- Du lärde dig att använda brytpunkter för att pausa körningen och granska appens tillstånd.
- Vi gick även igenom enkel loggning med
print()ochdebugPrint().
De här färdigheterna är viktiga för att bygga robusta Flutter-applikationer utan fel!
Lär dig Dart med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 22
- Lektioner
- 88
Vanliga frågor
Är lektionen ”Felsökningsverktyg och tekniker” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Mobilutveckling med Flutter, inklusive ”Felsökningsverktyg och tekniker”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.
Vad lär jag mig i ”Felsökningsverktyg och tekniker”?
Lär er behärska Flutters felsökningsverktyg, inklusive DevTools, brytpunkter och loggning, för att effektivt identifiera och lösa problem. Ni övar på Mobilutveckling med Flutter med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Mobilutveckling med Flutter?
Du behöver inga förkunskaper. Utbildningen i Mobilutveckling med Flutter på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Felsökningsverktyg och tekniker”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Mobilutveckling med Flutter-lektionen?
Ja. Varje Mobilutveckling med Flutter-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Principer för widgettestning
- Integrationstestning
- Felsökningsverktyg och tekniker
- Enhetstestning och mocking