RERIES REACT NATIVE CƠ BẢN

Series React Native Cơ Bản – Phần 3: Menu debug

Ở bài trước mình đã nói về cách cài đặt môi trường để code React Native bài này mình sẽ nói thêm 1 chút về một thứ rất hay ho: Menu debug
Vậy Menu Debug là gì?
– Nó là một Menu với danh sách các button bao gồm các chức năng:
+ Reload
+ Debug JS Remotely
+ Enable Live Reload/ Disable Enable Live Reload
+ Start Systrace
+ Enable Hot Reloading/Disable Hot Reloading
+ Toggle Inspector/
+ Show Perf Monitor/Hide Perf Monitor

Giờ chúng ta sẽ test thử nhé:
Đầu tiên tạo project:

react-native init AwesomeProject

Sau đó run project bằng lệnh:

react-native run-ios

or

react-native run-android

Khi project chạy xong để mở Menu chỉ cần dùng tổ hợp phím:
– Android: CMD + M
– iOS: CMD + D

Giờ chúng ta sẽ đi cụ thể vào từng chức năng:
Reload:
– Đơn giản là nó sẽ Reload lại project (Chạy app lại từ đầu).

Debug JS Remotely
– Bật Debug đồng thời nó sẽ open một trang local có dịa chỉ http://localhost:8081/debugger-ui/

– Cái này rất quan trọng và hay dùng nhất.
– Tại đây bạn có thể inpect ra và đọc log (Cái này mình sẽ nói sau)

Live Reload
– Việc bật Live Reload nó sẽ tự đông Reload lại project khi mà bạn thay đổi code và save lại. Bạn sẽ rảnh tay mà hơn so với việc cứ phải ấn CMD + R để Reload. Nhưng cẩn thận thế quen tay ấn save khi mà chưa code xong thì ăn ngay lỗi đỏ đó.

– Ở đây là mình dùng một thằng tên là Test (Đáng ra phải là Text) nhưng nó lại không tìm thấy thằng nào tên thế này cả.

Hot Reloading
– Hot Reloading hơi khác với Live Reload nó sẽ không Reload lại cả project mà nó sẽ render lại màn hình mà bạn đang bật. Nên thường sẽ không ai vừa bật cả Live Reload lẫn Hot Reload cả.

Toggle Inspector
– Nó sẽ bật debug UI trên chính device hoặc Simulator đang debug. Bạn có thể xem các thuộc tính trên đó. Cái này thường sẽ dùng với dev-tools(Mình sẽ hướng dẫn sau).

Perf Monitor
– Bật Perf Monitor sẽ có thể xem được các màn hình xem hiểu suất của ứng dụng.

Leave a Reply

Your email address will not be published. Required fields are marked *