State Inspector 현재 페이지에서 Redux, Zustand, Pinia 및 Vuex stores 찾아 해당 상태를 라이브 트리로 표시하며 디버거를 열지 않고도 작업을 디스패치하거나 상태를 패치하거나 store 작업을 호출할 수 있습니다.
프런트엔드 버그는 마크업이 아닌 상태에 있는 경우가 많습니다. 즉, 절대 뒤집히지 않는 플래그, 오래된 항목이 포함된 목록, 인터페이스에서 예상하는 필드가 누락된 사용자 개체 등이 있습니다. Framework devtools는 이를 표시할 수 있지만 올바른 확장이 설치된 경우에만 빌드가 이를 표시하고 디버거를 열 수 있는 머신에 있습니다. 준비 사이트, 동료의 노트북 또는 프로덕션 페이지에서는 그렇지 않은 경우가 많습니다.
이 도구는 페이지에서 바로 stores 읽습니다. Redux 설치된 Vue 애플리케이션( Vue 3 및 Vue 2)을 통해 Provider, Pinia 및 Vuex 에 대한 react-redux store 를 통해 발견되고, Zustand window 에 노출된 store 또는 여기에서 읽는 구성 요소를 통해 발견됩니다. 각 store 발견된 위치와 함께 나열되며 해당 상태는 직렬화에 실패하는 대신 Maps, Sets, Dates, 함수 및 순환 참조를 읽을 수 있도록 유지하는 축소 가능한 트리로 표시됩니다.
Live 모드는 2초마다 선택한 store 다시 읽고 변경된 최상위 키를 강조 표시하며 짧은 변경 로그를 유지하므로 페이지 주위를 클릭하고 각 상호 작용이 접촉하는 상태 부분을 확인할 수 있습니다. 필터는 대규모 상태 트리에서 키나 경로를 찾고 Copy state JSON 버그 보고서 또는 테스트 픽스처에 대한 스냅샷을 제공합니다.
읽는 것만으로는 충분하지 않으면 제자리에서 변경하세요. Redux 액션을 디스패치하고, 객체를 Zustand 상태로 병합하거나 해당 액션 중 하나를 호출하고, Pinia store $patch 하거나 인수를 사용하여 해당 액션을 실행하고, 네임스페이스 모듈을 포함하여 Vuex 에서 변형을 커밋하거나 액션을 디스패치합니다. 트리와 페이지가 즉시 업데이트됩니다. 이 도구는 도달할 수 없는 것에 대해서도 명확합니다. 모듈 내부에 보관되고 인터페이스에 전달되지 않은 store 는 외부에서 보이지 않으며 패널에서는 개발 중에 저장소를 노출하는 방법을 설명합니다.
Vue 2 및 Vue 3 의 Redux 및 Redux Toolkit, Zustand, Pinia 및 Vuex 자동으로 발견됩니다. 빌드에 설정이나 devtools 후크가 없습니다.
Maps, Sets, Dates, 함수, 클래스 인스턴스 및 순환 참조를 처리하는 축소 가능한 트리로 중첩된 상태이며 Pinia 및 Vuex 게터가 별도로 표시됩니다.
Live 모드는 변경된 최상위 키를 강조 표시하고 모든 변경 사항을 타임스탬프와 함께 기록하므로 상호 작용을 상태 업데이트에 매핑할 수 있습니다.
Redux 액션 디스패치, 인수를 사용하여 Zustand 및 Pinia 액션 호출, $patch Pinia 상태, Zustand 상태로 병합, Vuex 에서 커밋 또는 디스패치.
키나 경로로 큰 상태 트리를 필터링한 다음 버그 보고서, 테스트 픽스처 또는 비교를 위해 전체 상태를 JSON 으로 복사합니다.
앱에 설치할 것도 없고 디버그 빌드도 필요하지 않습니다. stores 에 접근할 수 있는 모든 곳에서 스테이징, 프로덕션 및 다른 사람의 사이트에서 작동합니다.
버그가 데이터에 있는지, 뷰에 있는지 확인하세요. store 이미 잘못된 값이 있으면 구성 요소에 문제가 있는 것이 아닙니다.
빈 장바구니, 만료된 세션, 수천 개의 항목 등을 클릭하여 접근하기 어려운 상태로 store 설정하고 인터페이스가 어떻게 대처하는지 확인하세요.
Redux DevTools 또는 Vue Devtools 연결되지 않은 배포된 빌드의 라이브 stores 읽어보세요.
앱을 클릭하고 변경 로그를 관찰하여 어떤 상호 작용이 상태의 어떤 부분을 업데이트하는지 알아보세요.
인터페이스에 표시된 내용을 설명하는 대신 store 의 정확한 JSON 스냅샷을 티켓에 추가하세요.
React 또는 Vue 페이지의 DevSuite Pro 도크에서 State Inspector 아이콘을 클릭합니다. 찾은 모든 store 해당 라이브러리 및 발견된 위치와 함께 나열됩니다.
store 선택하면 해당 매장의 상태를 트리로 볼 수 있습니다. 필요한 분기를 확장하거나 필터를 입력하여 키나 경로로 바로 이동하세요.
Live 켜진 상태에서 페이지와 상호 작용하고 변경 로그를 확인하세요. 각 항목에는 변경된 시간과 최상위 키가 표시됩니다.
작업, 패치 또는 인수를 JSON 으로 입력하고 실행합니다. 트리와 페이지가 즉시 업데이트되므로 코드를 건드리지 않고도 엣지 케이스를 테스트할 수 있습니다.
Copy state JSON 티켓, 테스트 또는 비교 도구에 붙여넣을 준비가 된 현재 상태 그대로 store 캡처합니다.
