Förstå JavaScript (verkligen) Del 2 | Felsökning


Developer Tools

Ofta, när JavaScript-kod innehåller fel, så händer ingenting, dvs. det finns inga felmeddelanden och du kommer inte att få några ledtrådar att söka efter fel. Att söka efter fel i programmeringskod kallas för avlusning eller debugging (vilket inte är lätt). Som tur är, har alla moderna webbläsare en inbyggd avlusare för JavaScript (och andra språk) som kan slås på och av, vilket tvingar undantag (error) att rapporteras. Det finns som sagt en avlusare i varje modern webbläsare, vilket tar oss till frågan; Vilken skaman använda? Tja, det är lite upp till var och en men dom populäraste (och enligt mig dom bästa) är:

 

TIPS! Du kan flytta Chrome Developer tools från sidan till botten och tvärtom genom att klicka på ikonerna:

Flytta Developer Tools

Flytta Developer Tools genom att klicka på ikonerna


Basen

Vi börjar med att skapa ett HTML-dokument och en JavaScript-fil och fyller i lite kod.

HTML index.html:

JavaScript script.js:


”use strict”

Du kanske märkte en aningen udda syntax i JavaScript filen där jag skrev ”use strict”. Det betyder (strikt läge) och definierar att JavaScript koden ska köras i strict mode/strikt läge, vilket innebär t.ex. att du kan inte använda odeklarerade variabler, vilket annars skulle ge resultatet undefined. Äldre webbläsare som inte förstår vad det betyder skapar istället en variabel av”use strict”, som då blir utan namn vilket en variabel inte behöver ha. Den försvinner istället direkt efter att den skapats och skapar därför inga undantag.

Följande skulle resultera i undantag (error) om strikt läge är på:

Eller lokal strikt läge, vilket deklareras i funktion:

Så, varför skulle man vilja använda strikt läge? Det gör det enklare att skriva ”säker” JavaScript kod. Strikt läge förändrar tidigare accepterat ”dålig syntax” till riktiga undantag/error.

Som ett exempel, i normal JavaScript, när du skriver ett variabelnamn annorlunda, skapas det en ny global variabel. I strikt läge, kommer detta att generera ett felmeddelande, vilket gör det omöjligt att oavsiktligt skapa en global variabel.

Du kan läsa mer om strict mode W3C:s hemsida om ”use strict”.


Pretty print

Pretty print är en mycket användbar funktion i Chrome Developer Tools som tillåter dig att från minifierad kod (som är skriven på en rad som t.ex. jQuery m.fl.) skapa en formaterad variant:

Pretty print

Pretty print aktiveras genom att man klickar på klammrarrna

…och resultatet blir så här:

Pretty print resultat

Pretty print resultat genereras till en ”ny fil” fast det är samma


 

console.log

Det enklaste sättet att se värdet för variabler är genom att använda sig av console.log() vilket skriver ut till Developer Tools ›› Console det man skriver mellan parenteserna (använd citationstecken för strängar).

Ta följande kod:

…skriver som väntat ut:


Breakpoints ›› Brytpunkter

Med en felsökare, kan man även ange brytpunkter (platser där exekvering av kod kan stoppas), och undersöka variabler medan koden körs, därefter kan man återuppta exekveringen med en Play-knapp, eller hoppa över funktions-anrop, hoppa in i nästa funktions-anrop mm.

Det finns i ett par olika varianter av brytpunkter:

  • Vanliga
  • Villkorliga

 

Vanliga Brytpunkter

Vanliga brytpunkter skapas genom att man klickar i sidofältet av scriptet i developer tools, på följande sätt:

  • Öppna developer tools genom att högerklicka och välj ”Inspect Element”.
  • Sedan klickar du på fliken ”Sources”.
  • Navigera dig sedan till script.js.

TIPS!  Om du inte ser filerna kan du behöva klicka en ikon som ser ut som på bilden nedanför.

Få fram filöversikt genom att klicka på en av ikonerna

Få fram filöversikt genom att klicka på en av ikonerna

När du klickar på script.js ser du koden till vänster om den (om avlusaren är på botten).


 

Nyckelordet ›› debugger

Nyckelord debugger stoppar exekveringen av JavaScript koden och anropar (om det finns tillgängligt) felsökningsfunktionen.

Detta har samma funktion som att sätta en brytpunkt i felsökaren. Om ingen debugger finns, har debugger uttrycket ingen effekt.

Med debugger påslagen, kommer följande kod sluta exekvera vid nyckelordet:

That’s it för den här gången, koda smart 🙂

Lämna en kommentar

E-postadressen publiceras inte. Obligatoriska fält är märkta *