Nahanap State Inspector ang stores ng Redux, Zustand, Pinia at Vuex sa page kung nasaan ka, ipinapakita ang kanilang estado bilang isang live na puno, at hinahayaan kang magpadala ng mga aksyon, maglagay ng patch state o tumawag sa mga aksyon store nang hindi nagbubukas ng debugger.
Ang mga front-end na bug ay madalas na nabubuhay sa estado sa halip na sa markup: isang flag na hindi kailanman pumipihit, isang listahan na may hawak na isang lipas na item, isang object ng user na nawawala ang field na inaasahan ng interface. Maaaring ipakita ito ng mga devtool ng Framework, ngunit kapag na-install lang ang tamang extension, ilalantad ito ng build at ikaw ay nasa isang makina kung saan maaari kang magbukas ng debugger. Sa isang site ng pagtatanghal ng dula, laptop ng isang kasamahan o isang pahina ng produksyon, madalas na hindi iyon ang kaso.
Binabasa ng tool na ito ang stores nang direkta mula sa pahina. Redux ay matatagpuan sa pamamagitan ng store react-redux hands sa Provider nito, Pinia at Vuex sa pamamagitan ng Vue application kung saan sila naka-install ( Vue 3 at Vue 2), at Zustand sa pamamagitan ng isang store na naka-expose sa window o sa pamamagitan ng mga component na nagbabasa mula dito. Ang bawat store ay nakalista kung saan ito natagpuan, at ang estado nito ay ipinapakita bilang isang collapsible tree na nagpapanatili Maps, Sets, Dates, functions at circular reference na nababasa sa halip na mabigong i-serialize.
Muling binabasa ng Live mode ang napiling store bawat dalawang segundo, hina-highlight ang mga top-level na key na nagbago at nagpapanatili ng maikling log ng pagbabago, para makapag-click ka sa paligid ng page at mapanood kung aling bahagi ng estado ang bawat pakikipag-ugnayan. Ang isang filter ay nakakahanap ng anumang key o path sa isang malaking state tree, at Copy state JSON ay nagbibigay sa iyo ng snapshot para sa isang ulat ng bug o isang test fixture.
Kapag hindi sapat ang pagbabasa, palitan ito sa lugar: magpadala ng Redux action, pagsamahin ang isang object sa Zustand state o tawagan ang isa sa mga aksyon nito, $patch ang Pinia store o patakbuhin ang mga aksyon nito na may mga argumento, at gumawa ng mga mutasyon o dispatch na aksyon sa Vuex, kasama ang namespaced na mga module. Ang puno at ang pahina ay nag-update kaagad. Ang tool ay malinaw din tungkol sa kung ano ang hindi nito maabot: ang isang store na pinananatili sa loob ng isang module at hindi kailanman ipinasa sa interface ay hindi nakikita mula sa labas, at ipinapaliwanag ng panel kung paano ilantad ang isa sa panahon ng pag-unlad.
Redux at Redux Toolkit, Zustand, Pinia at Vuex sa Vue 2 at Vue 3, awtomatikong natagpuan — walang setup at walang devtools hook sa build.
Nested state bilang isang collapsible tree na humahawak sa Maps, Sets, Dates, function, class instance at circular reference, na may Pinia at Vuex getter na ipinapakita nang hiwalay.
Hina-highlight ng Live mode ang mga top-level na key na nagbago at nilala-log ang bawat pagbabago gamit ang timestamp, para ma-map mo ang mga pakikipag-ugnayan sa mga update ng estado.
Ipadala ang mga pagkilos Redux, tawagan ang mga pagkilos Zustand at Pinia na may mga argumento, $patch ang estado Pinia, pagsamahin sa estado Zustand, at i-commit o ipadala sa Vuex.
I-filter ang isang malaking puno ng estado sa pamamagitan ng key o path, pagkatapos ay kopyahin ang buong estado bilang JSON para sa isang ulat ng bug, isang pansubok na fixture o isang paghahambing.
Walang mai-install sa app at hindi kailangan ng debug build — gumagana ito sa pagtatanghal ng dula, sa produksyon at sa mga site ng ibang tao, saanman maabot ang stores.
Suriin kung ang bug ay nasa data o nasa view: kung hawak na ng store ang maling halaga, hindi ang bahagi ang problema.
Ilagay ang store sa isang estado na mahirap abutin sa pamamagitan ng pag-click — isang walang laman na cart, isang nag-expire na session, isang libong item — at tingnan kung paano nakayanan ang interface.
Basahin ang mga live stores ng isang naka-deploy na build kung saan hindi konektado Redux DevTools o Vue Devtools.
Mag-click sa app at panoorin ang log ng pagbabago upang malaman kung aling mga pakikipag-ugnayan ang nag-a-update kung aling bahagi ng estado.
Magdagdag ng eksaktong JSON snapshot ng store sa ticket sa halip na ilarawan kung ano ang ipinakita ng interface.
I-click ang icon State Inspector sa DevSuite Pro dock sa isang React o Vue page. Ang bawat store na mahahanap nito ay nakalista kasama ang library nito at kung saan ito natagpuan.
Pumili ng store upang makita ang estado nito bilang isang puno. Palawakin ang mga sangay na kailangan mo, o i-type ang filter upang dumiretso sa isang susi o landas.
Kapag naka-on ang Live, makipag-ugnayan sa page at panoorin ang log ng pagbabago: ipinapakita ng bawat entry ang oras at ang mga top-level na key na nagbago.
Maglagay ng aksyon, patch o argumento bilang JSON at patakbuhin ito. Ang puno at ang page ay nag-a-update kaagad, para masubukan mo ang mga edge case nang hindi hinahawakan ang code.
Copy state JSON ang store sa kasalukuyan, handang i-paste sa isang ticket, isang pagsubok o isang tool sa paghahambing.
I-install ang DevSuite Pro nang libre at i-unlock ang 74+ developer tools para sa iyong browser.
