javascript - Xem cấu trúc thành phần trong React Native

Khi gỡ lỗi một trang web React, tôi có thể xem thứ bậc các thành phần bằng công cụ React Developer Tools:

Làm thế nào tôi có thể làm điều tương tự trong React Native? Menu rung giận dữ có chứa một 'inspector' nhưng dường như nó chỉ cho phép tôi kiểm tra một phần tử duy nhất bằng cách nhấn vào nó - tôi không thấy cách nào để duyệt toàn bộ cấu trúc thành phần.

Câu trả lời #1

Thật không may, kể từ phiên bản 0.12 của react-native, tab "React" trong Devtools không còn hoạt động nữa. Đây là một vấn đề đã được biết đến.

Có một cuộc thảo luận khá sôi nổi trên Github đã mở từ lâu, nhưng vẫn chưa có giải pháp nào.

CẬP NHẬT

Tab "React" trong Devtools vẫn không hoạt động trên Chrome, nhưng Nuclide mới nhất đã tích hợp sẵn! (Nó là một IDE được xây dựng trên Atom).

Với Atom đã cài đặt gói Nuclide, khởi động ứng dụng của bạn và tắt chế độ gỡ lỗi chrome hoặc safari.

Sau đó, nhấn Cmd+Shift+P trong Atom sẽ kích hoạt bảng lệnh và bạn có thể bật hoặc tắt công cụ phát triển bằng cách tìm kiếm React Native Inspector:

Câu trả lời #2

Điều này hoạt động với tôi khi sử dụng ứng dụng react-devtools độc lập với React Native 0.55.

1. Chạy npm install -g react-devtools
2. Chạy react-devtools
3. Mở ứng dụng React Native và chọn "Bắt đầu gỡ lỗi JS từ xa" từ menu phát triển