Flutter Mobile Development · レッスン

デバッグツールとテクニック

DevTools、ブレークポイント、ロギングなどFlutterのデバッグツールを習得し、問題を効率的に特定して解決します。

「デバッグツールとテクニック」はCoddyKit上の無料Flutter Mobile Developmentレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これは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時間対応のAIチューター）、Flutter Mobile Developmentコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Flutter Mobile Developmentコースには全4レッスンが含まれています。

「デバッグツールとテクニック」で何を学びますか？

DevTools、ブレークポイント、ロギングなどFlutterのデバッグツールを習得し、問題を効率的に特定して解決します。ブラウザで直接実行するハンズオンコードでFlutter Mobile Developmentを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Flutter Mobile Developmentを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFlutter Mobile Developmentは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「デバッグツールとテクニック」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFlutter Mobile Developmentレッスンでコードを書いて実行できますか？

はい。すべてのFlutter Mobile Developmentレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Flutter Mobile Developmentに戻る