State Inspector löytää Redux, Zustand, Pinia ja Vuex stores sivulta, jolla olet, näyttää niiden tilan elävänä puuna ja antaa sinun lähettää toimintoja, korjaustiedostoja tai kutsua store avaamatta debuggeria.
Käyttöliittymävirheet elävät usein tilassa eikä merkinnöissä: lippu, joka ei koskaan käänny, luettelo, jossa on vanhentunut kohde, käyttäjäobjektista puuttuu käyttöliittymän odottama kenttä. Kehyskehitystyökalut voivat näyttää sen, mutta vasta kun oikea laajennus on asennettu, koontiversio paljastaa sen ja olet koneessa, jolla voit avata virheenkorjausohjelman. Lavastuspaikalla, työtoverin kannettavalla tietokoneella tai tuotantosivulla näin ei usein ole.
Tämä työkalu lukee stores suoraan sivulta. Redux löytyy store react-redux käsien kautta Provider, Pinia ja Vuex Vue -sovelluksen kautta, johon ne on asennettu ( Vue 3 ja Vue 2), ja Zustand window paljastetun store tai siitä lukevien komponenttien kautta. Jokaisesta store on listattu, missä se löydettiin, ja sen tila näytetään kokoontaitettavana puuna, joka pitää Maps, Sets, Dates, funktiot ja pyöreät viittaukset luettavissa sen sijaan, että se epäonnistuisi sarjassa.
Live tila lukee valitun store uudelleen kahden sekunnin välein, korostaa muuttuneet ylätason näppäimet ja pitää lyhyttä muutoslokia, jotta voit napsauttaa sivua ja seurata, mitä tilaa kukin vuorovaikutus koskettaa. Suodatin löytää minkä tahansa avaimen tai polun suuresta tilapuusta, ja Copy state JSON antaa sinulle tilannevedoksen virheraportista tai testilaitteistosta.
Kun lukeminen ei riitä, vaihda se paikalleen: lähetä Redux -toiminto, yhdistä objekti Zustand tilaan tai kutsu jokin sen toiminnoista, $patch Pinia store tai suorita sen toiminnot argumenteilla ja suorita mutaatioita tai lähetä toimintoja Vuex, mukaan lukien nimiavaroidut moduulit. Puu ja sivu päivittyvät välittömästi. Työkalulla on myös selvää, mihin se ei pääse käsiksi: moduulin sisällä säilytetty store, jota ei koskaan luovuteta käyttöliittymälle, on näkymätön ulkopuolelta, ja paneeli selittää, kuinka se voidaan paljastaa kehityksen aikana.
Redux ja Redux Toolkit, Zustand, Pinia ja Vuex Vue 2 ssa ja Vue 3 ssa löydettiin automaattisesti – ei asennusta eikä devtools-koukkua rakennuksessa.
Sisäkkäinen tila tiivistettävänä puuna, joka käsittelee Maps, Sets, Dates, funktioita, luokkaesiintymiä ja pyöreitä viittauksia, jolloin Pinia ja Vuex -hakijat näytetään erikseen.
Live -tila korostaa muuttuneet ylimmän tason näppäimet ja kirjaa jokaisen muutoksen aikaleimalla, jotta voit yhdistää vuorovaikutuksen tilapäivityksiin.
Lähetä Redux -toiminnot, kutsu Zustand ja Pinia -toimintoja argumenteilla, $patch Pinia tila, yhdistä Zustand -tilaan ja sitoudu tai lähetä Vuex.
Suodata suuri tilapuu avaimen tai polun mukaan ja kopioi sitten koko tila JSON muodossa virheraporttia, testilaitetta tai vertailua varten.
Sovellukseen ei tarvitse asentaa mitään, eikä virheenkorjausta tarvita – se toimii lavastuksessa, tuotannossa ja muiden ihmisten sivustoilla kaikkialla, missä stores ovat tavoitettavissa.
Tarkista, onko vika tiedoissa vai näkymässä: jos store on jo väärä arvo, komponentti ei ole ongelma.
Aseta store tilaan, johon on vaikea päästä klikkaamalla – tyhjä ostoskori, vanhentunut istunto, tuhat tuotetta – ja katso, kuinka käyttöliittymä selviää.
Lue käyttöönotetun koontiversion live stores, joissa Redux DevTools tai Vue Devtools ei ole yhdistetty.
Napsauta sovellusta ja katso muutoslokia saadaksesi selville, mitkä vuorovaikutukset päivittävät minkä tilan osan.
Lisää store tarkka JSON tilannekuva liikkeestä sen sijaan, että kuvailet, mitä käyttöliittymä näytti.
Napsauta State Inspector -kuvaketta DevSuite Pro -telakalla React tai Vue sivulla. Jokainen sen löytämä store on lueteltu kirjaston ja sen löytämispaikan kanssa.
Valitse store nähdäksesi sen tilan puuna. Laajenna tarvitsemasi oksat tai kirjoita suodatin hypätäksesi suoraan avaimeen tai polkuun.
Kun Live on päällä, käytä sivua ja katso muutoslokia: jokainen merkintä näyttää kellonajan ja muuttuneet ylätason näppäimet.
Kirjoita toiminto, korjaustiedosto tai argumentit JSON muodossa ja suorita se. Puu ja sivu päivittyvät välittömästi, joten voit testata reunatapauksia koskematta koodiin.
Copy state JSON tallentaa store sellaisena kuin se on tällä hetkellä, valmiina liitettäväksi lippuun, testiin tai vertailutyökaluun.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 74 kehittäjätyökalua selaimellesi.
