JavaScript-felsökning


Innehållsförteckning

    Visa innehållsförteckning


Fel kan (kommer) hända varje gång du skriver ny datorkod.


Kodfelsökning

Programmeringskoden kan innehålla syntaxfel eller logiska fel.

Många av dessa fel är svåra att diagnostisera.

Ofta händer ingenting när programmeringskoden innehåller fel. Det finns inga felmeddelanden och du får inga indikationer på var du ska söka efter fel.

Att söka efter (och åtgärda) fel i programmeringskoden kallas kodfelsökning.


JavaScript-felsökare

Felsökning är inte lätt. Men lyckligtvis har alla moderna webbläsare en inbyggd JavaScript-felsökare.

Inbyggda debuggers kan slås på och av, vilket gör att fel rapporteras till användaren.

Med en debugger kan du också ställa in brytpunkter (platser där kodexekvering kan stoppas), och undersök variabler medan koden körs.

Normalt (följ annars stegen längst ner på denna sida) aktiverar du felsökning i din webbläsare med F12-tangenten och välj "Console" i felsökningsmenyn.


Metoden console.log()

Om din webbläsare stöder felsökning kan du använda console.log() för att visa JavaScript-värden i felsökningsfönstret:

Exempel

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

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

</body>
</html>

Prova själv →

<!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> 

Tips: Läs mer om metoden console.log() i vår JavaScript-konsolreferens.


Ställa in brytpunkter

I felsökningsfönstret kan du ställa in brytpunkter i JavaScript-koden.

Vid varje brytpunkt slutar JavaScript att köras och låter dig undersöka JavaScript-värden.

Efter att ha undersökt värden kan du återuppta exekveringen av kod (vanligtvis med en uppspelningsknapp).



Sökordet för felsökning

Nyckelordet debugger stoppar körningen av JavaScript, och anropar (om tillgänglig) felsökningsfunktionen.

Detta har samma funktion som att ställa in en brytpunkt i debuggern.

Om ingen felsökning är tillgänglig har felsökningssatsen ingen effekt.

Med debuggern påslagen kommer den här koden att sluta köras innan den utför den tredje raden.

Exempel

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

Prova själv →

<!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>

Stora webbläsares felsökningsverktyg

Normalt aktiverar du felsökning i din webbläsare med F12, och väljer "Konsoll" i felsökningsmenyn.

Följ annars dessa steg:

Krom

  • Öppna webbläsaren.

  • Från menyn väljer du "Fler verktyg".

  • Från verktyg, välj "Utvecklarverktyg".

  • Välj slutligen Konsol.

Firefox

  • Öppna webbläsaren.

  • Välj "Webbutvecklare" i menyn.

  • Välj slutligen "Webbkonsol".

Kant

  • Öppna webbläsaren.

  • Välj "Utvecklarverktyg" i menyn.

  • Välj slutligen "Konsoll".

Opera

  • Öppna webbläsaren.

  • Välj "Utvecklare" i menyn.

  • Från "Utvecklare", välj "Utvecklarverktyg".

  • Välj slutligen "Konsoll".

Safari

  • Gå till Safari, Inställningar, Avancerat i huvudmenyn.

  • Markera "Aktivera Visa utvecklingsmeny i menyraden".

  • När det nya alternativet "Utveckla" visas i menyn:
    Välj "Visa fel Trösta".


Visste du?

Felsökning är processen att testa, hitta och minska buggar (fel) i datorprogram.
Den första kända datorbuggen var en riktig bugg (en insekt) som satt fast i elektroniken.