Moderne JavaScript-foutopsporing. Fout twee: taaldefinitieprobleem. Voorwaardelijke breekpunten

Hallo! Laten we, als we verdergaan met dit onderwerp, het hebben over het debuggen van scripts met behulp van de browser. Laten we bijvoorbeeld het meeste nemen beste browser op aarde - Chroom.

Dergelijke tools zijn in principe in elke browser beschikbaar, en als je bedenkt dat de meeste browsers op dezelfde engine als Chrome draaien, dan zal er in principe niet veel verschil zijn. Firefox is ook erg goed met zijn Firebug-tool.

Algemeen overzicht van het paneel Bronnen

Start de Chrome-browser.

Druk op F12 en de Developer Tools worden gestart.

Ga naar het tabblad Bron

Er zijn hier 3 zones:

Regio bronbestanden. Het bevat alle projectbestanden
Tekstgebied. Dit gebied bevat de tekst van het bestand
Gebied van informatie en controle. We zullen later over haar praten

Bij het debuggen is het gebied met de bronbestanden in de regel niet nodig, dus u kunt het verbergen met de knop.

Algemene bedieningsknoppen

3 meest gebruikte bedieningsknoppen:

Formaat Met deze knop kunt u de code formatteren. Mogelijk hebt u deze nodig als u de code van iemand anders wilt formatteren. Troosten Erg belangrijke knop door erop te klikken, wordt de console geopend. U kunt in de console verschillende opdrachten en operatoren in JavaScript invoeren. Raam In het geval van een groot stuk code kunt u de code in een apart venster openen.

Breekpunten

Laten we het pow.js-bestand als voorbeeld bekijken. Als u op een regel in dit bestand klikt, wordt er een breekpunt op die regel geplaatst.

Het zou er ongeveer zo uit moeten zien:

Een breekpunt wordt ook wel een breekpunt genoemd, wat meer een jargon is dat in onze taal is opgenomen en letterlijk ook een breekpunt betekent.

In de code waarin je een breekpunt hebt gemaakt, kun je bij elke stap naar de waarden van variabelen kijken en deze in het algemeen op alle mogelijke manieren volgen.

Breekpuntinformatie verschijnt op het tabblad Breekpunten.

Het tabblad Breekpunten is erg handig als de code erg groot is. Hiermee kunt u:

Ga snel naar de plaats in de code waar het breekpunt is ingesteld met een simpele klik naar tekst.
Schakel een breekpunt tijdelijk uit door op het selectievakje te klikken.
Verwijder snel een breekpunt door met de rechtermuisknop op de tekst te klikken en Verwijderen te selecteren.

Enkele extra functies

Een breekpunt kan ook rechtstreeks vanuit een script worden geactiveerd met behulp van de debugger-opdracht: function pow(x, n) ( ... debugger; //<-- отладчик остановится тут... }

Door met de rechtermuisknop op een regelnummer in pow.js te klikken, kunt u een zogenaamd voorwaardelijk breekpunt maken, d.w.z. stel een voorwaarde in waaronder het breekpunt wordt geactiveerd.

Stop en kijk rond

Omdat onze functie gelijktijdig wordt uitgevoerd met het laden van de pagina, is de eenvoudigste manier om de JavaScript-foutopsporing te activeren, deze opnieuw te laden. Druk hiervoor op F5. En tegelijkertijd wordt de uitvoering van het script gestopt op de zesde regel.

Let op de informatietabbladen:

Kijk Uitdrukkingen– hier kunt u de huidige waarde zien van de variabelen die u in het script controleert.
Bel Stapel– toont de call-stack - dit zijn alle oproepen die naar deze coderegel hebben geleid.
Bereikvariabelen– toont variabelen. Bovendien toont het zowel globale als lokale variabelen.

Uitvoeringsbeheer

Laten we nu het script uitvoeren en de werking ervan volgen. Let op het paneel bovenaan, daar zitten 6 knoppen, waarvan we de werking zullen bekijken.

– ga door met de uitvoering, of druk op de F8-toets.

Deze knop zet de uitvoering van het script voort. Op deze manier kunnen we ons script doorlopen alsof het in een browser draait.

– een stap zetten zonder naar de functies te gaan, of de F10-toets.

Voer één stap van het script uit zonder naar de functie te gaan.

– ga een stap binnen de functie, toets F11.

Voert één stap van het script uit en gaat tegelijkertijd naar de functie.

– uitvoeren totdat de huidige functie wordt verlaten, toets Shift+F11.

voert de volledige code uit die in de functie zit.

– schakel alle breekpunten uit/in.

Deze knop schakelt eenvoudigweg alle breekpunten uit en, wanneer u deze opnieuw indrukt, weer inschakelt.< 6; i++) { console.log("значение", i); }

