Kā izmantot Redux DevTools React lietojumprogrammu atkļūdošanai

Izmēģiniet Mūsu Instrumentu Problēmu Novēršanai

Reaģēt lietojumprogrammas kļūst arvien sarežģītākas, atkļūdošanas problēmas ar lietojumprogrammas stāvokli var kļūt arvien grūtākas. Redux DevTools ir nenovērtējams rīks, kas ļauj React izstrādātājiem vizualizēt un atkļūdot Redux veikala stāvokļa izmaiņas savās lietojumprogrammās.

Šajā visaptverošajā rokasgrāmatā jūs uzzināsit:

  • Kas ir Redux DevTools un kā tas darbojas
  • Kā instalēt un konfigurēt Redux DevTools
  • Izmantojot DevTools funkcijas, piemēram, stāvokļa uzraudzību, darbību atskaņošanu un laika ceļojumu atkļūdošanu
  • DevTools pielāgošana un uzlabošana jūsu atkļūdošanas darbplūsmai
  • Paraugprakse Redux DevTools izmantošanai kļūdu labošanai un veiktspējas optimizēšanai

Sekojiet līdzi šajā rokasgrāmatā sniegtajiem piemēriem, lai kļūtu par profesionālu Redux DevTools jaudas izmantošanā pat vissarežģītāko React un Redux lietotņu atkļūdošanai.

Kas ir Redux DevTools

Redux DevTools ir atkļūdošanas platforma lietotnēm, kas izmanto Redux stāvokļa pārvaldību. Tas ļauj jums:

  • Pārbaudiet Redux veikala stāvokļa vērtības
  • Novērojiet stāvokļa izmaiņas laika gaitā, izmantojot darbību reģistrēšanu
  • Atkļūdot problēmas, 'ceļojot laikā' atpakaļ uz pagātnes stāvokļiem
  • Atskaņojiet ierakstītās reduktora darbības

DevTools nodrošina centralizētu vietu, kur pārraudzīt, kā jūsu React lietotnes stāvoklis mainās, reaģējot uz darbībām. Šis ieskats ļauj vieglāk izprast sarežģītu rīcību, uztvert kļūdas un optimizēt veiktspēju.

Kā darbojas Redux DevTools

Zem pārsega Redux DevTools palīdz jūsu Redux veikalam sekot līdzi katrai darbībai. Tas reģistrē, kā stāvoklis laika gaitā mainās, lai jūs varētu attīt vēsturi un “ceļot laikā” uz iepriekšējiem lietotņu stāvokļiem.

Pēc tam DevTools lietotāja saskarne ļauj vizualizēt šo vēsturi, pārbaudīt stāvokļus un atkļūdot problēmas, izmantojot ierakstītos datus. Tas savienojas ar jūsu veikalu, izmantojot pārlūkprogrammas paplašinājumu, nevis tieši maina Redux uzvedību.

Tālāk apskatīsim, kā iestatīt Redux DevTools, lai jūs varētu sākt to izmantot savu React lietotņu atkļūdošanai.

Redux DevTools instalēšana

Redux DevTools ir pieejams divās galvenajās daļās - DevTools lietotāja saskarnē un Redux saitēs.

DevTools lietotāja saskarne

DevTools lietotāja saskarne ir pieejama kā pārlūkprogrammas paplašinājums. Instalējiet vienu no šiem paplašinājumiem, lai pārlūkprogrammas izstrādātāja rīkos piekļūtu React atkļūdošanas panelim:

  • React izstrādātāja rīki - Chrome un Firefox paplašinājums ar kombinētu React un Redux profilēšanu
  • Redux DevTools paplašinājums - Atsevišķs Chrome, Firefox un Edge paplašinājums

Redux stiprinājumi

Redux saistījumi nodrošina saziņu starp DevTools pārlūkprogrammas paplašinājumu un jūsu React lietojumprogrammas Redux veikalu. Instalējiet |_+_| npm pakete:

|_+_|

Tagad Redux DevTools var integrēties ar jūsu veikalu. Jums vienkārši jāpabeidz konfigurācija.

Pamatkonfigurācija

Lai iespējotu Redux DevTools integrāciju, jums ir jāizveido veikals, izmantojot |_+_| funkcija no |_+_|. Šeit ir tipisks veikala iestatījums ar iespējotiem DevTools:

|_+_|

|_+_| iesaiņojuma rokturi, kas savieno veikalu ar pārlūkprogrammas paplašinājuma DevTools UI.

