React-Map: Bản đồ DevTools trực quan để điều hướng các hệ thống phân cấp thành phần React
React-Map, được tạo ra bởi Achmad Akif (achmadakif), là một tiện ích mở rộng Chrome DevTools chuyển đổi cấu trúc nội bộ của một ứng dụng React thành một bản đồ trực quan để gỡ lỗi và xem xét kiến trúc. Ứng dụng này hiển thị cây Fiber dưới dạng một sơ đồ và cung cấp các công cụ nhắm mục tiêu để xác định và kiểm tra các phần của đồ thị thành phần. Nó nhằm vào các kỹ sư frontend làm việc trên các mã nguồn React lớn và thích khám phá không gian hơn là danh sách lồng nhau.
Truy cập và tích hợp phụ thuộc vào bảng điều khiển React Developer Tools
Công cụ được cài đặt như một bảng điều khiển riêng trong Chrome DevTools, vì vậy nó yêu cầu tiện ích mở rộng React Developer Tools chính thức phải được kích hoạt trước khi sử dụng. Khi hiển thị, bản đồ phản ánh bố cục thành phần của ứng dụng đang chạy và cập nhật khi trang được kiểm tra thay đổi, điều này đặt quy trình làm việc hoàn toàn bên trong DevTools thay vì trong một cửa sổ riêng biệt hoặc dịch vụ bên ngoài.
Tất cả dữ liệu và xử lý thành phần đều ở trong trình duyệt
React-Map thực hiện công việc của nó cục bộ bên trong ngữ cảnh DevTools và không yêu cầu tài khoản, vì vậy cây thành phần và props không rời khỏi máy. Dự án được xuất bản dưới dạng mã nguồn mở trên GitHub, cho phép các nhà phát triển kiểm tra mã nguồn và đóng góp, một điểm hỗ trợ các nhóm có mối quan tâm về telemetry của bên thứ ba hoặc công cụ mã nguồn đóng.
Tập trung vào quy trình gỡ lỗi cục bộ, không phải kiểm tra sản xuất
Tiện ích mở rộng nhắm đến các phiên phát triển localhost và được thiết kế xung quanh việc gỡ lỗi trong trình duyệt thay vì chạy trên các trang sản xuất tùy ý. Lựa chọn thiết kế đó giữ cho giao diện của nó tập trung vào quy trình làm việc của nhà phát triển và giới hạn phạm vi dự kiến của nó khi chẩn đoán các vấn đề chỉ tái hiện trong các môi trường đã triển khai.
Phù hợp với đối tượng chuyên biệt và chạy trên các trình duyệt dựa trên Chromium
Công cụ này dành cho các chuyên gia React cần cái nhìn tổng quan hơn về kiến trúc thành phần, và nó có sẵn cho Chrome và các trình duyệt dựa trên Chromium khác. Phản hồi của người dùng cho thấy sự tiếp nhận tích cực trong số các nhà phát triển làm việc với các cây thành phần lồng nhau sâu, khiến ứng dụng trở thành một bổ sung chuyên biệt cho hộp công cụ gỡ lỗi của kỹ sư hơn là một công cụ kiểm tra đa mục đích.
React-Map là một công cụ kiến trúc tập trung dành cho các nhà phát triển React
React-Map phù hợp với các kỹ sư muốn có một cách không gian để xem xét mối quan hệ giữa các thành phần trong quá trình phát triển cục bộ, đặc biệt là trên các dự án phức tạp. Quy trình chỉ diễn ra tại địa phương và mô hình mã nguồn mở của nó làm cho nó phù hợp với các nhóm ưu tiên tính minh bạch của mã. Sự đánh đổi là phạm vi hẹp của nó: nó là một công cụ trực quan trong thời gian phát triển thay vì một công cụ kiểm tra thời gian chạy toàn cầu cho các môi trường sản xuất.
