Flutter Mobile Development · บทเรียน

เครื่องมือและเทคนิคการแก้ไขข้อบกพร่อง

เชี่ยวชาญเครื่องมือแก้ไขข้อบกพร่องของ Flutter รวมถึง DevTools จุดหยุด และการบันทึกการทำงาน เพื่อระบุและแก้ไขปัญหาได้อย่างมีประสิทธิภาพ

เครื่องมือและเทคนิคการแก้ไขข้อบกพร่อง เป็นบทเรียน Flutter Mobile Development ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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!

คำถามที่พบบ่อย

บทเรียน “เครื่องมือและเทคนิคการแก้ไขข้อบกพร่อง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เครื่องมือและเทคนิคการแก้ไขข้อบกพร่อง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Flutter Mobile Development ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Flutter Mobile Development มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เครื่องมือและเทคนิคการแก้ไขข้อบกพร่อง”

เชี่ยวชาญเครื่องมือแก้ไขข้อบกพร่องของ Flutter รวมถึง DevTools จุดหยุด และการบันทึกการทำงาน เพื่อระบุและแก้ไขปัญหาได้อย่างมีประสิทธิภาพ คุณปฏิบัติ Flutter Mobile Development ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Flutter Mobile Development หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Flutter Mobile Development บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “เครื่องมือและเทคนิคการแก้ไขข้อบกพร่อง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Flutter Mobile Development นี้ได้ไหม

ได้ บทเรียน Flutter Mobile Development ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Flutter Mobile Development