Công cụ gỡ lỗi Mini App
Mini App Debug Tools
Mini App Debug Tools là bộ công cụ mạnh mẽ giúp các nhà phát triển dễ dàng kiểm tra, theo dõi và khắc phục các vấn đề trong quá trình phát triển Mini App. Nó cung cấp các tính năng tương tự như DevTools trên trình duyệt web, nhưng được tối ưu hóa riêng cho môi trường Mini App. Tính năng này chỉ được hỗ trợ khi bạn mở Mini App bằng DevAssistant.
Bắt đầu nhanh
Bước 1: Kích hoạt Debug Tools
- Mở MiniA pp bằng DevAssistant (xem hướng dẫn DevAssistant)
- Tìm kiếm và chọn mục "Enable Debug Tool"
Bước 2: Mở Debug Tools
Nhấp vào biểu tượng bánh răng trên màn hình để mở cửa sổ Debug Tools. Bạn có thể nhấp lại để đóng/mở lại nó.
Tính năng chi tiết
1. Console
Theo dõi tất cả các log từ ứng dụng Mini App của bạn, bao gồm:
- Log từ ứng dụng (
console.log,console.error, v.v.) - Log từ Mini App Framework
- Cảnh báo và lỗi runtime
Giúp bạn nhanh chóng phát hiện và khắc phục các vấn đề trong code.
2. Network Inspector
Theo dõi chi tiết tất cả các request/response, bao gồm:
- HTTP/HTTPS requests thông qua Web fetch hoặc JS API request
- JS API calls (các JS API gọi từ Mini App)
- Thời gian phản hồi (Response time)
- Request headers, body, response data
Nhấp vào bất kỳ request nào để xem chi tiết. Nhấn vào icon mắt để xem thông tin đầy đủ của request/response.
3. Performance
Giám sát hiệu suất của Mini App theo thời gian thực:
- LCP (Largest Contentful Paint) - Thời gian hiển thị nội dung lớn nhất
- Cold Start - Thời gian khởi động lần đầu
- FPS (Frames Per Second) - Số khung hình trên giây
Những chỉ số này giúp bạn xác định các nút thắt về hiệu suất và tối ưu hóa ứng dụng của bạn.
4. Elements (DOM Inspector)
Kiểm tra và hiểu cấu trúc DOM của ứng dụng:
- Xem phân cấp các phần tử HTML
- Kiểm tra CSS áp dụng cho từng phần tử
- Debug các vấn đề về layout và styling
5. Monitor
Giám sát các chỉ số hiệu suất theo thời gian thực:
- FPS - Mức khung hình ứng dụng
- Memory - Sử dụng bộ nhớ
- System Resources - Tài nguyên hệ thống
6. Styling
Quản lý CSS Variables của ứng dụng:
- Xem danh sách tất cả CSS variables
- Thay đổi giá trị để test giao diện ngay lập tức
- Xem kết quả thay đổi trong thời gian thực
7. Resources
Quản lý và kiểm tra tài nguyên được sử dụng trong ứng dụng:
| Loại | Mô tả |
|---|---|
| Local Storage | Dữ liệu localStorage của web (không khuyến khích, hãy dùng JS API Storage |
| Device Storage | Dữ liệu lưu trên thiết bị bằng JS API setStorage |
| Assets | Các file JS, CSS, hình ảnh và tài nguyên khác |
8. Sources
Xem và debug mã nguồn trực tiếp:
- Xem toàn bộ mã nguồn JavaScript
- Đặt breakpoint và debug step-by-step
- Xem stack trace khi có lỗi
9. Info
Xem thông tin chi tiết về môi trường chạy:
- Location - Vị trí địa lý hiện tại
- User Agent - Thông tin trình duyệt/thiết bị
- Device Info - Thông tin thiết bị (model, OS, v.v.)
- System Info - Thông tin hệ thống
10. Settings
Tùy chỉnh Debug Tools theo sở thích của bạn:
- Theme - Chế độ sáng/tối
- Transparency - Độ trong suốt của cửa sổ Debug Tools
- Display Size - Kích thước hiển thị
Mẹo sử dụng
- Để lại Console mở khi phát triển để bắt các lỗi ngay lập tức
- Sử dụng Network tab để kiểm tra các API calls và optimize request
- Monitor Performance để xác định các nút thắt hiệu suất
- Sử dụng Styling để test theme và màu sắc mà không cần reload ứng dụng
Tài liệu liên quan
- DevAssistant Guide - Hướng dẫn sử dụng DevAssistant
- Storage API - Hướng dẫn lưu trữ dữ liệu
- LCP - Tài liệu hướng dẫn về LCP