0Pricing
Flutter Mobile Development · Aula

Ferramentas e técnicas de depuração

Domine as ferramentas de depuração do Flutter, incluindo DevTools, pontos de interrupção e registro, para identificar e resolver problemas com eficiência.

Ferramentas e técnicas de depuração é uma aula grátis de Flutter Mobile Development no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Flutter Mobile Development, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Flutter Mobile Development inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

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!

Perguntas Frequentes

A aula “Ferramentas e técnicas de depuração” é grátis?

Sim — o texto completo de “Ferramentas e técnicas de depuração” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Flutter Mobile Development, atualize para CoddyKit PRO. O curso de Flutter Mobile Development inclui 4 aulas no total.

O que vou aprender em “Ferramentas e técnicas de depuração”?

Domine as ferramentas de depuração do Flutter, incluindo DevTools, pontos de interrupção e registro, para identificar e resolver problemas com eficiência. Você pratica Flutter Mobile Development com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Flutter Mobile Development?

Nenhuma experiência prévia é necessária. Flutter Mobile Development no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Ferramentas e técnicas de depuração”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Flutter Mobile Development?

Sim. Cada aula de Flutter Mobile Development inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Princípios de testes de widgets
  2. Testes de integração
  3. Ferramentas e técnicas de depuração
  4. Testes Unitários e Simulação
← Voltar para Flutter Mobile Development