Foutopsporing in JavaScript in browser (met voorbeelden)

In deze zelfstudie leert u aan de hand van voorbeelden over debuggen in JavaScript.

U kunt en zult fouten tegenkomen tijdens het schrijven van programma's. Fouten zijn niet per se slecht. In feite helpen ze ons meestal problemen met onze code te identificeren. Het is essentieel dat u weet hoe u uw code moet debuggen en fouten moet herstellen.

Foutopsporing is het proces van het onderzoeken van het programma, het vinden van de fout en het oplossen ervan.

Er zijn verschillende manieren waarop u uw JavaScript-programma kunt debuggen.

1. Console.log () gebruiken

U kunt de console.log()methode gebruiken om de code te debuggen. U kunt de waarde die u wilt inchecken doorgeven aan de console.log()methode en controleren of de gegevens correct zijn.

De syntaxis is:

 console.log(object/message);

U kunt het object doorgeven console.log()of gewoon een berichtstring.

In de vorige tutorial hebben we de console.log()methode gebruikt om de uitvoer af te drukken. U kunt deze methode echter ook gebruiken voor foutopsporing. Bijvoorbeeld,

 let a = 5; let b = 'asdf'; let c = a + b; // if you want to see the value of c console.log(c); // then do other operations if(c) ( // do something )

Door console.log()methode in de browser te gebruiken, wordt de waarde in het debuggervenster geopend.

Werking van de methode console.log () in de browser

Het console.log()is niet specifiek voor browsers. Het is ook beschikbaar in andere JavaScript-engines.

2. Met behulp van debugger

Het debuggersleutelwoord stopt de uitvoering van de code en roept de foutopsporingsfunctie op.

Het debuggeris beschikbaar in bijna alle JavaScript-engines.

Laten we een voorbeeld bekijken,

 let a = 6; let b = 9; let c = a * b; // stops the execution debugger; console.log(c);

Laten we eens kijken hoe u debugger in een Chrome-browser kunt gebruiken.

Werking van debugger in de browser

Het bovenstaande programma pauzeert de uitvoering van het programma in de regel met de debugger.

U kunt dan de stroomcontrole hervatten nadat u het programma hebt bekeken.

De rest van de code wordt uitgevoerd wanneer u het script hervat door op play in de console te drukken.

Werking van debugger in de browser

3. Onderbrekingspunten instellen

U kunt onderbrekingspunten voor JavaScript-code instellen in het foutopsporingsvenster.

JavaScript stopt met uitvoeren bij elk breekpunt en laat u de waarden onderzoeken. Vervolgens kunt u de uitvoering van code hervatten.

Laten we een voorbeeld bekijken door een breekpunt in te stellen in de Chrome-browser.

Werken met breekpunten in de browser

U kunt overal in de code onderbrekingspunten instellen via de ontwikkelaarstool.

Het instellen van breakpoints is vergelijkbaar met het plaatsen van een debugger in de code. Hier stelt u gewoon breakpoints in door op het regelnummer van de broncode te klikken in plaats van handmatig de debugger-functie aan te roepen.

In de bovenstaande methoden hebben we de Chrome-browser gebruikt om de foutopsporingsprocessen voor de eenvoud weer te geven. Het is echter niet uw enige optie.

Alle goede IDE's bieden u een manier om de code te debuggen. Het foutopsporingsproces kan een beetje anders zijn, maar het concept achter foutopsporing is hetzelfde.

Interessante artikelen...