Dart DevTools là bộ công cụ kiểm tra lỗi và phân tích hiệu năng cho mã Dart và Flutter.Nhiều người biết đến tính năng hot reload Flutter nhưng bạn có biết nó cũng là 1 công cụ kiểm tra , sửa lỗi không.

I. Tổng quan về DevTools ?

Có thể bạn đã nghe qua về flutter tool - chạy ứng dụng dưới debug mode , tính năng hot reload , build APK và IPA ... Flutter tool được viết bằng Dart và chạy được trên command line vì vậy bạn có thể chạy ở bất cứ đâu bất cứ hệ điều hành , IDE nào .

The Dart analysis server sẽ phân tích code và gợi ý cho bạn

Nó còn sử dụng Language Server Protocol cho nên nó hỗ trợ hầu hết các IDE và hệ điều hành khác nhau.

II. Flutter Inspector

Flutter inspector là một công cụ mạnh mẽ để mô hình hóa các dòng code trong flutter thành các cấu trúc cây. Giúp chúng ta dễ nắm bắt được cấu trúc layout và debug được các vấn để về layout .

The Flutter Layout Explorer giúp bạn hiểu rõ hơn về bố cục Flutter. Hiện tại chỉ hỗ trợ flex layout.

III. Timeline view

Timeline view cung cấp thông tin về thời gian và hiệu suất hoạt động trong ứng dụng. Bao gồm ba phần :

• Flutter frames chart (Flutter apps only)
• Timeline events chart
• CPU profiler

1.Flutter frames chart

Chart chứa thông tin về Flutter frame ứng dụng. Mỗi cột trong chart đại diện cho một khung hình. Các chart được highlight để làm nổi bật các luồng xử lý khác nhau

chọn vào 1 cột bất kỳ sẽ cho thấy thời gian xử lý , render của các hàm chạy trong frame đó

2.The timeline events chart

Timeline events chart hiển thị tất cả các sự kiện của app. Từ các sự kiện như tạo view , gửi request, theo dõi các hoạt động khác như lưu lượng HTTP.

3.CPU profiler

CPU profiler hiển thị các sự kiện sử dụng resource của CPU để chạy , thời gian chạy của chúng . Khi nhìn vào đây , nếu bạn thấy sự kiện nào có thời gian sử dụng CPU lâu thì rất có thể xảy ra vấn đề về performance .

IV.Memory view

Memory view cho phép chúng ta theo dõi việc sử dụng bộ nhớ của các hàm , tiến trình trong khi chạy app . Gồm 4 phần chính :

• Memory anatomy
• Event timeline
• Snapshot classes
• Class instances

1.Memory anatomy

Sử dụng biểu đồ timeline để trực quan hóa việc sử dụng bộ nhớ heap như : usage, capacity, external, garbage collection, và resident set size.

2.Event timeline

Event timeline hiển thị các sự kiện DevTools như bấm nút reset , snapshot ...
Chúng ta có thể kéo chuột vào marker trong timeline để xem thời gian , từ đó có thể kiểm tra được memory leak

3.Snapshot classes

Snapshot classes hiển thị các lớp được phân bổ trong heap, tổng số instances, tổng số byte được phân bổ .

4.Class instances

Hiển thị danh sách các instances theo tên .

IV.Tổng kết

Trên đây mình đã giới thiệu một số chức năng debug chính mà flutter hỗ trợ . Bạn có thể thấy tuy flutter mới phát triển được một thời gian ngắn nhưng cộng đồng đã và đang lớn mạnh rất nhanh, kèm theo các tool hỗ trợ giúp giảm thời gian phát triển và sửa lỗi .

Chi tiết và các cập nhật mới nhất bạn có thể tham khảo trên trang chủ của flutter
https://flutter.dev/docs