State Inspector tìm thấy stores Redux, Zustand, Pinia và Vuex trên trang bạn đang truy cập, hiển thị trạng thái của chúng dưới dạng cây trực tiếp và cho phép bạn gửi hành động, vá trạng thái hoặc gọi hành động store mà không cần mở trình gỡ lỗi.
Các lỗi giao diện người dùng thường tồn tại ở trạng thái hơn là ở đánh dấu: cờ không bao giờ lật, danh sách chứa một mục cũ, đối tượng người dùng thiếu trường mà giao diện mong đợi. Công cụ phát triển khung có thể hiển thị nó, nhưng chỉ khi cài đặt tiện ích mở rộng phù hợp, bản dựng mới hiển thị nó và bạn đang ở trên một máy nơi bạn có thể mở trình gỡ lỗi. Trên trang dàn dựng, máy tính xách tay của đồng nghiệp hoặc trang sản xuất, điều đó thường không xảy ra.
Công cụ này đọc các stores ngay từ trang. Redux được tìm thấy thông qua store react-redux với Provider của nó, Pinia và Vuex thông qua ứng dụng Vue mà chúng được cài đặt trong ( Vue 3 và Vue 2) và Zustand thông qua một store hiển thị trên window hoặc thông qua các thành phần đọc từ nó. Mỗi store được liệt kê với nơi nó được tìm thấy và trạng thái của nó được hiển thị dưới dạng cây có thể thu gọn giúp Maps, Sets, Dates, hàm và tham chiếu vòng tròn có thể đọc được thay vì không thể tuần tự hóa.
Chế độ Live tiếp đọc lại store đã chọn cứ sau hai giây, đánh dấu các phím cấp cao nhất đã thay đổi và giữ nhật ký thay đổi ngắn, để bạn có thể nhấp quanh trang và xem phần nào của trạng thái mà mỗi lần tương tác chạm vào. Bộ lọc tìm thấy bất kỳ khóa hoặc đường dẫn nào trong cây trạng thái lớn và Copy state JSON cung cấp cho bạn ảnh chụp nhanh về báo cáo lỗi hoặc bản cố định kiểm tra.
Khi việc đọc vẫn chưa đủ, hãy thay đổi nó tại chỗ: gửi một hành động Redux, hợp nhất một đối tượng vào trạng thái Zustand hoặc gọi một trong các hành động của nó, $patch store Pinia hoặc chạy các hành động của nó bằng các đối số và thực hiện các đột biến hoặc gửi hành động trong Vuex, bao gồm cả các mô-đun được đặt tên. Cây và trang cập nhật ngay lập tức. Công cụ này cũng nêu rõ những gì nó không thể tiếp cận: một store được giữ bên trong một mô-đun và không bao giờ được chuyển giao cho giao diện sẽ không thể nhìn thấy từ bên ngoài và bảng điều khiển sẽ giải thích cách hiển thị một cửa hàng trong quá trình phát triển.
Redux và Redux Toolkit, Zustand, Pinia và Vuex trên Vue 2 và Vue 3, được tìm thấy tự động - không cần thiết lập và không có devtools hook trong bản dựng.
Trạng thái lồng nhau dưới dạng cây có thể thu gọn xử lý Maps, Sets, Dates, hàm, phiên bản lớp và tham chiếu vòng tròn, với các getter Pinia và Vuex được hiển thị riêng.
Chế độ Live làm nổi bật các khóa cấp cao nhất đã thay đổi và ghi lại mọi thay đổi bằng dấu thời gian, do đó bạn có thể ánh xạ các tương tác với các cập nhật trạng thái.
Gửi các hành động Redux, gọi các hành động Zustand và Pinia bằng các đối số, trạng thái $patch Pinia, hợp nhất vào trạng thái Zustand và cam kết hoặc gửi đi trong Vuex.
Lọc một cây trạng thái lớn theo khóa hoặc đường dẫn, sau đó sao chép toàn bộ trạng thái dưới dạng JSON để tạo báo cáo lỗi, bản thử nghiệm hoặc bản so sánh.
Không cần cài đặt trong ứng dụng và không cần bản dựng gỡ lỗi — nó hoạt động trên dàn dựng, trên sản xuất và trên trang web của người khác, bất cứ nơi nào có thể truy cập stores.
Kiểm tra xem lỗi nằm trong dữ liệu hay trong chế độ xem: nếu store đã giữ giá trị sai thì thành phần đó không phải là vấn đề.
Đặt store vào trạng thái khó tiếp cận bằng cách nhấp chuột - giỏ hàng trống, phiên đã hết hạn, hàng nghìn mặt hàng - và xem giao diện xử lý như thế nào.
Đọc stores trực tiếp của một bản dựng đã triển khai nơi Redux DevTools hoặc Vue Devtools không được kết nối.
Nhấp qua ứng dụng và xem nhật ký thay đổi để tìm hiểu tương tác nào cập nhật phần nào của trạng thái.
Thêm ảnh chụp nhanh JSON chính xác của store vào phiếu thay vì mô tả nội dung giao diện hiển thị.
Nhấp vào biểu tượng State Inspector trong thanh công cụ DevSuite Pro trên trang React hoặc Vue. Mỗi store nó tìm thấy đều được liệt kê cùng với thư viện của nó và nơi nó được tìm thấy.
Chọn một store để xem trạng thái của nó dưới dạng cây. Mở rộng các nhánh bạn cần hoặc nhập bộ lọc để chuyển thẳng đến một phím hoặc đường dẫn.
Khi bật Live, hãy tương tác với trang và xem nhật ký thay đổi: mỗi mục nhập hiển thị thời gian và các phím cấp cao nhất đã thay đổi.
Nhập một hành động, một bản vá hoặc đối số dưới dạng JSON và chạy nó. Cây và trang cập nhật ngay lập tức, vì vậy bạn có thể kiểm tra các trường hợp đặc biệt mà không cần chạm vào mã.
Copy state JSON ghi lại store như hiện tại, sẵn sàng dán vào phiếu, công cụ kiểm tra hoặc so sánh.
Cài đặt DevSuite Pro miễn phí và mở khóa hơn 74 công cụ dành cho nhà phát triển cho trình duyệt của bạn.