– automatische stop in-/uitschakelen wanneer er een fout optreedt.

Deze knop is erg handig bij het debuggen en stelt u in staat het automatisch stoppen in of uit te schakelen wanneer er een fout optreedt.

Het foutopsporingsproces zelf bestaat uit het stap voor stap doorlopen van het programma en het observeren van de waarden van de variabelen.

Browserconsole

Bij het debuggen van scriptcode kan het handig zijn om naar het tabblad Console te gaan en te kijken of daar fouten voorkomen. U kunt ook informatie naar de console uitvoeren met behulp van console.log().

Bijvoorbeeld:

// het resultaat zal zichtbaar zijn in de console voor (var i = 0; i

De console is beschikbaar in elke browser
Consolefouten
Bewaak variabelen, voer opdrachten uit in de console, enz.

In de ontwikkelaarstools zijn er andere tabbladen, zoals met Elements kunt u de HTML-code van de pagina bekijken, de tijdlijn laat zien hoeveel bestanden de browser downloadt en hoeveel tijd dit kost. Maar deze tabbladen zijn voor ons nog niet zo interessant.

Firebug bevat een krachtige AvaScript-debugger waarmee u de uitvoering op elk moment kunt pauzeren en elke variabele op dat moment kunt bekijken. Als uw code traag is, gebruikt u een JavaScript-profiler om de prestaties te meten en snel knelpunten te vinden.

Vind gemakkelijk scripts

Veel webapplicaties bestaan uit een groot aantal bestanden, en het vinden van de te debuggen kan een routineuze en saaie taak zijn. Het scriptselectiemenu van Firebug sorteert en organiseert bestanden in een duidelijke, gemakkelijk te begrijpen lijst waarmee u elk bestand met één klik van uw vinger kunt vinden.

Pauzeer de uitvoering op elke regel

Met Firebug kunt u breekpunten instellen, die de debugger vertellen dat hij moet stoppen met het uitvoeren van het script wanneer het een bepaalde regel bereikt. Terwijl de uitvoering is opgeschort, kunt u de waarden van eventuele variabelen bekijken en objecten inspecteren.

Om een breekpunt in te stellen, klikt u op een regelnummer. Daar verschijnt een rode stip, die aangeeft dat het breekpunt is ingesteld. Klik nogmaals op de rode stip om het breekpunt te verwijderen.

Pauzeer de uitvoering alleen als...

Breekpunten kunnen problemen veroorzaken als ze te vaak worden geactiveerd. Soms willen we de uitvoering alleen pauzeren als aan bepaalde voorwaarden is voldaan. Met Firebug kunt u "voorwaardelijke" breekpunten instellen. Ze controleren een expressie die waar moet zijn om het breekpunt te laten werken.

Om een voorwaardelijk breekpunt in te stellen, klikt u eenvoudig met de rechtermuisknop op een regelnummer. Er verschijnt een bel waarin u wordt gevraagd een JavaScript-expressie in te voeren. U kunt op elk gewenst moment opnieuw met de rechtermuisknop klikken om de uitdrukking te wijzigen, of met de linkermuisknop klikken om het breekpunt te verwijderen.

Stap voor stap

Wanneer de debugger de uitvoering heeft gepauzeerd, kunt u het script stap voor stap voortzetten. Hierdoor kunt u duidelijk zien hoe het uitvoeren van een specifieke regel variabelen en objecten beïnvloedt.

U kunt de uitvoering ook voor meer dan één regel voortzetten. Selecteer "Run to this Line" in het contextmenu van de gewenste lijn om de uitvoering naar deze lijn voort te zetten.

Ik word onderbroken als ik fouten maak

U kiest niet altijd de debugger... Soms kiest de debugger u. Firebug geeft u de mogelijkheid om automatisch naar de debugger te springen wanneer er een fout optreedt, zodat u kunt onderzoeken onder welke omstandigheden het probleem zich heeft voorgedaan.

Uitgevouwen stapel

Wanneer de debugger pauzeert, toont Firebug u de call-stack, de verzameling geneste functie-aanroepen die momenteel actief zijn en wachten om terug te keren.

De call-stack wordt weergegeven door een compacte strook knoppen in het paneel, elk met de naam van een functie op de stapel. U kunt op een willekeurige knop klikken om naar de regel te springen waar de functie is gepauzeerd en vanuit de functie naar de waarden van lokale variabelen te kijken.

Expressie kijken

