Flutter Mobile Development · Урок

Инструменты и методы отладки

Освойте инструменты отладки Flutter, включая DevTools, точки останова и журналирование, чтобы эффективно выявлять и устранять проблемы.

«Инструменты и методы отладки» — бесплатный урок Flutter Mobile Development на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Flutter Mobile Development, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Flutter Mobile Development содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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!

Часто задаваемые вопросы

Урок «Инструменты и методы отладки» бесплатный?

Да — полный текст урока «Инструменты и методы отладки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Flutter Mobile Development, подпишись на CoddyKit PRO. Курс Flutter Mobile Development содержит 4 уроков всего.

Чему я научусь в уроке «Инструменты и методы отладки»?

Освойте инструменты отладки Flutter, включая DevTools, точки останова и журналирование, чтобы эффективно выявлять и устранять проблемы. Ты практикуешь Flutter Mobile Development с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Flutter Mobile Development?

Предыдущий опыт не требуется. Flutter Mobile Development на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Инструменты и методы отладки»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Flutter Mobile Development?

Да. Каждый урок Flutter Mobile Development включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Flutter Mobile Development