Mobilutvikling med Flutter · leksjon

Feilsøkingsverktøy og -teknikker

Bli godt kjent med Flutter-feilsøkingsverktøy, inkludert DevTools, stoppunkter og logging, for effektivt å identifisere og løse problemer.

Leksjon 3 av 411 trinn

Feilsøkingsverktøy og -teknikker er en gratis leksjon i Mobilutvikling med Flutter på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Mobilutvikling med Flutter, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Mobilutvikling med Flutter inneholder totalt 4 leksjoner.

Hva er feilsøking?

Feilsøking er prosessen med å finne og rette feil, eller bugs, i koden. Det er en viktig ferdighet for alle utviklere.

En app som er grundig feilsøkt, er stabil, fungerer som forventet og gir en god brukeropplevelse.

Bli kjent med Flutter DevTools

Flutter DevTools er en kraftig samling verktøy for feilsøking og profilering av Flutter-applikasjoner. Den hjelper deg med å forstå appens brukergrensesnitt, ytelse og minnebruk.

Tenk på det som diagnosesenteret for Flutter-appen din!

Åpne DevTools

Du kan starte DevTools direkte fra IDE-en din, for eksempel VS Code eller Android Studio, når Flutter-appen kjører. Se etter en knapp som heter «Dart DevTools» eller «Open DevTools».

Alternativt kan du kjøre flutter pub global activate devtools og deretter flutter pub global run devtools fra 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!'),
        ),
      ),
    );
  }
}

Feilsøke brukergrensesnittet med Inspector

Widget Inspector i DevTools lar deg visualisere treet til appens brukergrensesnitt. Du kan velge hvilken som helst widget på skjermen og se egenskapene, layoutbegrensningene og detaljene for gjengivelsesboksen.

Dette hjelper deg med å forstå hvorfor widgets er plassert eller dimensjonert på en bestemt måte.

Ytelse og diagnostikk

I tillegg til Inspector tilbyr DevTools faner for analyse av Performance, Memory og Network. Disse hjelper deg med å identifisere flaskehalser, minnelekkasjer og problemer med nettverksforespørsler.

I fanen Debugger kan du administrere stoppunkter og gå trinnvis gjennom Dart-koden.

Stoppunkter: sette kjøringen på pause

Et stoppunkt er en spesiell markør du setter i koden. Når programmet kjører og når et stoppunkt, settes kjøringen på pause på akkurat den linjen.

Da kan du undersøke variabelverdier og kallstakken og forstå programtilstanden på et bestemt tidspunkt.

Sette et stoppunkt

I de fleste IDE-er kan du sette et stoppunkt ved å klikke i margen, området til venstre for linjenumrene, ved siden av kodelinjen der du vil sette kjøringen på pause.

Prøv å sette et i metoden _incrementCounter nedenfor, og trykk deretter 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'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Navigere i kodekjøringen

Når kjøringen er satt på pause ved et stoppunkt, har du flere alternativer:

Step Over: Kjør den gjeldende linjen og gå videre til neste.
Step Into: Hvis den gjeldende linjen er et funksjonskall, går du inn i funksjonen.
Step Out: Gå ut av den gjeldende funksjonen og returner til stedet den ble kalt fra.
Continue: Fortsett den normale kjøringen til neste stoppunkt eller til programmet avsluttes.

Enkel logging med `print`

For raske kontroller kan du bruke print() til å skrive meldinger til konsollen. Flutter tilbyr imidlertid debugPrint(), som er bedre egnet for produksjonsapper.

debugPrint() hindrer at utdata forkastes når det er store datamengder, særlig 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!'),
          ),
        ),
      ),
    );
  }
}

Kunnskapstest i feilsøking

Du har lært om viktige verktøy og teknikker for feilsøking i Flutter. La oss teste forståelsen din!

Besvar den i den interaktive leksjonen

Oppsummering av leksjonen

Godt jobbet! I denne leksjonen har du fått en grunnleggende forståelse av feilsøking i Flutter.

Vi utforsket Flutter DevTools, den komplette verktøysamlingen for feilsøking.
Du lærte hvordan du bruker stoppunkter til å sette kjøringen på pause og undersøke appens tilstand.
Vi gikk også gjennom enkel logging med print() og debugPrint().

Disse ferdighetene er avgjørende for å bygge robuste Flutter-applikasjoner uten feil!

Gratis å komme i gang

Lær deg Dart med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 22
Leksjoner: 88

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Feilsøkingsverktøy og -teknikker» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Mobilutvikling med Flutter, inkludert «Feilsøkingsverktøy og -teknikker», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Mobilutvikling med Flutter inneholder totalt 4 leksjoner.

Hva lærer jeg i «Feilsøkingsverktøy og -teknikker»?

Bli godt kjent med Flutter-feilsøkingsverktøy, inkludert DevTools, stoppunkter og logging, for effektivt å identifisere og løse problemer. Du øver på Mobilutvikling med Flutter med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Mobilutvikling med Flutter?

Ingen tidligere erfaring er nødvendig. Mobilutvikling med Flutter på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Feilsøkingsverktøy og -teknikker»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Mobilutvikling med Flutter-leksjonen?

Ja. Alle Mobilutvikling med Flutter-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Mobilutvikling med Flutter