Bij het debuggen wilt u vaak de betekenis zien van complexe expressies of objecten die verborgen zijn in de DOM. Met Firebug kunt u een willekeurige JavaScript-expressie afdrukken, waarvan de waarde bij elke debuggerstap wordt bijgewerkt.

Vergeet bij het typen van expressies niet dat u de Tab-toets kunt gebruiken om objecteigenschappen automatisch aan te vullen.

Variabele tips

Terwijl de uitvoering is gepauzeerd, kunt u de muis over alle variabelen van de huidige functie bewegen en tooltips met waarden bekijken. Dit is een geweldige manier om de code in de gaten te houden en antwoorden te krijgen terwijl u leest.

Profiel JavaScript-prestaties

Uw webapplicatie is bijna perfect. Je hebt alle fouten uitgewerkt, je hebt een stijlvol ontwerp gemaakt en de gebruikers vinden het leuk. Slechts één probleem: sommige functies zijn traag en je weet niet zeker waarom...

Met Firebug hoeft u zich niet langer af te vragen waarom uw code traag werkt. Met behulp van de Firebug-profiler kunt u in letterlijk enkele seconden vliegen van schnitzels scheiden.

Om de profiler te gebruiken, gaat u eenvoudigweg naar het tabblad Console en klikt u op de knop "Profiel". Gebruik vervolgens uw applicatie een tijdje of herlaad de pagina en klik nogmaals op "Profiel". U ziet een gedetailleerd rapport dat laat zien welke functies zijn aangeroepen en hoe lang elke functie heeft geduurd.

Functieaanroepen registreren

Soms wordt de problematische functie zo vaak aangeroepen dat u niet elke keer naar de debugger kunt gaan. Je wilt gewoon weten wanneer het wordt aangeroepen en met welke parameters.

Om alle functieaanroepen bij te houden, klikt u eenvoudig met de rechtermuisknop op het tabblad Script en selecteert u 'Aanroepen loggen naar 'functienaam''. Ga dan naar de console en zie hoe de oproepen in het logboek verschijnen...

Ga rechtstreeks naar lijn 108

Vaak wil je duidelijk naar de gewenste regel van je script gaan. Er is niets eenvoudiger: typ gewoon het regelnummer in het snelzoekvak, waarbij u # eerst plaatst, zoals weergegeven in de linker schermafbeelding.

Dankzij de opkomst van verschillende bibliotheken zoals jQuery en Prototype heeft JavaScript de afgelopen jaren een leidende positie verworven onder de talen voor het maken van scripts voor webprojecten. De groeiende populariteit en het gebruiksgemak hebben geleid tot de opkomst van volwaardige applicaties, zoals Gmail, die duizenden JavaScript-tekenreeksen, waardoor hogere eisen worden gesteld aan het ontwikkelteam met betrekking tot het niveau van de toolvaardigheid.

Het resultaat van de toenemende complexiteit van applicaties is de behoefte aan krachtige hulpmiddelen foutopsporingstools waarmee u snel en efficiënt de oorzaak van de fout kunt vinden. Eenvoudige uitvoer van variabele waarden met behulp van een functie waarschuwing() zijn relevantie verloren.

IN deze les uitgevoerd kort overzicht mogelijkheden moderne instrumenten ontwikkelaars die het debuggen van JavaScript-code helpen verbeteren eenvoudig proces. De nadruk zal liggen op de mogelijkheden van de Chrome-browser en de Firebug-add-on voor FireFox, maar de meeste beschreven functies zijn ook beschikbaar in andere tools, zoals Dragonfly voor Opera.

Console - algemeen beeld

In de meeste ontwikkelaarsprogramma's het meest beste vriend De programmeur heeft een console. Multifunctioneel paneel dat wordt gebruikt voor het loggen van foutmeldingen, DOM-inspectie en foutopsporing JavaScript-code en vele andere taken. Afhankelijk van de browser wordt de console aangeroepen verschillende elftallen(behalve directe selectie via menu):

V Chrome-browser en Dragonfly voor Opera - Ctrl + Shift + I
Brandbug - F12

De console geeft automatisch fouten in de code weer die worden gedetecteerd tijdens de uitvoering van het script. Het bestand en de regel worden naast de fout weergegeven en als u op de fout klikt, wordt de invoerfocus naar de juiste locatie verplaatst.

We voeren de gegevens uit naar de console

De console kan niet alleen fouten in de scriptcode weergeven. Met behulp van de Console API en Command Line API kunt u de uitvoer van gegevens naar de console beheren. De bekendste en nuttig commando .log().

