wat zoekt u?
Als u een complexe webapplicatie bouwt, bent u waarschijnlijk het feit tegengekomen dat iets niet werkte zoals gepland. U hebt uren en uren besteed aan het zoeken naar een bug in uw code en vervolgens op het internet op zoek naar hulp bij het oplossen van het probleem. Om het u gemakkelijker te maken, leggen we in dit artikel enkele effectieve technieken uit voor het debuggen van een webapplicatie die de pijn van het debuggen aanzienlijk verminderen en de tijd van het opsporen van problemen verkorten.
Console.log
eerst, een veelgebruikte javascript methode console.log. U kunt een methode invoegen in uw code met de gegeven variabele. Tijdens het uitvoeren van de code retourneert de toepassing de waarde van de variabelen die zijn opgegeven in de methode in de console. Dit is de makkelijkste manier om te controleren of het programma de verwachte waarde retourneert.
helaas is dit geen erg effectieve methode voor debuggen. Een dergelijke aanpak t staat ons niet toe om de voortgang van de uitvoering van de code te zien (tenzij we console invoegen.log om de paar regels, maar dan de hoeveelheid gegevens gegooid in de console zal onleesbaar zijn en we zullen alleen maar een puinhoop maken in de code.) Bovendien geeft het alleen de doorgegeven variabele terug, op voorwaarde dat de toepassing Geen Fout geeft tijdens het uitvoeren van de code.
Tip nr. 1
als u veel console hebt.logs zetten de naam in een string en de volgende variabele, bijvoorbeeld console.log (“variabele”, variabele).
Chrome DevTools (Source Tab)
een efficiëntere methode voor het debuggen van een webtoepassing is het gebruik van Chrome DevTools en Source Tab. Voordat we beginnen met debuggen in het tabblad Bron, moeten we node_modules toevoegen aan black boxing. We voegen deze regel toe zodat wanneer we door breekpunten gaan het ons geen bestanden van externe pakketten laat zien, wat debuggen moeilijk maakt. We moeten Instellingen openen in Chrome → Blackboxing → voeg patronen toe en schrijf er /node_modules.
wanneer u node_modules toevoegt aan black boxing, kunnen we naar het tabblad Bron gaan. Laten we aannemen dat u wilt volgen in real time het proces van uw functie, en controleer de uitgangen. Druk op Ctrl + O in de bron tab en voer een bronbestandsnaam in. Zet dan de breekpunten op de regels code die interessant zijn, u en u kunt beginnen met het uitvoeren van het proces in uw browser. Wanneer de door u geselecteerde regels beginnen met verwerken, stopt de browser met het uitvoeren van de code. Zie de screenshot hieronder.
zoals u kunt zien, heeft de huidige regel code waar de browser is gestopt een blauwe achtergrond. Aan de rechterkant is er een bar waar ons commandocentrum zich bevindt. Hier is onze korte introductie.
besturingselementen
bovenaan de balk staat de sectie besturingselementen. Laten we ons concentreren op de cruciale elementen. De eerste CV controle brengt ons naar het volgende gemarkeerd breekpunt binnen het bereik van de code die wordt uitgevoerd. De tweede control stap over de volgende functie aanroep brengt ons naar de volgende regel van de code die wordt uitgevoerd. De laatste deactive breakpoints control deactiveert de geselecteerde breekpunten. Het is een handige controle als we veel breekpunten geselecteerd hebben, en we willen een tijdje door de applicatie klikken zonder op elk breekpunt te pauzeren.
Scopes
hieronder hebben we een scopes sectie. We hebben verschillende soorten scopes: lokaal (de momenteel uitgevoerde functie), en sluitingen afhankelijk van de scope waarin we zijn (bijvoorbeeld de ouder van de momenteel uitgevoerde functie of een component). In elk van deze scopes toont de browser ons alle variabelen die daarin voorkomen.
breekpunten
het laatste gedeelte dat besproken wordt is breekpunten. Het laat zien welke breekpunten en in welke bestanden zijn gemarkeerd. Met behulp van selectievakjes kunnen we ze eenvoudig deactiveren en opnieuw activeren.
Tips nr. 2-5
- als je onveranderlijk gebruikt.js in uw project, installeer de onveranderlijke.js Object Formatter plugin en activeer het in browserinstellingen. Dit zal het debuggen van onveranderlijke objecten aanzienlijk vereenvoudigen.
- als u immutable niet gebruikt.js in uw project en u gebruikt Visual Studio Code als IDE, raden we het installeren en configureren van Debugger voor Chrome (VSC heeft geen onveranderlijke.js opmaak plugin). Het vereenvoudigt het debuggen nog verder en zorgt voor snellere code wijzigingen.
- als het tabblad Bron uw lokale bestanden niet toont, controleer dan de brontoewijzing in uw project.
- wanneer de browser stopt op een breekpunt heeft u ook toegang tot variabelen in de console.
React Developer Tools
React Developer Tools zijn ook nuttige oplossingen. Met dergelijke tools kunt u eenvoudig de React boomstructuur in uw project, de toestanden en rekwisieten in de component bekijken. De Selecteer een element in de pagina om het te inspecteren functie is krachtig, vooral als je het hele project niet kent. Het helpt u bij het vinden van de component die u nodig hebt om bij te werken.
Tip nr. 6
Als u Vue gebruikt.js, je kunt Hog gebruiken.js devtools. De extensie heeft vergelijkbare functies en toegang tot Vuex (het redux equivalent in react).
Redux DevTools
Als u Redux gebruikt in uw project, is Redux DevTools een must-have. Met een dergelijke oplossing kunt u de volledige stroom van acties, statuswijzigingen, payload volgen en het huidige archief bekijken na elke uitgevoerde actie. Als iets niet werkt zoals we aannemen, en alles lijkt prima in de code, is het de moeite waard om te overwegen welke acties zijn dispatching, met welke payload. Soms zijn er eenvoudige fouten zoals het kopiëren van de constante van de bovenstaande actie, hernoemen zonder de waarde te veranderen, en dan iets heel anders aan te roepen. Hieronder staat een gif met de belangrijkste Redux DevTools functies.
Tip nr. 7
als uw toepassing een groot aantal acties uitvoert, werkt de extensie mogelijk niet goed omdat er onvoldoende geheugen is om zoveel acties te verwerken. U kunt proberen om het te configureren in de extensie opties (in dit geval, de maxAge optie.)
Fiddler
de laatste tool die we willen introduceren is Fiddler. De tool is gemaakt om het netwerkverkeer te beheren. Het is uiterst nuttig wanneer we enkele productie bugs hebben en we kunnen de productiegegevens niet kopiëren naar een lagere omgeving om lokaal te debuggen. In een dergelijke situatie, om toegang te hebben tot productiegegevens in de lokale omgeving, stellen we het verkeer in het tabblad AutoResponder. Wanneer u de pagina opent, in plaats van het JS-bestand van de server te downloaden, verbindt Fidler ons lokaal gebouwde productiebestand. Verdere debugging wordt gedaan in de Chrome Dev tools Source tab. Hieronder is een screenshot met de instelling om verkeer om te leiden naar het lokale bestand. Het programma staat ook mock endpoints toe.
Tip nr. 8
Als u mocks van eindpunten op een eenvoudige en snelle manier wilt maken, kunt u een mock moon-programma gebruiken.
samenvatting van een agile debugging van een webapplicatie
voor velen van ons wordt het debugproces van een webapplicatie geassocieerd met hoofdpijn en lange uren achter de computer. Dit proces kan echter worden ingekort en aangenamer worden gemaakt als u over de juiste tools en knowhow beschikt om ze te gebruiken. Vaak zijn ze binnen handbereik en gratis. We deelden met u de belangrijkste en handigste tools die we dagelijks gebruiken.