JavaScript debugging


Indholdsfortegnelse

    Vis indholdsfortegnelse


Der kan (vil) ske fejl, hver gang du skriver en ny computerkode.


Kodefejlfinding

Programmeringskoden kan indeholde syntaksfejl eller logiske fejl.

Mange af disse fejl er svære at diagnosticere.

Ofte, når programmeringskoden indeholder fejl, sker der ikke noget. Der er ingen fejlmeddelelser, og du får ingen indikationer, hvor du skal søge efter fejl.

At søge efter (og rette) fejl i programmeringskoden kaldes kodefejlfinding.


JavaScript debuggere

Debugging er ikke let. Men heldigvis har alle moderne browsere en indbygget JavaScript debugger.

Indbyggede debuggere kan tændes og slukkes, hvilket tvinger fejl, der skal rapporteres til brugeren.

Med en debugger kan du også indstille breakpoints (steder, hvor kodeudførelse kan stoppes), og undersøge variabler, mens koden udføres.

Normalt (følg ellers trinene nederst på denne side), aktiverer du fejlretning i din browser med F12-tasten, og vælg "Konsol" i fejlfindingsmenuen.


console.log()-metoden

Hvis din browser understøtter fejlretning, kan du bruge console.log() til at vis JavaScript-værdier i fejlfindingsvinduet:

Eksempel

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>

<p>Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu.</p>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html> 

Tip: Læs mere om metoden console.log() i vores JavaScript-konsolreference.


Indstilling af brudpunkter

I debugger-vinduet kan du indstille brudpunkter i JavaScript-koden.

Ved hvert brudpunkt stopper JavaScript med at udføre og lader dig undersøge JavaScript-værdier.

Efter at have undersøgt værdier, kan du genoptage udførelsen af kode (typisk med en afspilningsknap).



Debugger-søgeordet

Søgeordet debugger stopper udførelsen af JavaScript, og kalder (hvis tilgængelig) fejlfindingsfunktionen.

Dette har samme funktion som at indstille et breakpoint i debuggeren.

Hvis der ikke er nogen debugging tilgængelig, har debugger-sætningen ingen effekt.

Med debuggeren slået til, stopper denne kode med at køre før den udfører den tredje linje.

Eksempel

let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Debugger</h2>

<p id="demo"></p>

<p>With the debugger turned on, the code below should stop executing before it executes the third line.</p>

<script>
let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Store browseres fejlfindingsværktøjer

Normalt aktiverer du debugging i din browser med F12, og vælger "Konsol" i fejlfindingsmenuen.

Ellers skal du følge disse trin:

Chrome

  • Åbn browseren.

  • Fra menuen skal du vælge "Flere værktøjer".

  • Fra værktøjer skal du vælge "Udviklerværktøjer".

  • Til sidst skal du vælge Konsol.

Firefox

  • Åbn browseren.

  • Vælg "Webudvikler" i menuen.

  • Til sidst skal du vælge "Webkonsol".

Edge

  • Åbn browseren.

  • Fra menuen skal du vælge "Udviklerværktøjer".

  • Til sidst skal du vælge "Konsol".

Opera

  • Åbn browseren.

  • Vælg "Udvikler" i menuen.

  • Fra "Udvikler" skal du vælge "Udviklerværktøjer".

  • Til sidst skal du vælge "Konsol".

Safari

  • Gå til Safari, Præferencer, Avanceret i hovedmenuen.

  • Marker "Aktiver Vis udviklingsmenu i menulinjen".

  • Når den nye mulighed "Udvikl" vises i menuen:
    Vælg "Vis fejl Konsol".


Vidste du?

Debugging er processen med at teste, finde og reducere fejl (fejl) i computerprogrammer.
Den første kendte computerfejl var en rigtig fejl (et insekt), der sad fast i elektronikken.