Flutter Mobile Development · Lekcja

Narzędzia i techniki debugowania

Opanują Państwo narzędzia debugowania Fluttera, w tym DevTools, punkty przerwania i rejestrowanie, aby skutecznie identyfikować i rozwiązywać problemy.

Narzędzia i techniki debugowania to bezpłatna lekcja Flutter Mobile Development na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Flutter Mobile Development, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Flutter Mobile Development zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

What is Debugging?

Debugging is the process of finding and fixing errors, or bugs, in your code. It's an essential skill for any developer.

A well-debugged app is stable, performs as expected, and provides a great user experience.

Meet Flutter DevTools

Flutter DevTools is a powerful suite of tools for debugging and profiling Flutter applications. It helps you understand your app's UI, performance, and memory usage.

Think of it as your Flutter app's diagnostic center!

Opening DevTools

You can launch DevTools directly from your IDE (like VS Code or Android Studio) when your Flutter app is running. Look for a 'Dart DevTools' or 'Open DevTools' button.

Alternatively, run flutter pub global activate devtools and then flutter pub global run devtools from your 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 Debugging with Inspector

The Widget Inspector in DevTools allows you to visualize your app's UI tree. You can select any widget on the screen and see its properties, layout constraints, and render box details.

This helps you understand why widgets are positioned or sized in a certain way.

Performance & Diagnostics

Beyond the Inspector, DevTools offers tabs for Performance, Memory, and Network analysis. These help identify bottlenecks, memory leaks, and network request issues.

The Debugger tab is where you manage breakpoints and step through your Dart code.

Breakpoints: Pausing Execution

A breakpoint is a special marker you set in your code. When your program runs and reaches a breakpoint, it pauses execution at that exact line.

This allows you to inspect variable values, the call stack, and understand the program's state at a specific moment.

Setting a Breakpoint

In most IDEs, you can set a breakpoint by clicking in the gutter (the area to the left of the line numbers) next to the line of code you want to pause at.

Try setting one in the _incrementCounter method below and then tap the button.

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'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Navigating Code Execution

Once execution is paused at a breakpoint, you have several options:

Step Over: Execute the current line and move to the next.
Step Into: If the current line is a function call, jump into that function.
Step Out: Exit the current function and return to where it was called.
Continue: Resume normal execution until the next breakpoint or end of program.

Simple Logging with `print`

For quick checks, you can use print() to output messages to the console. However, Flutter provides debugPrint(), which is better for production apps.

debugPrint() prevents output from being dropped when there's too much data, especially on 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!'),
          ),
        ),
      ),
    );
  }
}

Debugging Knowledge Check

You've learned about essential Flutter debugging tools and techniques. Let's test your understanding!

Lesson Summary

Great job! In this lesson, you've gained a foundational understanding of Flutter debugging.

We explored Flutter DevTools, your all-in-one debugging suite.
You learned how to use breakpoints to pause execution and inspect app state.
We also covered simple logging with print() and debugPrint().

These skills are vital for building robust and error-free Flutter applications!

Często zadawane pytania

Czy lekcja „Narzędzia i techniki debugowania” jest bezpłatna?

Tak — pełny tekst „Narzędzia i techniki debugowania” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Flutter Mobile Development, przejdź na CoddyKit PRO. Kurs Flutter Mobile Development zawiera 4 lekcji w sumie.

Co nauczysz się w „Narzędzia i techniki debugowania”?

Opanują Państwo narzędzia debugowania Fluttera, w tym DevTools, punkty przerwania i rejestrowanie, aby skutecznie identyfikować i rozwiązywać problemy. Ćwiczysz Flutter Mobile Development z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Flutter Mobile Development?

Nie wymagamy żadnego doświadczenia. Flutter Mobile Development w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Narzędzia i techniki debugowania”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Flutter Mobile Development?

Tak. Każda lekcja Flutter Mobile Development zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Flutter Mobile Development