Vad letar du efter?

Vad letar du efter?

bygga en komplex webbapplikation, har du förmodligen stött på det faktum att något inte fungerade som planerat. Du har spenderat timmar och timmar på att leta efter ett fel i din kod och sedan på internet söker efter hjälp med att lösa problemet. För att göra det lättare för dig, förklarar vi i denna artikel några effektiva tekniker för att felsöka en webbapplikation som avsevärt minskar smärtan vid felsökning och förkortar tiden för att upptäcka problem.

konsol.logga

först en vanlig javascript – metodkonsol.logga. Du kan infoga en metod i din kod med den angivna variabeln. Under kodkörning returnerar programmet värdet på de variabler som anges i metoden i konsolen. Detta är det enklaste sättet att kontrollera om programmet returnerar det förväntade värdet.

tyvärr är detta inte en mycket effektiv metod för felsökning. Ett sådant tillvägagångssätt t tillåter oss inte att se utvecklingen av kodkörning (såvida vi inte sätter in konsolen.logga några rader, men då kommer mängden data som kastas i konsolen att vara oläslig och vi kommer bara att göra en röra i koden.) Dessutom returnerar den endast den godkända variabeln, förutsatt att applikationen inte kastar ett fel när koden körs.

Tips no. 1

om du har många konsol.loggar sätter namnet i en sträng och nästa variabel, t.ex. konsol.log (’variabel’, variabel).

Chrome DevTools (Source Tab)

en effektivare metod för felsökning av en webbapplikation är att använda Chrome DevTools och Source Tab. Innan vi börjar felsöka på fliken Källa måste vi lägga till node_modules till svart boxning. Vi lägger till den här regeln så att den inte visar oss filer från externa paket när vi går igenom brytpunkter, vilket gör det svårt att felsöka. Vi måste öppna Inställningar i Chrome Bisexuell Blackboxing Bisexuell Lägg till mönster och skriv sedan där /node_modules.

när du lägger till node_modules till svart boxning kan vi gå till fliken Källa. Låt oss anta att du vill följa i realtid processen för din funktion och kontrollera utgångarna. Tryck på Ctrl + O på fliken Källa och ange ett källfilnamn. Lägg sedan brytpunkterna på de kodrader som intresserar dig och du kan börja köra processen i din webbläsare. När de rader du valt börjar bearbeta, slutar webbläsaren att köra koden. Se skärmdumpen nedan.

som du kan se har den aktuella kodrad där webbläsaren har slutat en blå bakgrund. På höger sida finns en bar där vårt kommandocenter ligger. Här är vår korta introduktion.

kontroller

överst i fältet har du avsnittet Kontroller. Låt oss fokusera på de avgörande elementen. Den första CV-kontrollen tar oss till nästa markerade Brytpunkt inom ramen för koden som körs. Det andra Kontrollsteget över nästa funktionsanrop tar oss till nästa rad i koden som körs. Den sista Deaktiva brytpunktskontrollen inaktiverar de valda brytpunkterna. Det är en användbar kontroll när vi har valt många brytpunkter, och vi vill gå tillbaka till att klicka igenom applikationen ett tag utan att pausa vid varje Brytpunkt.

omfattningar

vi har en omfattningar avsnitt nedan. Vi har flera typer av omfattningar: lokal (den för närvarande utförda funktionen) och stängningar beroende på omfattningen där vi är (till exempel föräldern till den för närvarande utförda funktionen eller en komponent). I vart och ett av dessa omfattningar visar webbläsaren oss alla variabler som förekommer i dem.

brytpunkter

det sista avsnittet som diskuteras är brytpunkter. Det visar vilka brytpunkter och i vilka filer som är markerade. Med hjälp av kryssrutor kan vi enkelt inaktivera och återaktivera dem.

Tips nr. 2-5

• om du använder immutable.js i ditt projekt, installera det oföränderliga.JS Object Formatter plugin och aktivera den i webbläsarinställningar. Detta kommer att förenkla felsökningen av oföränderliga objekt avsevärt.
• om du inte använder immutable.js i ditt projekt och du använder Visual Studio kod som IDE, rekommenderar vi att du installerar och konfigurerar Debugger för Chrome (VSC har inte en oföränderlig.JS formatering plugin). Det förenklar felsökning ytterligare och möjliggör snabbare kodändringar.
• om fliken Källa inte visar dina lokala filer, Kontrollera källkartan i ditt projekt.
• när webbläsaren stannar på en brytpunkt har du tillgång till variabler också i konsolen.

React Developer Tools

React Developer Tools är också användbara lösningar. Sådana verktyg gör att du enkelt kan se React-trädstrukturen i ditt projekt, staterna och rekvisita i komponenten. Funktionen Välj ett element på sidan för att inspektera det är kraftfull, särskilt när du inte känner till hela projektet. Det hjälper dig att hitta den komponent du behöver uppdatera.

Tips nr 6

om du använder Vue. js, du kan använda Vue.JS devtools. Tillägget har liknande funktioner och tillgång till Vuex (redux-ekvivalenten i react).

Redux DevTools

om du använder Redux i ditt projekt är Redux DevTools ett måste. En sådan lösning låter dig spåra hela flödet av åtgärder, statusändringar, nyttolast och visa den aktuella butiken efter varje utförd åtgärd. Om något inte fungerar som vi antar, och allt verkar bra i koden, är det värt att överväga vilka åtgärder som skickas, med vilken nyttolast. Ibland finns det enkla misstag som att kopiera konstanten från ovanstående åtgärd, byta namn utan att ändra värdet och sedan ringa något helt annat. Nedan visas en gif som visar de viktigaste Redux DevTools-funktionerna.

Tips nr. 7

om din applikation kör ett stort antal åtgärder kanske tillägget inte fungerar korrekt på grund av otillräckligt minne för att bearbeta så många åtgärder. Du kan försöka konfigurera det i tilläggsalternativen (i det här fallet maxage-alternativet.)

Fiddler

det sista verktyget vi vill introducera är Fiddler. Verktyget skapades för att hantera nätverkstrafik. Det är extremt användbart när vi har några produktionsfel och vi kan inte kopiera produktionsdata till en lägre miljö för att felsöka lokalt. I en sådan situation, för att få tillgång till produktionsdata i den lokala miljön, ställer vi in trafiken på Autosvararfliken. När du öppnar sidan, istället för att ladda ner js-filen från servern, ansluter Fidler vår lokalt byggda produktionsfil. Ytterligare felsökning görs på fliken källa för chrome dev tools. Nedan är en skärmdump med inställningen att omdirigera trafik till den lokala filen. Programmet möjliggör också mock endpoints.

8

om du vill skapa mocks av slutpunkter på ett enkelt och snabbt sätt kan du använda ett mock moon-program.

sammanfattning av en smidig felsökning av en webbapplikation

för många av oss är processen att felsöka en webbapplikation förknippad med huvudvärk och långa timmar framför datorn. Denna process kan dock förkortas och göras trevligare om du har rätt verktyg och kunskap att använda dem. Ofta är de till hands och gratis. Vi delade med dig de viktigaste och användbara verktygen som vi använder dagligen.