## Giới thiệu Khi làm việc với cùng một codebase React cho cả Web và Native, việc tìm ra nguyên nhân gốc rễ của các lỗi có thể khá phức tạp. React DevTools là một công cụ mạnh mẽ giúp các nhà phát triển hiểu sâu hơn về cây component, trạng thái và luồng hoạt động của các tác vụ. Dưới đây là hướng dẫn thực tế giúp bạn khai thác tối đa React DevTools trên cả hai nền tảng. ## 1. Cài đặt và cấu hình React DevTools hoạt động sẵn trên trình duyệt web. Đối với React Native, bạn cần cài đặt thông qua CLI: ```bash npm install -g react-devtools # Sau đó, trong ứng dụng React Native, chạy: npx react-devtools ``` Cả hai công cụ này đều tự động kết nối với ứng dụng của bạn khi bạn khởi chạy trên trình giả lập hoặc thiết bị thực. ## 2. Khám phá cây component ### Trên Web - Mở DevTools qua F12 → Elements. - Sử dụng tính năng tìm kiếm để lọc component theo tên. ### Trên Native - Mở DevTools gốc (có thể là một cửa sổ riêng). - Chọn tab "Components" để xem cây component Native tương đương. **Lời khuyên:** Ghép nối hai chế độ xem này lại với nhau. Nếu component `Button` trên web được render bởi `View` trên Native, bạn có thể theo dõi mối liên hệ này để tìm ra sự khác biệt trong render tree. ## 3. Kiểm tra trạng thái và props Cả hai nền tảng đều hiển thị trạng thái hiện tại của component trong bảng "Props" và "State". Điều này rất hữu ích khi: - So sánh giá trị state được truyền vào component web so với component native. - Xác minh xem các props có được chuẩn hóa hay không (ví dụ: `onPress` so với `onClick`). **Mẹo:** Sử dụng tính năng "Chỉ hiển thị component đã thay đổi" (có sẵn trong DevTools mới nhất) để tập trung vào các component chỉ render lại khi có thay đổi. ## 4. Gỡ lỗi tác vụ và profiling ### Tác vụ - Trên web, DevTools có tab "Profiler”. Trên Native, bạn cũng có thể truy cập profiler thông qua DevTools. - Ghi lại một phiên tương tác (ví dụ: cuộn, nhấn) và tìm kiếm các tác vụ không cần thiết. ### Profiling - Sử dụng bộ đếm hiệu suất tích hợp sẵn để phát hiện các thành phần render lại nhiều lần. - Chụp ảnh màn hình hiệu suất trên cả hai nền tảng để so sánh trực quan. ## 5. Các mẹo nâng cao - **Chế độ kiểm tra:** Bật chế độ kiểm tra trên web để mô phỏng lại các thay đổi kích thước và hướng trên thiết bị di động. - **Hook Inspection:** Sử dụng tính năng kiểm tra Hook (có sẵn trong React 18) để xem state internal của `useEffect` và `useState` trên cả hai nền tảng. - **Tích hợp với Redux hoặc Zustand:** Nếu bạn sử dụng store state toàn cục, hãy kết hợp với DevTools của store đó để có cái nhìn toàn diện hơn về luồng dữ liệu. ## 6. Ví dụ thực tế Giả sử nút "Save" của bạn không phản hồi trên thiết bị di động nhưng hoạt động bình thường trên web. Hãy thực hiện các bước sau: 1. Mở DevTools trên cả hai tab. 2. Tìm component `SaveButton` trong cây component. 3. Kiểm tra xem `onPress` có được truyền chính xác hay không và liệu component có nhận được props mới nhất hay không. 4. Sử dụng profiler để xem liệu component có bị render lại không cần thiết sau khi state được cập nhật hay không. 5. Sử dụng chế độ kiểm tra để mô phỏng kết nối mạng chậm; điều này có thể tiết lộ vấn đề về độ trễ. ## Kết luận React DevTools là một công cụ đa năng giúp việc gỡ lỗi trên nhiều nền tảng trở nên dễ dàng hơn. Bằng cách kết hợp việc kiểm tra cây component, trạng thái và profiling trên cả React Web và React Native, bạn có thể nhanh chóng xác định vấn đề và cải thiện trải nghiệm người dùng trên tất cả các nền tảng. **Hãy thử áp dụng các bước trên trong dự án tiếp theo của bạn và bạn sẽ thấy sự khác biệt rõ rệt trong hiệu suất và chất lượng của ứng dụng.**