Bij het ontwikkelen van formuliercode is het erg handig om de waarden van de variabelen te kennen, zodat je kunt verifiëren dat de code correct werkt. Een gebruikelijke praktijk is om de functie te gebruiken waarschuwing() voor visuele inspectie. Als u deze methode gebruikt, wordt de rest van de code echter niet uitgevoerd totdat op de knop in het dialoogvenster wordt geklikt.

Een moderne oplossing is om de methode te gebruiken console.log, dat variabele waarden naar het consolepaneel stuurt:

Console.log(“Captain’s Log”); // geeft “Captain’s Log” weer in het consolepaneel

De methode kan worden gebruikt om berekende waarden uit te voeren:

Functie calcPhotos() ( total_photos_diff = total_photos - prev_total_photos; // Print variabele waarden naar de console console.log(total_photos_diff); )

Het voordeel van deze aanpak vergeleken met de manier waarop dialoog wordt gebruikt waarschuwing() is dat de uitvoering van de code niet wordt onderbroken en dat de ontwikkelaar variabele waarden meerdere keren kan afdrukken om gegevenswijzigingen in realtime te observeren.

Vart = 3, p = 1; function calcPhotos(total_photos, prev_total_photos) ( var total_photos_diff = total_photos - prev_total_photos; // Voer de waarden uit naar de console console.log(total_photos_diff); // Update de waarden t = t*1.3; p = p*1.1 ; ) setInterval(functie() ( calcPhotos(t,p); ),100);

Berichten markeren

In het bovenstaande voorbeeld zal de lus veel variabelewaarden naar de console afdrukken. Het is echter vaak handig om verschillende gegevens visueel te scheiden om op effectieve wijze plaatsen in de code te markeren die dit vereisen verhoogde aandacht. Om dergelijke problemen op te lossen, heeft de Console API verschillende methoden.

console.info(): Toont het "informatie"-pictogram en kleurt de weergegeven informatie. Deze methode handig in gebruik om te waarschuwen voor verschillende gebeurtenissen.

console.waarschuw(): Geeft een waarschuwingspictogram weer en kleurt de weergegeven informatie. Handig om te gebruiken voor informatie over parameters die de limieten overschrijden.

console.error(): Geeft een "fout"-pictogram weer en kleurt de weergegeven informatie. Handig voor het melden van fouten en kritieke omstandigheden.

Let op: gereedschap Chrome-ontwikkelaar beschikt niet over de middelen om informatie anders in de console te presenteren.

Gebruik verschillende methoden Door informatie naar de console uit te voeren, kunt u gegevens in een visuele vorm presenteren. Door te blokkeren kan de presentatie van informatie worden verbeterd. Gebruikte methode console.groep() :

// Eerste groep console.group("Fotoberekening");

console.info("Het totale verschil is nu " + total_photos_diff); console.log(total_photos_diff); console.groupEnd(); // Tweede groep console.group("Incrementele variabele");, de onderstaande afbeelding toont de weergave in Dragonfly for Opera:

De bovenstaande voorbeelden vertegenwoordigen een kleine lijst beschikbare methoden van Console-API. Er zijn nog veel meer handige methoden, die worden beschreven op de officiële Firebug-pagina.

Onderbreken van de uitvoering van het script

Het afdrukken van informatie naar de console is een nuttige functie, maar de code kan zeer snel worden uitgevoerd en toch veel variabelen bijhouden.

Om het debuggen eenvoudiger te maken, kunt u de uitvoering van de code op een bepaald punt onderbreken om toegang te krijgen tot gegevens. Hiervoor worden breekpunten gebruikt.

Werken met breekpunten

Om een breekpunt in te stellen, gaat u naar het tabblad "Scripts" en selecteert u vereist script uit de lijst. Nu zoeken we naar de regel waar we de uitvoering van het script moeten onderbreken en klikken op het veld met het regelnummer om te activeren - er verschijnt een visuele indicator. Nu laden we de pagina opnieuw en wordt de uitvoering van de code op het opgegeven punt onderbroken:

Wanneer de uitvoering wordt onderbroken, kunt u de muiscursor op een willekeurige variabele plaatsen en de debugger zal een tooltip weergeven met de huidige waarde.

U kunt vervolgens doorgaan met het uitvoeren van de code met behulp van speciale knoppen, die zich bovenaan de zijbalk bevinden:

Met de zijbalk kunt u wijzigingen in de codestatus volgen, inclusief de dynamiek van lokale en globale variabelen.

Voorwaardelijke breekpunten

Bij het debuggen van code wilt u soms de uitvoering van de code alleen stoppen als aan bepaalde voorwaarden is voldaan. Als uw script bijvoorbeeld een lus heeft die 50 milliseconden nodig heeft om elke iteratie te voltooien, zou het erg lastig zijn om het uitvoeringsproces te starten na het stoppen bij elke stap, terwijl we slechts 300 iteraties nodig hebben. Voor dergelijke gevallen zijn er voorwaardelijke interrupts.

In het voorbeeld in de afbeelding wordt de uitvoering van de code pas onderbroken als de waarde van de variabele is bereikt totaal_foto's_diff zal niet meer dan 200 zijn.

Om een voorwaardelijke interrupt te activeren, klikt u met de rechtermuisknop op het breekpunt en selecteert u "Breekpunt bewerken" om een dialoogvenster weer te geven waarin u de voorwaarden voor het genereren van de interrupt kunt bewerken.

Een breekpunt in code instellen

Het is niet altijd handig om breekpunten in te stellen met behulp van de ontwikkelaarstoolinterface in de browser. Soms is het eenvoudiger om de debugger vanuit de code uit te voeren speciaal elftal. In het onderstaande voorbeeld ziet u hoe u de uitvoering van code kunt afbreken als aan bepaalde voorwaarden is voldaan:

If (total_photos_diff > 300) (debugger; // start de debugger en onderbreekt de uitvoering van de code)

Andere manieren om de uitvoering van code te onderbreken

Naast het gebruik van een breekpunt biedt de ontwikkelaarstool ook andere opties om de uitvoering van code in verschillende gevallen te stoppen.

Stoppen wanneer DOM verandert

Als u fouten moet opsporen in een stukje code dat DOM-wijzigingen afhandelt, biedt de ontwikkelaarstool een manier om te voorkomen dat code wordt uitgevoerd wanneer een DOM-knooppunt verandert.

In het HTML-codepaneel wanneer erop wordt geklikt rechter knop met de muis op het gewenste element, kunt u de voorwaarden selecteren voor het stoppen van de code (attributen wijzigen, nakomelingen toevoegen/verwijderen, een element verwijderen) wanneer de DOM verandert. Overbelast de code en wanneer elementen veranderen, stopt de uitvoering van de code.

Stop wanneer alle of niet-verwerkte uitzonderingen optreden

Met de meeste ontwikkelaarstools kunt u de uitvoering van scripts stoppen wanneer zich uitzonderingen voordoen. IN Chroom gegeven De functionaliteit kan worden ingeschakeld via het pictogram "Pauze" op de onderste regel van de interface.

U kunt kiezen welke uitzonderingen de uitvoering van code stoppen. In het onderstaande voorbeeld ziet u één onverwerkte uitzondering en één afgehandelde uitzondering (try|catch block):

Vart = 3, p = 1; function calcPhotos(total_photos, prev_total_photos) ( var total_photos_diff = total_photos - prev_total_photos; // Eerste groep console.info("Totaal verschil is nu " + total_photos_diff); // Update waarden t = t+5; p = p+1 ; / / Onverwerkte uitzondering if (total_photos_diff > 300) ( throw 0; ) // Afgehandelde uitzondering if (total_photos_diff > 200) ( try ( $$("#nonexistent-element").hide(); ) catch(e) ( console.error(e ); ) ) ) setInterval(functie() ( calcPhotos(t,p); ),50);

Inleiding tot de oproepstapel

Als er een fout optreedt tijdens het uitvoeren van uw script, kunnen de hierboven beschreven methoden u helpen het programma te stoppen om de fout te analyseren. Maar het is niet altijd meteen duidelijk waar de reden ligt.

Wanneer de uitvoering van het script wordt onderbroken, let dan op rechter paneel, die presenteert nuttige informatie, die de call-stack bevat.

Roep stapelshows op volledige pad, wat leidde tot het punt waarop de fout optrad en de uitvoering van de code stopte.

In de onderstaande afbeelding wordt de fout opzettelijk gegenereerd in de functie incrementValues(), waardoor de code niet meer werd uitgevoerd. De ontwikkelaarstool toont de volledige call-stack, waarmee u potentieel gevaarlijke plaatsen kunt identificeren.

Conclusie

Deze les is een startpunt voor een meer gedetailleerde studie van de documentatie voor de tool die u actief wilt gebruiken.

Van tijd tot tijd maken ontwikkelaars codeerfouten. Een fout in een programma of script wordt een bug genoemd.

Het proces van het vinden en herstellen van fouten wordt debugging genoemd en is een normaal onderdeel van het ontwikkelingsproces. In deze sectie worden hulpmiddelen en technieken besproken die u kunnen helpen bij het opsporen van fouten in taken.

Foutmeldingen in IE

De eenvoudigste manier om fouten op te sporen is door foutrapportage in uw browser in te schakelen. Door standaard internet Explorer toont een foutpictogram in de statusbalk wanneer er een fout optreedt op de pagina.

Als u dubbelklikt op dit pictogram, gaat u naar een dialoogvenster met informatie over de specifieke fout.

Omdat dit pictogram gemakkelijk over het hoofd wordt gezien, Internet Explorer geeft u de mogelijkheid om automatisch een foutdialoogvenster weer te geven wanneer er een fout optreedt.

Om deze optie in te schakelen, selecteert u Extra → Internetopties → tabblad Geavanceerd. en vink ten slotte het selectievakje "Melding weergeven bij elk script" aan, zoals hieronder weergegeven -

Foutmeldingen in Firefox of Mozilla

Andere browsers, zoals Firefox, Netscape en Mozilla, sturen foutmeldingen naar een speciaal venster genaamd JavaScript-console of foutconsole. Om de console te bekijken, selecteert u Extra → Foutconsole of Webontwikkeling.

Omdat deze browsers geen visuele informatie bieden wanneer er een fout optreedt, moet u de console helaas open houden en op fouten letten terwijl uw script wordt uitgevoerd.

Foutmeldingen

Foutmeldingen weergegeven in de console of via dialoogvensters Internetvensters Explorer zijn het resultaat van zowel syntaxis- als runtimefouten. Deze foutmeldingen bevatten het regelnummer waarop de fout is opgetreden.

Als u Firefox gebruikt, kunt u op de fout klikken die beschikbaar is in de foutconsole om naar toe te gaan exacte lijn in het script met een fout.

Hoe een script te debuggen

Er zijn verschillende manieren debuggen van uw JavaScript - Gebruik JavaScript Validator

Eén manier om JavaScript-code te testen vreemde fouten- voer het door een programma dat het controleert om er zeker van te zijn dat het geldig is en dat het de officiële syntaxisregels van de taal volgt. Deze programma's worden parsers of kortweg validators genoemd en worden vaak geleverd met commerciële programma's HTML-editors en JavaScript.

De handigste validator voor JavaScript is JavaScript Lint van Douglas Crockford, die gratis beschikbaar is in JavaScript Lint van Douglas Crockford.

Bezoek eenvoudigweg deze webpagina, plak de JavaScript-code (alleen JavaScript) in het daarvoor bestemde tekstgebied en klik op de jslint-knop. Dit programma analyseert uw JavaScript-code en zorgt ervoor dat alle variabelen- en functiedefinities de juiste syntaxis volgen. Hij zal het ook controleren JavaScript-instructies, zoals if en while, zodat ze ook het juiste formaat volgen

Voeg foutopsporingscode toe aan uw programma's

U kunt de methoden alert() of document.write() in uw programma gebruiken om fouten in uw code op te sporen. Je zou bijvoorbeeld zoiets als dit kunnen schrijven:

var-foutopsporing = waar; var whoImage = "widget"; if(debugging) alert("Roept swapImage() aan met argument: " + WhichImage); var swapStatus = swapImage(welkeAfbeelding); if(debugging) alert("Verlaat swapImage() met swapStatus=" + swapStatus);

Door de inhoud en volgorde van alert() te onderzoeken zoals deze verschijnt, kunt u eenvoudig de functionaliteit van uw programma testen.

Hoe u de JavaScript-foutopsporing gebruikt

Een debugger is een applicatie waarin alle aspecten van de scriptuitvoering onder controle staan van de programmeur. Debuggers bieden fijnmazige controle over de status van een script via een interface waarmee u waarden kunt inspecteren en instellen en de uitvoeringsstroom kunt controleren.

Zodra het script in de debugger is geladen, kan het regel voor regel worden uitgevoerd of de opdracht krijgen om bij een bepaald punt te stoppen controlepunten. Wanneer de uitvoering wordt gestopt, kan de programmeur de status van het script en zijn variabelen controleren om te bepalen of er iets mis is. U kunt ook variabelen bekijken om hun waarden te wijzigen.

Gebruik veel commentaar. Met opmerkingen kunt u uitleggen waarom u het script op de manier heeft geschreven en bijzonder moeilijke delen van de code uitleggen.
Gebruik altijd inspringing om uw code gemakkelijk leesbaar te maken. Door inspringen kunt u ook gemakkelijker begin- en eindtags matchen, krullende beugels en anderen HTML-elementen en schrift.
Schrijf modulaire code. Groepeer uw uitspraken indien mogelijk in functies. Met functies kunt u groeperen bijbehorende exploitanten en test en hergebruik delen van de code met minimale inspanning.
Wees consistent in de naamgeving van uw variabelen en functies. Probeer namen te gebruiken die lang genoeg zijn om betekenisvol te zijn en de inhoud van een variabele of het doel van een functie te beschrijven.
Gebruik consistente syntaxis bij het benoemen van variabelen en functies. Met andere woorden, houd ze binnen kleine letters of binnen hoofdletter; als u de Camel-Back-notatie verkiest, gebruik deze dan consequent.
Controleer lange scripts modulair. Met andere woorden: probeer niet het hele script te schrijven voordat u een deel ervan hebt getest. Schrijf het onderdeel en voer het uit voordat je het volgende deel van de code toevoegt.
Gebruik beschrijvende namen voor variabelen en functies en vermijd het gebruik van namen die uit één teken bestaan.
Let op de citaten. Houd er rekening mee dat aanhalingstekens in paren rond tekenreeksen worden gebruikt en dat beide aanhalingstekens dezelfde stijl moeten hebben (een of twee).
Houd uw gelijktekens bij. Gebruik er geen = voor vergelijkingsdoeleinden.
Ik declareer variabelen expliciet met behulp van trefwoord var.

Dankzij de opkomst van verschillende bibliotheken zoals jQuery en Prototype heeft JavaScript de afgelopen jaren een leidende positie verworven onder de talen voor het maken van scripts voor webprojecten. De toenemende populariteit en het gebruiksgemak hebben geleid tot de opkomst van volwaardige applicaties, zoals Gmail, die duizenden regels JavaScript bevatten, waardoor er steeds hogere eisen worden gesteld aan het ontwikkelteam op het gebied van de vaardigheid van de tools.

Het resultaat van de toenemende complexiteit van applicaties is de behoefte aan krachtige debugging-tools die snel en efficiënt de oorzaak van een fout kunnen opsporen. Eenvoudige uitvoer van variabele waarden met behulp van een functie waarschuwing() zijn relevantie verloren.

Deze les biedt een kort overzicht van de mogelijkheden van moderne ontwikkelaarstools die het debuggen van JavaScript-code eenvoudiger maken. De nadruk zal liggen op de mogelijkheden van de Chrome-browser en de Firebug-add-on voor FireFox, maar de meeste beschreven functies zijn ook beschikbaar in andere tools, zoals Dragonfly voor Opera.

Console - algemeen beeld

In de meeste ontwikkelaarsprogramma's is de console de beste vriend van een programmeur. Het multifunctionele paneel wordt gebruikt voor het loggen van foutmeldingen, DOM-inspectie, het debuggen van JavaScript-code en vele andere taken. Afhankelijk van de browser wordt de console opgeroepen met verschillende opdrachten (behalve directe selectie via het menu):

in de Chrome-browser en Dragonfly voor Opera - Ctrl + Shift + I
Brandbug - F12

We voeren de gegevens uit naar de console

De console kan niet alleen fouten in de scriptcode weergeven. Met behulp van de Console API en Command Line API kunt u de uitvoer van gegevens naar de console beheren. Het meest bekende en nuttige commando .log().

Een moderne oplossing is om de methode te gebruiken console.log, dat variabele waarden naar het consolepaneel stuurt:

Console.log(“Captain’s Log”); // geeft “Captain’s Log” weer in het consolepaneel

De methode kan worden gebruikt om berekende waarden uit te voeren:

Functie calcPhotos() ( total_photos_diff = total_photos - prev_total_photos; // Print variabele waarden naar de console console.log(total_photos_diff); )

Berichten markeren

In het bovenstaande voorbeeld zal de lus veel variabelewaarden naar de console afdrukken. Het is echter vaak handig om verschillende gegevens visueel van elkaar te scheiden om gebieden in de code die meer aandacht vereisen effectief te markeren. Om dergelijke problemen op te lossen, heeft de Console API verschillende methoden.

console.info(): Toont het "informatie"-pictogram en kleurt de weergegeven informatie. Deze methode is handig om te waarschuwen voor verschillende gebeurtenissen.

console.waarschuw(): Geeft een waarschuwingspictogram weer en kleurt de weergegeven informatie. Handig om te gebruiken voor informatie over parameters die de limieten overschrijden.

console.error(): Geeft een "fout"-pictogram weer en kleurt de weergegeven informatie. Handig voor het melden van fouten en kritieke omstandigheden.

Opmerking: de Chrome Developer Tool heeft niet de mogelijkheid om informatie anders weer te geven in de console.

Door verschillende methoden te gebruiken om informatie naar de console uit te voeren, kunt u de gegevens in visuele vorm presenteren. Door te blokkeren kan de presentatie van informatie worden verbeterd. Gebruikte methode console.groep() :

// Eerste groep console.group("Fotoberekening");

In dit voorbeeld wordt informatie in de console gegroepeerd. De visuele presentatie zal variëren in verschillende browsers, de onderstaande figuur toont de weergave in Dragonfly voor Opera:

De bovenstaande voorbeelden vertegenwoordigen een kleine lijst met beschikbare methoden uit de Console API. Er zijn nog veel meer handige methoden, die worden beschreven op de officiële Firebug-pagina.

Onderbreken van de uitvoering van het script

Het afdrukken van informatie naar de console is een nuttige functie, maar de code kan zeer snel worden uitgevoerd en toch veel variabelen bijhouden.

Om het debuggen eenvoudiger te maken, kunt u de uitvoering van de code op een bepaald punt onderbreken om toegang te krijgen tot gegevens. Hiervoor worden breekpunten gebruikt.

Werken met breekpunten

Om een breekpunt in te stellen, gaat u naar het tabblad "Scripts" en selecteert u het gewenste script uit de lijst. Nu zoeken we naar de regel waar we de uitvoering van het script moeten onderbreken en klikken op het veld met het regelnummer om te activeren - er verschijnt een visuele indicator. Nu laden we de pagina opnieuw en wordt de uitvoering van de code op het opgegeven punt onderbroken:

Wanneer de uitvoering wordt onderbroken, kunt u de muiscursor op een willekeurige variabele plaatsen en de debugger zal een tooltip weergeven met de huidige waarde.

U kunt vervolgens doorgaan met het uitvoeren van de code met behulp van de speciale knoppen bovenaan de zijbalk:

Met de zijbalk kunt u wijzigingen in de codestatus volgen, inclusief de dynamiek van lokale en globale variabelen.

Voorwaardelijke breekpunten

In het voorbeeld in de afbeelding wordt de uitvoering van de code pas onderbroken als de waarde van de variabele is bereikt totaal_foto's_diff zal niet meer dan 200 zijn.

Een breekpunt in code instellen

Het is niet altijd handig om breekpunten in te stellen met behulp van de ontwikkelaarstoolinterface in de browser. Soms is het gemakkelijker om de debugger vanuit de code te starten met behulp van een speciaal commando. In het onderstaande voorbeeld ziet u hoe u de uitvoering van code kunt afbreken als aan bepaalde voorwaarden is voldaan:

If (total_photos_diff > 300) (debugger; // start de debugger en onderbreekt de uitvoering van de code)

Andere manieren om de uitvoering van code te onderbreken

Naast het gebruik van een breekpunt biedt de ontwikkelaarstool ook andere opties om de uitvoering van code in verschillende gevallen te stoppen.

Stoppen wanneer DOM verandert

Als u fouten moet opsporen in een stukje code dat DOM-wijzigingen afhandelt, biedt de ontwikkelaarstool een manier om te voorkomen dat code wordt uitgevoerd wanneer een DOM-knooppunt verandert.

Wanneer u in het HTML-codepaneel met de rechtermuisknop op het gewenste element klikt, kunt u voorwaarden selecteren voor het stoppen van de code (attributen wijzigen, onderliggende elementen toevoegen/verwijderen, een element verwijderen) wanneer de DOM verandert. Overbelast de code en wanneer elementen veranderen, stopt de uitvoering van de code.

Stop wanneer alle of niet-verwerkte uitzonderingen optreden

Met de meeste ontwikkelaarstools kunt u de uitvoering van scripts stoppen wanneer zich uitzonderingen voordoen. In Chrome kan deze functionaliteit worden ingeschakeld via het pictogram "Pauze" onderaan de interface.

U kunt kiezen welke uitzonderingen de uitvoering van code stoppen. In het onderstaande voorbeeld ziet u één onverwerkte uitzondering en één afgehandelde uitzondering (try|catch block):

Vart = 3, p = 1; function calcPhotos(total_photos, prev_total_photos) ( var total_photos_diff = total_photos - prev_total_photos; // Eerste groep console.info("Totaal verschil is nu " + total_photos_diff); // Update waarden t = t+5; p = p+1 ; / / Niet-afgehandelde uitzondering if (total_photos_diff > 300) ( throw 0; ) // Afgehandelde uitzondering if (total_photos_diff > 200) ( try ( $$("#nonexistent-element").hide(); ) catch(e) ( consolefout(e); ) ) setInterval(functie() ( calcPhotos(t,p); ),50);