Debuggen Javascript Chrome

ast Python module | base64 Python module | code Python module | COM PHP module | Ev PHP module | File handling | gc Python module | html Python module | http Python module | imp Python module | inspect Python module | io Python module | JavaScript | os Python module | PS PHP module | Python Development | Python functions | re Python module | site Python module | StackOverflow | struct Python module | test Python module | time Python module | UI PHP module

Michael Zippo

Zelfs voor professionals is coderen niet eenvoudig. Dit is waarschijnlijk de reden waarom ontwikkelaars veel tijd besteden aan het zoeken naar bugs in hun code. Soms is een bug duidelijk, waardoor het hele programma in één keer crasht. Andere keren is een bug heel subtiel en produceert hij mooie uitvoer die altijd fouten bevat.

Hoe contra-intuïtief het ook klinkt, voor de hand liggende bugs zijn beter omdat ze gemakkelijker te vinden zijn. Een stiekeme bug kan jarenlang in alledaagse software op de loer liggen.

Bekijk het zo: als je in een gebouw zou zijn dat langzaam volliep met gifgas, zou je willen dat het gas geurloos is , smaakloos en kleurloos, of fel paars en ruikend naar poeder. cannon?

Debuggen is een cruciale stap in het ontwikkelingsproces , er zijn veel tools beschikbaar om dit te doen. Vandaag gaan we het hebben over het debuggen van JavaScript in Chrome. Javascript is verreweg een van de meest populaire talen in het algemeen en misschien wel de meest populaire taal voor webontwikkeling. Evenzo is Chrome een van de meest gebruikte webbrowsers.

Als iemand die binnenkort een veelgevraagde webontwikkelaar , is het een goed idee om vertrouwd te raken met JavaScript-foutopsporing met Chrome. Ik moedig u aan om deze elegante voorbeeldwebpagina > te volgen speciaal gemaakt om foutopsporing te oefenen.

Het Bronpaneel gebruiken

Chrome wordt geleverd met een reeks krachtige tools waarmee ontwikkelaars de broncode van een website kunnen inspecteren, inclusief HTML, CSS en Javascript.

Dit is een geweldige manier om de code van uw favoriete websites te lezen en te leren hoe u fouten kunt opsporen.

Neem de tour

Vanaf 2019 en de nieuwste versie van Chrome is toegang tot ontwikkelaarstools net zo eenvoudig als naar Beeld -> ontwikkelaar -> Hulpprogramma`s ontwikkelen in het bovenste browsermenu op het scherm. Dit opent het Chrome Developers Panel met zijn vele handige tabbladen.

Op het tabblad "Elementen" kunt u bladeren door de HTML en JavaScript die deel uitmaken van de webpagina. Het tabblad "Console" geeft je ruimte om te sleutelen aan JavaScript. Open de console voor de voorbeeldpagina die in de vorige sectie is gelinkt en typ console.log (`hallo`). Deze JavaScript-opdracht zou in uw browser moeten worden uitgevoerd.

Het tabblad `Bronnen` toont u de daadwerkelijke inhoud van de bronbestanden van de pagina en biedt u een manier om onderbrekingspunten in te stellen en de aanroepstack te inspecteren.

Breekpunten en debuggers ;

Samen met afdrukinstructies zijn onderbrekingspunten een van de basistechnieken die door ontwikkelaars worden gebruikt voor foutopsporing.

Het definiëren van een onderbrekingspuntafsluiting in de Chrome-console is eenvoudig: klik gewoon op het nummer éro Ik was van de regel die u interesseert Een breekpunt is een plaats waar de code automatisch stopt bij het uitvoeren ervan. Hierdoor kunt u alles inspecteren wat er tot nu toe is gebeurd, inclusief zaken als de huidige waarde van elke variabele en eventuele transformaties die hebben plaatsgevonden.

Breekpunten zijn een uitstekende manier om de voortgang van uw code om te zien of er iets mis is gegaan.

We kunnen hetzelfde effect handmatig bereiken door de debugger te plaatsen; in onze code waar we het foutopsporingsproces willen starten.

Door meerdere onderbrekingspunten in te stellen, kunnen we een close-up bekijken van alles wat onze code doet, waardoor het veel gemakkelijker wordt om fouten op te sporen.

Hoewel dit zeker niet alles is wat je nodig hebt om de kunst van het debuggen onder de knie te krijgen, is het een mooi pluspunt. De meest correcte codecorrectie is om heel geduldig en heel duidelijk na te denken over wat je wilde met je code te doen en dit te vergelijken met wat je feitelijk zei in je code. . ;