hvad Leder du efter?
opbygning af en kompleks internetapplikation, du har sandsynligvis stødt på det faktum, at noget ikke fungerede som planlagt. Du har brugt timer og timer på at lede efter en fejl i din kode og derefter på internettet søge efter hjælp til at løse problemet. For at gøre det lettere for dig forklarer vi i denne artikel nogle effektive teknikker til fejlfinding af en internetapplikation, der markant reducerer smerten ved fejlfinding og forkorter tiden for at opdage problemer.
konsol.log
først en almindeligt anvendt javascript-metodekonsol.log. Du kan indsætte en metode i din kode med den givne variabel. Under kodeudførelse returnerer applikationen værdien af de variabler, der er angivet inde i metoden i konsollen. Dette er den nemmeste måde at kontrollere, om programmet returnerer den forventede værdi.
Desværre er dette ikke en meget effektiv metode til fejlfinding. En sådan tilgang t tillader os ikke at se fremskridtene med kodeudførelse (medmindre vi indsætter konsol.log hvert par linjer, men så vil mængden af data, der kastes i konsollen, være ulæselig, og vi vil kun gøre et rod i koden.) Desuden returnerer den kun den beståede variabel, forudsat at applikationen ikke kaster en fejl under udførelsen af koden.
Tip no. 1
hvis du har mange konsol.logfiler sætter navnet i en streng og den næste variabel, f.eks.log (‘variabel’, variabel).
Chrome DevTools (Kilde Tab)
en mere effektiv metode til fejlfinding af en internetapplikation er at bruge Chrome DevTools og Source Tab. Før vi begynder at debugge i fanen Kilde, skal vi tilføje node_modules til sort boksning. Vi tilføjer denne regel, så når vi gennemgår breakpoints, viser den os ikke filer fra eksterne pakker, hvilket gør fejlfinding vanskelig. Vi er nødt til at åbne Indstillinger i Chrome-Kromkrus-Sortkasse-vi tilføjer mønstre og skriver derefter der /node_modules.
når du tilføjer node_modules til sort boksning, kan vi gå til fanen Kilde. Lad os antage, at du vil følge processen med din funktion i realtid og kontrollere output. Tryk på Ctrl + O på fanen kilde, og indtast et kildefilnavn. Sæt derefter breakpoints på de kodelinjer, der interesserer dig, og du kan begynde at udføre processen i din bro.ser. Når de valgte linjer begynder at behandle, stopper bro.sereren med at udføre koden. Se skærmbilledet nedenfor.
som du kan se, har den aktuelle kodelinje, hvor bro.sereren er stoppet, en blå baggrund. På højre side er der en bar, hvor vores kommandocenter er placeret. Her er vores korte introduktion.
Controls
øverst på linjen har du kontrolafsnittet. Lad os fokusere på de afgørende elementer. Den første CV-kontrol fører os til det næste markerede breakpoint inden for rammerne af den kode, der udføres. Det andet kontroltrin over næste funktionsopkald fører os til den næste linje i koden, der udføres. Den sidste Deactive breakpoints-kontrol deaktiverer de valgte breakpoints. Det er en nyttig kontrol, når vi har valgt mange breakpoints, og vi vil gå tilbage til at klikke gennem applikationen et stykke tid uden at holde pause ved hvert breakpoint.
Scopes
vi har et scopes afsnit nedenfor. Vi har flere typer anvendelsesområder: Lokal (den aktuelt udførte funktion) og lukninger afhængigt af det omfang, vi er i (for eksempel forælderen til den aktuelt udførte funktion eller en komponent). I hver af disse anvendelsesområder Viser bro.ser os alle variabler, der forekommer i dem.
Breakpoints
det sidste afsnit, der diskuteres, er breakpoints. Det viser, hvilke breakpoints og i hvilke filer der er markeret. Ved hjælp af afkrydsningsfelter kan vi nemt deaktivere og genaktivere dem.
Tips nr. 2-5
- hvis du bruger uforanderlig.JS i dit projekt skal du installere det uforanderlige.JS Object Formatter plugin og aktivere det i Indstillinger. Dette vil betydeligt forenkle debugging af uforanderlige objekter.
- hvis du ikke bruger uforanderlig.js i dit projekt, og du bruger Visual Studio-kode som IDE, anbefaler vi kraftigt at installere og konfigurere Debugger til Chrome (VSC har ikke en uforanderlig.JS formatering plugin). Det forenkler debugging yderligere og giver mulighed for hurtigere kodeændringer.
- hvis fanen Kilde ikke viser dine lokale filer, skal du kontrollere kildekortet i dit projekt.
- når bro.ser stopper på et breakpoint, har du også adgang til variabler i konsollen.
React Developer Tools
React Developer Tools er også nyttige løsninger. Sådanne værktøjer giver dig mulighed for nemt at se React-træstrukturen i dit projekt, staterne og rekvisitterne i komponenten. Vælg et element på siden for at inspicere det funktion er kraftfuld, især når du ikke kender hele projektet. Det hjælper dig med at finde den komponent, du skal opdatere.
Tip no. 6
hvis du bruger Vue.js, du kan bruge Vue.JS devtools. Udvidelsen har lignende funktioner og adgang til vueks (reduks-ækvivalenten i react).
DevTools
hvis du bruger DevTools i dit projekt, er DevTools et must-have. En sådan løsning giver dig mulighed for at spore den fulde strøm af handlinger, statusændringer, nyttelast og se den aktuelle butik efter hver udført handling. Hvis noget ikke virker som vi antager, og alt virker fint i koden, er det værd at overveje, hvilke handlinger der sendes, med hvilken nyttelast. Nogle gange er der enkle fejl som at kopiere konstanten fra ovenstående handling, omdøbe uden at ændre værdien og derefter kalde noget helt andet. Nedenfor er en gif, der viser de vigtigste funktioner.
Tip nr. 7
hvis din applikation kører et stort antal handlinger, fungerer udvidelsen muligvis ikke korrekt på grund af utilstrækkelig hukommelse til at behandle så mange handlinger. Du kan prøve at konfigurere det i udvidelsesindstillingerne (i dette tilfælde maks.)
Fiddler
det sidste værktøj, vi gerne vil introducere, er Fiddler. Værktøjet blev oprettet til at styre netværkstrafik. Det er yderst nyttigt, når vi har nogle produktionsfejl, og vi kan ikke kopiere produktionsdataene til et lavere miljø for at fejle lokalt. I en sådan situation, for at få adgang til produktionsdata i det lokale miljø, indstiller vi trafikken på fanen AutoResponder. Når du åbner siden, i stedet for at hente JS-filen fra serveren, Fidler forbinder vores lokalt bygget produktion fil. Yderligere debugging sker i chrome dev tools kilde fanen. Nedenfor er et skærmbillede med indstillingen for at omdirigere trafik til den lokale fil. Programmet giver også mulighed for mock endpoints.
8
hvis du vil oprette mocks af endepunkter på en nem og hurtig måde, kan du bruge et mock moon-program.
resume af en adræt fejlfinding af en internetapplikation
for mange af os er processen med fejlfinding af en internetapplikation forbundet med hovedpine og lange timer brugt foran computeren. Denne proces kan dog forkortes og gøres mere behagelig, hvis du har de rigtige værktøjer og viden til at bruge dem. Ofte er de lige ved hånden og gratis. Vi delte med dig de vigtigste og nyttige værktøjer, som vi bruger dagligt.