Tagad, kad jūsu React lietotne inicializē veikalu, DevTools to atklās un integrēs ar to. Jūsu pārlūkprogrammas DevTools panelī vajadzētu parādīties cilnei Redux, kas ļauj sākt atkļūdošanu.

Alternatīvās integrācijas

Citos populāros ietvaros ir pieejama arī DevTools integrācija:

  • Next.js - Izmantojiet |_+_| configureStore
  • CRA - Izmantojiet |_+_| configureStore

Pārbaudiet savus ietvara vai standarta dokumentus, lai redzētu, vai tie nodrošina saīsnes Redux DevTools integrēšanai.

Izmantojot Redux DevTools

Kad DevTools ir pilnībā iestatīts, apskatīsim, kā varat to izmantot React lietotņu atkļūdošanai. DevTools UI nodrošina tālāk norādītās darbības.

  • Pārbaudiet stāvokli
  • Skatieties stāvokļa izmaiņas
  • Atskaņojiet ierakstītās darbības
  • “Ceļošana laikā” starp vēsturiskajiem lietotņu stāvokļiem

Pārbaudes valsts

Cilnē DevTools State varat pārbaudīt jaunāko Redux stāvokļa momentuzņēmumu. Izvērsiet stāvokļa daļas, lai iedziļināties konkrētas stāvokļa daļas pašreizējā vērtībā:

Pārbaudiet stāvokli pēc mijiedarbības, lai atkļūdotu vērtības netiek atjauninātas, kā paredzēts.

Stāvokļa izmaiņu uzraudzība

Noklikšķinot uz izvēles rūtiņas Pārraudzīt stāvokļa izmaiņas, tiks reģistrētas visas nosūtītās darbības un jaunā stāvokļa vērtība pēc katras darbības.

Skatieties šo žurnālu, lai izprastu stāvokļa izmaiņu plūsmu. Tas parāda darbību secību, kas laika gaitā ietekmē stāvokli.

Ievērojiet, kad štati tiek atjaunināti nepareizi, lai sašaurinātu kļūdas cēloni.

Darbības atskaņošana un ceļošana laikā

Darbību žurnāls ļauj atkārtot darbības, aktivizējot darbības. Noklikšķiniet uz darbības, lai to nosūtītu atkārtoti. Vai arī velciet slīdni uz “ceļošana laikā” atpakaļ uz iepriekšējiem lietotnes stāvokļiem.

Izmantojiet to, lai izolētu, kad rodas kļūda. Atkārtojiet darbības, lai redzētu, kā tas notiek, un pēc tam pārbaudiet stāvokli, lai iegūtu ieskatu.

DevTools monitora pielāgošana

Varat pielāgot DevTools monitora cilni, lai mainītu tajā saglabātos ierakstus. Tas palīdz koncentrēties uz attiecīgajām stāvokļa izmaiņām.

Ja nepieciešams, iespējojiet šīs monitora opcijas:

  • Pauzēt ierakstīšanu - Uz laiku pārtrauc ierakstīšanu
  • Bloķēšanas izmaiņas - Saglabā darbību žurnālu, ceļojot laikā
  • Sekojiet stāvokļa izmaiņām - Filtri ieraksta tikai izmaiņas

Pievienojot |_+_| un |_+_| konfigurācijas opcijas ļauj arī iestatīt:

  • Reģistrējamo darbību skaits
  • Filtra darbības, piemēram, |_+_|
|_+_|

Pielāgojiet tos, lai DevTools koncentrētos uz atbilstošiem atkļūdošanas datiem.

Izmantojot Redux DevTools kā profesionāli

Izpētīsim dažas efektīvas darbplūsmas, lai izmantotu Redux DevTools iespējas problēmu diagnosticēšanai.

Precīza stāvokļa noteikšana

Izplatīts uzdevums ir sašaurināšanās, kad lietotnes statuss atšķiras no tā, kas varētu izraisīt kļūdu.

DevTools darbību atskaņošanas līdzekļi palīdz identificēt darbību, kas izraisa stāvokļa kļūmi. Šis ir process, lai atrastu stāvokļa pārtraukuma punktus:

  1. Ņemiet vērā pēdējo zināmo labo stāvokli
  2. Atskaņojiet darbības uz priekšu, uzraugot stāvokļa izmaiņas
  3. Pārtrauciet atskaņošanu, kad parādās negaidīts stāvoklis
  4. Pārbaudiet darbību un stāvokli pirms atteices punkta

