Ohjelmistojen virheidenetsintä web-sovelluksissa voi olla haastava tehtävä, erityisesti kun kyseessä ovat monimutkaiset kehykset kuten React. Tässä oppaassa näytän sinulle, kuinka voit hallita React-sovellusten virheidenetsintää tehokkaasti Google Chromen kehittäjätyökalujen avulla. Käyn läpi tarkasti tiettyjä tekniikoita yleisimpien virheiden löytämiseksi ja korjaamiseksi. Sinun tulisi olla perehtynyt Reactiin voidaksesi ymmärtää käsitteet.
Tärkeimmät oivallukset
- Ymmärrä Source Maps -tiedostojen rooli React-sovelluksen virheidenetsinnässä.
- Aseta katkaisupisteitä strategisiin kohtiin seurataksesi sovelluksen virtausta.
- Analysoidaksesi kutsupinoa ja ymmärtääksesi, milloin funktiot kutsutaan.
Askel-askeleelta-opas
Aloittaaksesi virheidenetsinnän, olen valmistellut yksinkertaisen esimerkin React-sovelluksesta, joka tarjoaa kaksi painiketta laskuriarvojen kasvattamiseen. Haluamme varmistaa, että sovelluksen tila päivittyy oikein.
Ensin avaa Chromessa kehittäjätyökalut. Voit tehdä tämän napsauttamalla oikealla hiirenpainikkeella sivulla ja valitsemalla "Tarkastele elementtiä" tai yksinkertaisesti painamalla näppäintä "F12".
Ensimmäisessä vaiheessa päivitä React-sovelluksesi varmistaaksesi, että työskentelet nykyisen version kanssa. Kun sovellus on ladattu, näet kaksi nappia laskemista varten. Ensimmäinen nappi kasvattaa ensimmäistä laskuria ja toinen nappi toista laskuria.
Tässä näet, että painikkeita napsautettaessa laskurien arvot näkyvät. Voit tarkkailla näitä arvoja konsolissa, joka löytyy myös kehittäjätyökaluista. Paina kahdesti "Escape" avataksesi tai sulkeaksesi konsolin.
Seuraavaksi muokkaa sovelluksesi koodia, erityisesti UseEffect Hookia. UseEffect Hookia käytetään reagoidaksesi sivuvaikutuksiin Reactissa. Esimerkissäni olen asettanut sen niin, että se tulostaa nykyisen laskurin arvon konsoliin. Tämä varmistaa, että ymmärrät, kuinka usein tämä vaikutus laukaistaan.
Konsolin avulla voit seurata koodia ja tarkistaa, että arvot tulostetaan oikein. Jos kuitenkin et määrittele UseEffectin riippuvuusarrayä oikein, tämä voi johtaa odottamattomaan käyttäytymiseen.
Tämän testaamiseksi poista riippuvuusarray hetkeksi ja tarkkaile, mitä tapahtuu. Palaa sovellukseen ja aseta nyt katkaisupiste. Napsauta numeroa vasemmassa sarakkeessa asettaaksesi katkaisupisteen.
Nyt klikkaa ensimmäistä nappia ja huomaa, että suoritus pysähtyy asetetussa katkaisupisteessä. Tämä mahdollistaa sovelluksen tilan analysoinnin, kun Click-Handleria suoritetaan.
Huomaat, että jokaisella napsautuksella tilaa päivitetään vain painikkeelle, jota painettiin. Jos kuitenkin napsautat toista nappia, huomaat, että sovelluksen käyttäytyminen ei ole odotetulla tavalla.
Nyt aloitat virheen tarkastelun. Huomaat, että UseEffect tulostaa nykyisen laskurin arvon joka tapauksessa, myös napsautettaessa toista laskuria.
Tässä vaiheessa sinun tulisi lisätä takaisin riippuvuusarray ja varmistaa, että se on riippuvuutena oikea laskurin arvo. Tämä varmistaa, että vaikutus laukaistaan vain, kun asiaankuuluva laskuri muuttuu.
Kun lataat sovelluksen uudelleen ja painat nappeja, huomaat, että konsolituloste tulostetaan vain laskurin vaihdon yhteydessä. Lisää Console.Log-lausuntoosi toinen katkaisupiste tarkistaaksesi, että odotetut arvot tulostetaan sinne.
Huomaa, että React-koodin esityksessä on myös Näytä ohitetut kehykset -vaihtoehto. Tämä voi olla hyödyllinen estämään samaa kirjastokoodia Call Stackissa, mikä voisi häiritä analyysiäsi.
Kun olet korjannut virheen, voi olla hyödyllistä tarkistaa se uudelleen. Tässä vaiheessa sinun tulisi varmistaa, että koodi- ja painotoiminnallisuutta testataan uudelleen vahvistaaksesi, että muutos vaikuttaa toivotulla tavalla.
Lisäksi voit strategisesti asettaa katkaisupisteitä eri keskusteluiden paikkoihin jatkaaksesi funktiokutsujen tarkastelua. Tarkkaile säännöllisesti Call Stackia seurataksesi kaikkia kyseisellä hetkellä kutsuttuja toimintoja.
Pidä myös mielessä, että asynkroniset toiminnot voivat johtaa paikallisen tilan menetykseen, joten Call Stackin tarkkailu on tärkeää ylläpitääksesi käsityksen React-sovelluksesi tilasta.
Yhteenveto
Tässä opetusohjelmassa opit kuinka tärkeitä Chrome-kehitystyökalut ovat React-sovellusten tehokkaassa vianetsinnässä. Katkaisupisteiden asettaminen ja Call Stackin analysointi ovat olennaisia vaiheita koodisi virtauksen ymmärtämisessä ja ongelmien ratkaisemisessa. Hallitsemalla riippuvuudet UseEffectin avulla voit varmistaa, että sovelluksellesi näytetään odotettu tila.
Usein kysytyt kysymykset
Mikä on katkaisupiste?Katkaisupiste on kohta koodissa, jossa ohjelman suoritus pysähtyy nykyisen suorituksen tarkastelemiseksi.
Kuinka käytän riippuvuusarrayä UseEffectissä?Riippuvuusarray mahdollistaa määrittää, mitkä muuttujat aiheuttavat efektin laukaisun muuttuessaan.
Mikä ovat lähdekartat?Lähdekartat yhdistävät tiivistetyn ja transpiloidun koodin alkuperäiseen koodiin, mikä helpottaa vianetsintää.
Kuinka voin seurata asynkronisia toimintoja Call Stackissa?Huomaa, että asynkroniset kutsut, kuten SetTimeout tai Promiset, vaikuttavat sovelluksen tilaan ja voivat aiheuttaa sen, että paikalliset muuttujat eivät ole saatavilla tietyllä hetkellä.
