Hva leter du etter?
Ved Å Bygge en kompleks webapplikasjon har du sannsynligvis oppdaget at noe ikke fungerte som planlagt. Du har brukt timer og timer på å lete etter en feil i koden din og deretter på internett for å søke etter hjelp med å fikse problemet. For å gjøre det enklere for deg, forklarer vi i denne artikkelen noen effektive teknikker for feilsøking av et webprogram som reduserer smerten ved feilsøking og forkorter tiden for å oppdage problemer.
Konsoll.logg
først en vanlig javascript – metodekonsoll.logge. Du kan sette inn en metode i koden din med den oppgitte variabelen. Under kjøring av kode returnerer programmet verdien av variablene som er angitt i metoden i konsollen. Dette er den enkleste måten å sjekke om programmet returnerer forventet verdi.
Dessverre Er Dette Ikke en veldig effektiv metode for feilsøking. En slik tilnærming t tillater oss ikke å se fremdriften for kjøring av kode (med mindre vi setter konsollen.logg noen få linjer, men mengden data som kastes i konsollen, blir ulæselig, og vi vil bare gjøre et rot i koden.) Videre returnerer den bare den passerte variabelen, forutsatt at programmet ikke kaster en feil under kjøring av koden.
Tips nr. 1
hvis du har mange konsoller.logger sette navnet i en streng og den neste variabelen, f. eks konsoll.logg (‘variabel’, variabel).
Chrome DevTools (Source Tab)
en mer effektiv metode for feilsøking av et webprogram er å bruke Chrome DevTools og Source Tab. Før vi begynner å feilsøke i kildefanen, må vi legge til node_modules til black boxing. Vi legger til denne regelen slik at når vi går gjennom brytepunkter, viser det oss ikke filer fra eksterne pakker, noe som gjør feilsøking vanskelig. Vi må åpne innstillingene I Chrome → Blackboxing → Legg til mønstre og skriv deretter der / node_modules.
når du legger node_modules til svart boksing, kan vi gå Til Kildefanen. La oss anta at du vil følge i sanntid prosessen med funksjonen din, og sjekk utgangene. Trykk Ctrl + O i kategorien kilde, og skriv inn et kildefilnavn. Sett deretter avbruddspunktene på kodelinjene som interesserer, du og du kan begynne å utføre prosessen i nettleseren din. Når linjene du valgte, begynner å behandle, slutter nettleseren å utføre koden. Se skjermbildet nedenfor.
som du kan se, har den nåværende kodelinjen der nettleseren har stoppet en blå bakgrunn. På høyre side er det en bar hvor vårt kommandosenter ligger. Her er vår korte introduksjon.
Kontroller
øverst på linjen har du kontroller-delen. La oss fokusere på de avgjørende elementene. Den første Cv-kontrollen tar oss til neste merkede stoppunkt innenfor rammen av koden som utføres. Det andre kontrolltrinnet over neste funksjonssamtale tar oss til neste linje i koden som utføres. Kontroll for siste deaktivering av avbruddspunkter deaktiverer de valgte avbruddspunktene. Det er en nyttig kontroll når vi har mange stoppunkter valgt, og vi vil gå tilbake til å klikke gjennom programmet en stund uten å pause på hvert stoppunkt.
Omfang
Vi har en rekkevidde nedenfor. Vi har flere typer omfang: lokal (den for tiden utførte funksjonen), og nedleggelser avhengig av omfanget der vi er (for eksempel foreldre til den for tiden utførte funksjonen eller en komponent). I hvert av disse områdene viser nettleseren oss alle variabler som forekommer i dem.
Avbruddspunkter
den siste delen som diskuteres er avbruddspunkter. Det viser hvilke avbruddspunkter og i hvilke filer som er merket. Ved hjelp av boksene, kan vi enkelt deaktivere og aktivere dem.
Tips nr. 2-5
- hvis du bruker uforanderlig.js i prosjektet ditt, installer Det Uforanderlige.js Object Formatter plugin og aktivere den i nettleserinnstillingene. Dette vil forenkle feilsøkingen av uforanderlige objekter betydelig.
- hvis du ikke bruker uforanderlig.js i prosjektet og du bruker Visual Studio Code SOM IDE, anbefaler vi sterkt installere Og konfigurere Debugger For Chrome (VSC har ikke en uforanderlig.js formatering plugin). Det forenkler feilsøking enda lenger og gir raskere kodeendringer.
- hvis kilde-fanen ikke viser de lokale filene, må du kontrollere kildekartet i prosjektet.
- når nettleseren stopper på et avbruddspunkt, har du også tilgang til variabler i konsollen.
React Utviklerverktøy
React Utviklerverktøy er også nyttige løsninger. Slike verktøy lar deg enkelt vise React trestruktur i prosjektet, statene, og rekvisitter i komponenten. Velg et element på siden for å inspisere den funksjonen er kraftig, spesielt når du ikke kjenner hele prosjektet. Det hjelper deg med å finne komponenten du trenger å oppdatere.
Tips nr.6
hvis Du bruker Vue.js, du kan bruke Vue.js devtools. Utvidelsen har lignende funksjoner og tilgang Til Vuex (redux-ekvivalenten i react).
Redux DevTools
hvis du bruker Redux I prosjektet ditt, Er Redux DevTools en må-ha. En slik løsning lar deg spore hele strømmen av handlinger, statusendringer, nyttelast og vise gjeldende butikk etter hver handling som utføres. Hvis noe ikke fungerer som vi antar, og alt virker bra i koden, er det verdt å vurdere hvilke handlinger som sendes, med hvilken nyttelast. Noen ganger er det enkle feil som å kopiere konstanten fra ovennevnte handling, omdøpe uten å endre verdien, og deretter ringe noe helt annet. Nedenfor er en gif som viser de viktigste Redux DevTools-funksjonene.
Tips nr. 7
hvis programmet kjører et stort antall handlinger, kan det hende at utvidelsen ikke fungerer som den skal på grunn av utilstrekkelig minne til å behandle så mange handlinger. Du kan prøve å konfigurere det i utvidelsesalternativene (i dette tilfellet maxAge-alternativet.)
Fiddler
Det siste verktøyet vi ønsker å introdusere er Fiddler. Verktøyet ble opprettet for å administrere nettverkstrafikk. Det er ekstremt nyttig når vi har noen produksjonsfeil, og vi kan ikke kopiere produksjonsdataene til et lavere miljø for å feilsøke lokalt. I en slik situasjon, for å få tilgang til produksjonsdata i lokalmiljøet, setter vi trafikken i autosvar-fanen. Når Du åpner siden, i stedet for å laste ned js-filen fra serveren, Kobler Fidler vår lokalt bygde produksjonsfil. Ytterligere feilsøking er gjort i chrome dev tools source-fanen. Nedenfor er et skjermbilde med innstillingen for å omdirigere trafikk til den lokale filen. Programmet gir også mulighet for mock endepunkter.
Tips nr. 8
hvis du vil lage spotter av endepunkter på en enkel og rask måte, kan du bruke et mock moon-program.
Sammendrag av en smidig feilsøking av en webapplikasjon
for mange av oss er prosessen med å feilsøke en webapplikasjon forbundet med hodepine og lange timer brukt foran datamaskinen. Denne prosessen kan imidlertid forkortes og gjøres mer behagelig hvis du har de riktige verktøyene og kunnskapen til å bruke dem. Ofte er de på fingertuppene og gratis. Vi delte med deg de viktigste og nyttige verktøyene vi bruker daglig.