Tādējādi tiek filtrēts kļūdas cēlonis līdz nelielai atkļūdošanas darbību kopai.

Izpratne par mijiedarbības secības kļūmēm

Sarežģītas lietotāja saskarnes ietver garas stāvokļa atjauninājumu secības. Ja kaut kas noiet greizi secības vidū, kļūst neskaidrs, kura mijiedarbība neizdevās.

DevTools soli pa solim izseko atjauninājumiem, lai pievērstu uzmanību kļūdām. Analizējiet bojāto mijiedarbības secību, izmantojot:

  1. Lai sāktu, atiestatiet lietotnes stāvokli
  2. Ieraksta secība
  3. Apstāties negaidītā stāvoklī
  4. Pārskatiet darbību žurnālu, lai redzētu pēdējo veiksmīgo darbību pirms neveiksmes
  5. Atkārtojiet iepriekšējās darbības, lai atkārtoti izveidotu tikai atteices secību atsevišķi

Tagad varat salabot konkrēto UX plūsmas daļu, kas sabojājās.

Stāvokļa izmaiņu izsekošana, kas ietekmē komponentus

React DevTools pārlūkprogrammas paplašinājums šeit papildina Redux DevTools iespējas. Tas ļauj izsekot, kurš komponents tiek atkārtoti renderēts, mainoties stāvoklim.

Izmantojiet abus rīkus kopā, lai saistītu stāvokļa atjauninājumus ar lietotāja interfeisa renderēšanu:

  1. React DevTools — iezīmējiet komponentus, lai izsekotu atkārtotu renderēšanu
  2. Redux DevTools — skatiet darbību žurnālu, lai noskaidrotu stāvokļa izmaiņas
  3. Korelēt React komponents tiek atkārtoti renderēts uz Redux stāvokļa mutācijām

Varat noteikt, kurš Redux stāvoklis galu galā ietekmē jūsu komponentu loģiku, radot problēmas.

DevTools veiktspējas optimizācija

DevTools nodrošina vērtīgus metadatus, lai palīdzētu paātrināt arī jūsu React lietotnes. Izmantojiet to, lai atrastu veiktspējas vājās vietas.

Dārgu stāvokļa aprēķinu noteikšana

Darbību žurnāls parāda katra stāvokļa atjaunināšanas ilgumu. Ievērojiet garus stāvokļa pārrēķinus:

Mēģiniet reģistrēt laiku ar iespējotiem ražošanas datiem, lai noteiktu optimizācijas mērķus. Pēc tam atkārtojiet konkrētas darbības, lai tās izolētu.

Lēnas darbības veidotāju noteikšana

Darbības izvēršana ļauj izsekot failam un koda rindiņai, kas to aktivizē. Izmantojiet šo, lai atrastu smagsvara darbību veidotājus:

Daži lietotāja interfeisa notikumu apstrādātāji var nosūtīt dārgas secības. Steka izsekošana norāda uz koda vietām, kurām nepieciešama optimizācija.

UI kadru ātruma analīze

React DevTools Profiler ļauj ierakstīt komponentu renderējumus mijiedarbības laikā. Pārskatiet laika marķierus, lai noteiktu:

  • Ilgi komponentu atjauninājumi
  • Nomesti rāmji
  • konvencijas problēmas starp Redux stāvokli un React atkārtotajiem renderējumiem

Identificējiet savienojumus no stāvokļa izmaiņām līdz sliktas veiktspējas lietotāja saskarnes kodam.

Secinājums

Redux DevTools ļauj analizēt gandrīz jebkuru React, Redux un stāvokļa pārvaldības problēmu, ar kuru jūs saskaraties. Tas sniedz jums neticami redzamu, kā jūsu lietotne darbojas.

Instrumentēšana Redux ar DevTools iestatīšana aizņem minūtes. Taču tas ietaupīs stundas, meklējot kļūdas un veiktspējas problēmas.

Lielām, sarežģītām saskarnēm, veltot laiku DevTools darbplūsmu apguvei, ātri tiek atmaksātas atkļūdošanas problēmas. Apvienojot tās iespējas ar citiem pārlūkprogrammas paplašinājumiem, jūs varat pilnībā redzēt tiltu starp stāvokļa pārvaldību un lietotāja interfeisa kodu.

Iegūtais ieskats galu galā noved pie ātrākiem izstrādes cikliem, veidojot augstas kvalitātes lietojumprogrammas.

Skatīt Arī: