React Native Tutorials - Bài 2: Chỉnh sửa, debug trong project React Native

Từ đây về sau các hướng dẫn sẽ được trình bày và thực hành trên thiết bị thật, với máy ảo cũng gần tương tự, cũng cần tìm hiểu thêm vì có thế có một số khác nhau với thiết bị thật.

Để code và chỉnh sử các chỉnh sửa các file trong project để xây dựng ứng dụng của mình, dùng editor quen thuộc và bạn thích, bên cạnh đó có thể dùng Visual Code, Atom, Subline Text,... ở đây dùng Visual Code.

Mở Dev Menu

Tùy từng loại máy có các cách mở dev menu khác nhau, chỉ mở được khi ứng dụng đang chạy:

Cách 1 (phổ biến, bất kỳ loại máy nào cũng mở được): Lắc thiết bị vật lý, cầm điện thoại lên có thể lắc sang phải hoặc sang trái.

Cách 2 (Lựa chọn trên một số dòng máy nhất định, như asus, samsung, ...): Nhấn giữ nút menu trên máy

Cách 3 (Lựa chọn trên một số máy nhất định, như xiao mi,...): Nhấn giữ nút back trên máy

Reload: Sau khi có một vài thay đổi trong source code, chọn mục này sẽ load lại với những thay đổi mới nhất trong project

Debug JS Remotely: Chọn mục này sẽ mở phần debug code thông qua trình duyệt web

Enable Live Reload: ....

Enable Hot Reloading: Sau khi chọn mục này, nhưng thay đổi trong source code sau khi được lưu lại, ngay lập tức sẽ được thay đổi luôn trong ứng dụng trên điện thoại.

Toggle Inspector: …

Show Perf Monitor: …

Start/Stop Sampling Profiler: ...

Dev Settings: Mở lựa chọn các cài đặt cho việc dev

Sau lần build đầu tiên cần dùng cáp để kết nối với máy tính, sau đó không cần phải dùng cách này (có thể dùng nếu muốn) để phát triển hoặc debug ứng dụng. RN cung cấp một cơ chế giống như client-server, khi đó ứng dụng RN trên điện thoại là client còn server chính là máy tính mà đang code ứng dụng đó.

Nếu để ý có thể thấy sau khi chạy lệnh “react-native run-android” thì có một cửa sổ cmd được bật lên đó chính là server của ứng dụng. Cửa sổ cmd chạy lệnh “react-native run-android”, sau khi hoàn thành việc build có thể tắt đi, không cần dùng đến nữa, sau này chỉ cần bật server của ứng lên là được, bằng cách dùng cmd cd vào thư mục project chạy lệnh “react-native start”.

Điều kiện là điện thoại và máy tính phải chung một mạng wifi, và phải biết được địa chỉ ip của máy tính. Cài đặt:

Bước 1:  Lấy địa chỉ ip của máy tính: dùng cmd chạy lệnh “ipconfig”

Bước 2: Mở Dev Menu của ứng dụng, vào mục Dev Settings, sau đó tìm và chọn Debug server host & port for device, nhập địa chỉ ip của máy tính và cổng là 8081 nhấn OK, vậy là thiết lập xong. Cổng 8081 là cổng mặc định của RN.

Bây giờ hãy mở file index.android.js bằng editor yêu thích, thử thay đổi một vài dòng text bên trong cặp thẻ <Text></Text>, lưu lại và sử dụng vài tính năng trong Dev menu, xem hiệu quả nhé.

Debug

Ví dụ ở đây cần debug code trong file index.android.js

Mở dev menu, chọn Debug JS Remotely thì trình duyệt sẽ bật lên với địa chỉ là http://localhost:8081/debugger-ui

Nhấn F12 → chọn mục Sources → mở debuggerWorker.js → trong localhost:8081 → chọn đến file index.android.js.

Chọn dòng để debug bằng việc click vào đầu dòng code đó. Khi reload (hoặc Enable Hot Reloading) khi chạy đến dòng lệnh đó sẽ dừng ở đó để ta có thể xem biến, giá trị biến ở đó.

Nhấn F10 để nhảy qua từng câu lệnh, F8 để nhảy sang điểm debug tiếp theo, hoặc có thể sử dụng menu debug bên trái.