State Inspector atrod Redux, Zustand, Pinia un Vuex stores lapā, kurā atrodaties, parāda to stāvokli kā dzīvu koku un ļauj nosūtīt darbības, ielāpu stāvokli vai izsaukt store darbības, neatverot atkļūdotāju.
Priekšgala kļūdas ļoti bieži atrodas stāvoklī, nevis iezīmējumā: karodziņš, kas nekad netiek apgriezts, saraksts ar novecojušu vienumu, lietotāja objektam trūkst lauka, ko sagaida saskarne. Framework devtools var to parādīt, taču tikai tad, kad ir instalēts pareizais paplašinājums, būvējums to atklāj, un jūs atrodaties datorā, kurā varat atvērt atkļūdotāju. Uzstādīšanas vietā, kolēģa klēpjdatorā vai ražošanas lapā tas bieži nenotiek.
Šis rīks nolasa stores tieši no lapas. Redux tiek atrasts, izmantojot store react-redux rokas tā Provider, Pinia un Vuex, izmantojot Vue lietojumprogrammu, kurā tie ir instalēti ( Vue 3 un Vue 2), un Zustand izmantojot store kas ir redzams uz window, vai ar komponentiem, kas tiek lasīti no tā. Katram store ir norādīts, kur tas tika atrasts, un tā stāvoklis tiek parādīts kā saliekams koks, kas saglabā lasāmas Maps, Sets, Dates, funkcijas un apļveida atsauces, nevis serializē.
Live režīms atkārtoti nolasa atlasīto store ik pēc divām sekundēm, izceļ augstākā līmeņa taustiņus, kas ir mainījušies, un saglabā īsu izmaiņu žurnālu, lai jūs varētu noklikšķināt pa visu lapu un skatīties, kurai stāvokļa daļai tiek pieskarta katra mijiedarbība. Filtrs atrod jebkuru atslēgu vai ceļu lielā stāvokļu kokā, un Copy state JSON sniedz jums momentuzņēmumu kļūdas ziņojumam vai testa aprīkojumam.
Ja ar lasīšanu nepietiek, mainiet to vietā: nosūtiet Redux darbību, sapludiniet objektu Zustand stāvoklī vai izsauciet kādu no tā darbībām, $patch Pinia store vai palaidiet tā darbības ar argumentiem un veiciet mutācijas vai nosūtiet darbības Vuex, tostarp nosaukumtelpas moduļus. Koks un lapa tiek nekavējoties atjaunināti. Rīkam ir arī skaidrs, ko tas nevar sasniegt: store kas atrodas modulī un nekad nav nodots saskarnei, ir neredzams no ārpuses, un panelī ir paskaidrots, kā to atklāt izstrādes laikā.
Redux un Redux Toolkit, Zustand, Pinia un Vuex Vue 2 un Vue 3 ierīcēs tika atrasti automātiski — bez iestatīšanas un bez devtools āķa būvniecībā.
Ligzdots stāvoklis kā saliekams koks, kas apstrādā Maps, Sets, Dates, funkcijas, klases gadījumus un apļveida atsauces, atsevišķi attēlojot Pinia un Vuex getterus.
Live režīms izceļ augstākā līmeņa taustiņus, kas ir mainījušies, un reģistrē visas izmaiņas ar laikspiedolu, lai jūs varētu kartēt mijiedarbību ar stāvokļa atjauninājumiem.
Nosūtiet Redux darbības, izsauciet Zustand un Pinia darbības ar argumentiem, $patch Pinia stāvokli, apvienojiet Zustand stāvoklī un veiciet vai nosūtiet Vuex.
Filtrējiet lielu stāvokļu koku pēc atslēgas vai ceļa, pēc tam kopējiet visu stāvokli kā JSON, lai iegūtu kļūdu ziņojumu, testa ierīci vai salīdzinājumu.
Lietojumprogrammā nekas nav jāinstalē, un nav nepieciešama atkļūdošanas versija — tā darbojas iestudēšanas, ražošanas un citu lietotāju vietnēs neatkarīgi no tā, kur ir pieejami stores.
Pārbaudiet, vai kļūda ir datos vai skatā: ja store jau ir nepareiza vērtība, problēma nav komponents.
Noklikšķinot, novietojiet store grūti sasniedzamā stāvoklī — tukšs grozs, beidzies sesija, tūkstotis preču — un skatiet, kā saskarne darbojas.
Lasiet izvietotās versijas tiešsaistes stores, kur nav pievienoti Redux DevTools vai Vue Devtools.
Noklikšķiniet uz lietotnes un skatiet izmaiņu žurnālu, lai uzzinātu, kuras mijiedarbības tiek atjauninātas, kuras stāvokļa daļas.
Pievienojiet biļetei precīzu store JSON momentuzņēmumu, nevis aprakstiet saskarnes parādīto informāciju.
Noklikšķiniet uz State Inspector ikonas DevSuite Pro dokā React vai Vue lapā. Katrs atrastais store ir norādīts ar tā bibliotēku un atrašanās vietu.
Atlasiet store, lai redzētu tā stāvokli kā koku. Izvērsiet vajadzīgos zarus vai ierakstiet filtrā, lai pārietu tieši uz taustiņu vai ceļu.
Kad Live ir ieslēgta, mijiedarbojieties ar lapu un skatieties izmaiņu žurnālu: katrs ieraksts parāda mainīto laiku un augstākā līmeņa taustiņus.
Ievadiet darbību, ielāpu vai argumentus kā JSON un palaidiet to. Koks un lapa tiek nekavējoties atjaunināti, lai jūs varētu pārbaudīt malas gadījumus, nepieskaroties kodam.
Copy state JSON tver store tādu, kāds tas ir pašlaik, un ir gatavs ielīmēšanai biļetē, testā vai salīdzināšanas rīkā.
Instalējiet DevSuite Pro bez maksas un atbloķējiet 74+ izstrādātāju rīkus savam pārlūkam.
