mitä etsit?
rakentaessasi monimutkaista verkkosovellusta olet luultavasti törmännyt siihen, että jokin ei toiminut suunnitellusti. Olet viettänyt tuntikausia etsivät bugi koodin ja sitten Internetissä etsivät apua korjata ongelma. Jotta se olisi helpompaa sinulle, tässä artikkelissa selitämme joitakin tehokkaita tekniikoita virheenkorjaus web-sovellus, joka vähentää merkittävästi kipua virheenkorjaus ja lyhentää aikaa havaita kysymyksiä.
konsoli.log
ensimmäinen, yleisesti käytetty javascript-metodikonsoli.kirjaudu. Voit lisätä menetelmän koodiisi annetulla muuttujalla. Koodin suorittamisen aikana sovellus palauttaa konsolin menetelmän sisällä määritettyjen muuttujien arvon. Tämä on helpoin tapa tarkistaa, jos ohjelma palauttaa odotusarvon.
Valitettavasti tämä ei ole kovin tehokas virheenkorjausmenetelmä. Tällainen lähestymistapa t ei salli meidän nähdä edistymistä koodin suorittamisen (ellemme lisää konsoli.Kirjaudu muutaman rivin välein, mutta silloin konsoliin heitetty datamäärä on lukukelvoton ja sotkemme vain koodin.) Lisäksi, se palauttaa vain hyväksytty muuttuja, edellyttäen, että sovellus ei heittää virhe suoritettaessa koodia.
Vihjenumero 1
jos konsoleita on monta.lokit laittavat nimen merkkijonoon ja seuraavan muuttujan, esim.konsolin.log (’muuttuja’, muuttuja).
Chrome DevTools (Source Tab)
tehokkaampi tapa verkkosovelluksen virheenkorjaukseen on käyttää Chrome DevTools-ja Source-välilehteä. Ennen kuin aloitamme vianetsinnän lähde-välilehdessä, meidän on lisättävä node_modules mustaan nyrkkeilyyn. Lisäämme tämän säännön niin, että kun käymme läpi keskeytyspisteitä, se ei näytä meille tiedostoja ulkoisista paketeista, mikä tekee vianetsinnästä vaikeaa. Meidän täytyy avata Asetukset Chrome → Blackboxing → lisää kuvioita ja kirjoita sitten /node_modules.
kun lisäät node_modules mustaan nyrkkeilyyn, voimme siirtyä lähde-välilehteen. Oletetaan, että haluat seurata reaaliajassa toiminnon prosessia ja tarkistaa lähdöt. Paina Ctrl + O lähde-välilehdessä ja anna lähdetiedoston nimi. Aseta sitten keskeytyspisteet kiinnostaville koodiriveille, sinä ja sinä voit aloittaa prosessin suorittamisen selaimessasi. Kun valitsemasi rivit alkavat käsitellä, selain lopettaa koodin suorittamisen. Katso kuvakaappaus alta.
kuten näet, nykyisellä koodirivillä, jolla selain on pysähtynyt, on sininen tausta. Oikealla puolella on baari, jossa komentokeskuksemme sijaitsee. Tässä on lyhyt esittely.
säätimet
tangon yläosassa on säätöosa. Keskitytään olennaisiin asioihin. Ensimmäinen uudelleenohjaus vie meidät seuraavaan merkittyyn keskeytyspisteeseen suoritettavan koodin puitteissa. Toinen ohjausvaihe seuraavan funktiokutsun yli vie meidät suoritettavan koodin seuraavalle riville. Viimeinen Deactive keskeytyspisteet ohjaus deaktivoi valitut keskeytyspisteet. Se on hyödyllinen ohjaus, Kun meillä on monta keskeytyspistettä valittuna, ja haluamme palata napsauttamaan sovellusta jonkin aikaa pysähtymättä jokaisessa keskeytyspisteessä.
Scopes
alla on scopes-osio. Meillä on useita erilaisia scopes: paikallinen (tällä hetkellä suoritetaan funktio), ja sulkuja riippuen soveltamisala, jossa olemme (esimerkiksi vanhemman tällä hetkellä suoritetaan funktio tai komponentti). Jokaisessa näistä laajuuksista selain näyttää meille kaikki niissä esiintyvät muuttujat.
raja-arvot
viimeinen käsitelty kohta on raja-arvot. Se näyttää, mitä keskeytyspisteitä ja mihin tiedostoihin on merkitty. Käyttämällä valintaruudut, voimme helposti deaktivoida ja uudelleenaktivoida ne.
vihjeet nro. 2-5
- jos käytät muuttumatonta.JS omassa projektissa, asenna muuttumaton.JS Object Formatter plugin ja aktivoi se selaimen asetuksissa. Tämä yksinkertaistaa merkittävästi muuttumattomien objektien virheenkorjausta.
- jos et käytä muuttumatonta valmistetta.JS projektissasi ja käytät Visual Studio-koodia IDE: nä, suosittelemme vahvasti Debuggerin asentamista ja määrittämistä Chromelle (VSC: llä ei ole muuttumatonta.JS formating plugin). Se yksinkertaistaa virheenkorjausta entisestään ja mahdollistaa nopeammat koodimuutokset.
- jos lähde-välilehti ei näytä paikallisia tiedostojasi, tarkista projektisi lähdekartta.
- kun selain pysähtyy keskeytyspisteeseen, voit käyttää muuttujia myös konsolissa.
React Developer Tools
React Developer Tools ovat myös hyödyllisiä ratkaisuja. Tällaisten työkalujen avulla voit helposti tarkastella React – puun rakennetta projektissasi, osavaltioita ja komponentin rekvisiittaa. Valitse elementti sivun tarkastaa se toiminto on tehokas, varsinkin kun et tiedä koko projektin. Se auttaa sinua löytämään komponentin sinun täytyy päivittää.
vinkki nro 6
jos käytät Vueta.js, voit käyttää Vueta.js devtools. Laajennuksella on samanlaiset toiminnot ja pääsy Vuexiin (redux-vastine reactissa).
Redux DevTools
jos käytät Redux Devtoolsia projektissasi, Redux DevTools on pakollinen. Tällaisen ratkaisun avulla voit seurata toimintojen täyttä virtaa, tilamuutoksia, hyötykuormaa ja tarkastella nykyistä säilöä jokaisen suoritetun toiminnon jälkeen. Jos jokin ei toimi kuten oletamme, ja kaikki näyttää olevan kunnossa koodissa, on syytä harkita, mitä toimintoja lähetetään, millä hyötykuormalla. Joskus on olemassa yksinkertaisia virheitä, kuten kopiointi vakio edellä toimintaa, uudelleennimeäminen muuttamatta arvoa, ja sitten soittaa jotain täysin erilaista. Alla on gif, jossa esitellään tärkeimmät Redux DevTools-toiminnot.
Vihjenumero. 7
jos sovelluksessasi on suuri määrä toimintoja, laajennus ei välttämättä toimi kunnolla, koska muisti ei riitä käsittelemään niin monia toimintoja. Voit yrittää määrittää sen laajennusasetukset (tässä tapauksessa, maxAge vaihtoehto.)
Fiddler
viimeinen työkalu, jonka haluaisimme ottaa käyttöön, on Fiddler. Työkalu luotiin verkkoliikenteen hallintaan. Se on erittäin hyödyllinen, kun meillä on joitakin tuotantovirheitä, emmekä voi kopioida tuotantotietoja alempaan ympäristöön debugin tekemiseksi paikallisesti. Tällaisessa tilanteessa, saada tuotantotietoja paikallisessa ympäristössä, asetamme liikenteen automaattivastaaja-välilehdessä. Kun avaat sivun, sen sijaan, että lataat JS-tiedoston palvelimelta, Fidler yhdistää paikallisesti rakennetun tuotantotiedoston. Lisää virheenkorjausta tehdään chrome dev tools-lähdekoodivälilehdessä. Alla on kuvakaappaus, jossa asetus ohjaa liikennettä paikalliseen tiedostoon. Ohjelma mahdollistaa myös mock päätepisteet.
vinkki nro 8
jos haluat luoda pilakuvia päätepisteistä helposti ja nopeasti, voit käyttää mock moon-ohjelmaa.
Yhteenveto web-sovelluksen ketterästä virheenkorjauksesta
monille meistä web-sovelluksen virheenkorjausprosessi liittyy päänsärkyyn ja pitkiin tunteihin tietokoneen ääressä. Tätä prosessia voi kuitenkin lyhentää ja tehdä miellyttävämmäksi, jos on oikeat työkalut ja tietotaito käyttää niitä. Usein ne ovat käden ulottuvilla ja ilmaiseksi. Jaoimme kanssasi tärkeimmät ja hyödyllisimmät työkalut, joita käytämme päivittäin.