Công cụ gỡ lỗi Flutter: Cách gỡ lỗi ứng dụng Flutter của bạn

Công cụ gỡ lỗi Flutter có thể giúp bạn tìm và sửa lỗi trong ứng dụng Flutter của mình. Tìm hiểu cách sử dụng Flutter DevTools, Dart DevTools và các công cụ gỡ lỗi khác trong hướng dẫn này.

Dart DevCông cụ

Dart DevTools là một bộ công cụ gỡ lỗi và lập hồ sơ cho các ứng dụng Dart và Flutter. Đây là cách thiết lập và sử dụng nó:

Thiết lập:

flutter run

Sau khi chạy lệnh trên, bạn sẽ nhận được URL để mở Dart DevTools trong trình duyệt của mình.

Điều hướng qua các tab khác nhau như Thanh tra, Dòng thời gian, Bộ nhớ, Hiệu suất và Mạng để chẩn đoán sự cố.

Thanh tra rung

Flutter Inspector cung cấp một công cụ trực quan mạnh mẽ để hiểu cây widget. Nó hỗ trợ hiểu các vấn đề về bố cục, thuộc tính widget và hiển thị.

Sử dụng Trình kiểm tra Flutter:

Khởi động ứng dụng của bạn ở chế độ gỡ lỗi.
Mở Dart DevTools.
Điều hướng đến tab “Thanh tra”.

Bạn có thể chọn bất kỳ tiện ích nào từ cây trực quan, khám phá các thuộc tính của nó và hiểu nó liên quan như thế nào với các tiện ích khác trong cây.

phác thảo rung

Flutter Outline là một công cụ được cung cấp trong nhiều IDE, bao gồm VSCode và IntelliJ/Android Studio. Nó trình bày cấu trúc dạng cây của các tiện ích của bạn, giúp điều hướng các giao diện người dùng phức tạp dễ dàng hơn.

Để truy cập Flutter Outline trong VSCode:

Mở bảng lệnh (Cmd + Shift + P hoặc Ctrl + Shift + P).
Nhập “Flutter Outline” và chọn nó.

Trong Android Studio/IntelliJ:

Điều hướng đến View > Tool Windows > Flutter Outline.

Ghi nhật ký bằng print() và debugPrint()

Để ghi nhật ký dữ liệu hoặc theo dõi luồng thực thi, bạn có thể sử dụng các hàm print() và debugPrint().

void main() {
  print("This is a print statement");
  debugPrint("This is a debugPrint statement");
}

debugPrint()đặc biệt hữu ích trong các trường hợp mà bảng điều khiển có thể bị quá tải bởi quá nhiều nhật ký vì nó điều chỉnh đầu ra.

Widget lỗi rung

ErrorWidgetlà một widget hiển thị lỗi. Bạn có thể tùy chỉnh hiển thị lỗi bằng cách ghi đè hành vi mặc định.

void main() {
  ErrorWidget.builder = (FlutterErrorDetails details) {
    return MyCustomErrorWidget(details: details);
  };
  runApp(MyApp());
}

Sử dụng điểm dừng

Điểm dừng cho phép bạn tạm dừng thực thi mã tại một dòng cụ thể. Điều này rất hữu ích trong việc theo dõi luồng thực thi, kiểm tra các giá trị biến và duyệt qua mã.

Trong VSCode: Nhấp vào lề trái bên cạnh số dòng nơi bạn muốn đặt điểm ngắt.
Trong Android Studio/IntelliJ: Nhấp vào vùng rãnh bên trái bên cạnh số dòng.

Sau khi đặt điểm dừng, hãy khởi động ứng dụng của bạn ở chế độ gỡ lỗi. Quá trình thực thi sẽ tạm dừng tại điểm ngắt, cho phép bạn kiểm tra trạng thái của ứng dụng.

Hồ sơ hiệu suất

Hiểu được hiệu suất của ứng dụng Flutter của bạn là rất quan trọng. Dart DevTools cung cấp tab hiệu suất để lập hồ sơ về hiệu suất của ứng dụng.

Khởi động ứng dụng của bạn ở chế độ gỡ lỗi.
Mở Dart DevTools và điều hướng đến tab “Hiệu suất”.
Nhấp vào “Ghi” để bắt đầu lập hồ sơ. Tương tác với ứng dụng của bạn, sau đó nhấp vào “Dừng” để kết thúc việc lập hồ sơ.
Phân tích kết quả để xác định các điểm nghẽn về hiệu suất.

#flutter #dart