JavaScript
felsökning

brytpunkter

Breakpoints pausar ditt program när körningen når en viss punkt. Du kan sedan gå igenom programmet rad för rad, observera dess körning och kontrollera innehållet i dina variabler.

Det finns tre sätt att skapa brytpunkter.

1. Från kod med debugger; påstående.
2. Från webbläsaren med hjälp av utvecklarverktygen.
3. Från en integrerad utvecklingsmiljö (IDE).

Debugger-uttalande

Du kan placera en debugger; uttal var som helst i din JavaScript-kod. När JS-tolkaren når den raden kommer den att stoppa skriptkörningen, så att du kan inspektera variabler och gå igenom din kod.

Utvecklarverktyg

Det andra alternativet är att lägga till en brytpunkt direkt i koden från webbläsarens utvecklingsverktyg.

Öppna utvecklarverktygen

Chrome eller Firefox

1. Tryck på F12 för att öppna utvecklarverktygen
2. Byt till fliken Källor (Chrome) eller fliken Debugger (Firefox)
3. Tryck på Ctrl + P och skriv namnet på din JavaScript-fil
4. Tryck på Enter för att öppna den.

Internet Explorer eller Edge

1. Tryck på F12 för att öppna utvecklarverktygen
2. Byt till fliken Debugger.
3. Använd mappikonen nära det övre vänstra hörnet av fönstret för att öppna ett fönster för val av filer; du kan hitta din JavaScript-fil där.

Safari

1. Tryck på Kommando + Alternativ + C för att öppna utvecklarverktyg
2. Byt till fliken Resurser
3. Öppna mappen "Skript" på panelen på vänster sida
4. Välj din JavaScript-fil.

Lägga till en brytpunkt från utvecklarverktygen

När du har öppnat din JavaScript-fil i Developer Tools kan du klicka på ett radnummer för att placera en brytpunkt. Nästa gång ditt program körs kommer det att pausa där.

Obs om Minifierade källor: Om din källa är minifierad kan du Pretty Print den (konvertera till läsbart format). I Chrome görs detta genom att klicka på {} -knappen i det nedre högra hörnet av källkodvisaren.

Idus

Visual Studio Code (VSC)

VSC har inbyggt stöd för felsökning av JavaScript.

1. Klicka på felsökningsknappen till vänster eller Ctrl + Skift + D
2. Om det inte redan är gjort, skapa en launch.json ( launch.json ) genom att trycka på kugghjulsikonen.
3. Kör koden från VSC genom att trycka på den gröna uppspelningsknappen eller tryck på F5 .

Lägga till en brytpunkt i VSC

Klicka bredvid radnumret i din JavaScript-källfil för att lägga till en brytpunkt (den kommer att markeras röd). Klicka på den röda cirkeln igen om du vill ta bort brytpunkten.

Tips: Du kan också använda de villkorade brytpunkterna i webbläsarens dev-verktyg. Dessa hjälper till att hoppa över onödiga pauser i körningen. Exempel scenario: du vill undersöka en variabel i en slinga exakt vid ^femte iterationen.

Gå igenom koden

När du har pausat körningen på en brytpunkt kanske du vill följa exekveringen rad för rad för att se vad som händer. Öppna webbläsarens utvecklingsverktyg och leta efter ikonerna för exekveringskontroll. (Det här exemplet använder ikonerna i Google Chrome, men de kommer att vara liknande i andra webbläsare.)

Resume: Avbryt körningen. Shorcut: F8 (Chrome, Firefox)

Steg över: Kör nästa rad med kod. Om den raden innehåller ett funktionssamtal, kör hela funktionen och gå till nästa rad istället för att hoppa till var funktionen definieras. Genväg: F10 (Chrome, Firefox, IE / Edge), F6 (Safari)

Steg in i: Kör nästa kodrad. Om den raden innehåller ett funktionssamtal, hoppa till funktionen och pausa där. Genväg: F11 (Chrome, Firefox, IE / Edge), F7 (Safari)

Steg ut: Kör resten av den aktuella funktionen, hoppa tillbaka till där funktionen kallades från och pausa vid nästa uttalande där. Genväg: Shift + F11 (Chrome, Firefox, IE / Edge), F8 (Safari)

Använd dessa tillsammans med Call Stack , som kommer att berätta vilken funktion du för närvarande är inne i, vilken funktion som kallas den funktionen och så vidare.

Se Googles guide om "Hur man går igenom koden" för mer information och råd.

Länkar till dokumentation för genvägsnyckel för webbläsare:

• Krom
• Firefox
• IE
• Kant
• Safari

Pausar körningen automatiskt

I Google Chrome kan du pausa körningen utan att behöva placera brytpunkter.

Paus vid undantag: Medan den här knappen är påslagen, om ditt program träffar ett obehandlat undantag, kommer programmet att pausa som om det hade träffat en brytpunkt. Knappen finns nära Exekveringskontroller och är användbar för att hitta fel.

Du kan också pausa körningen när en HTML-tagg (DOM-nod) ändras eller när dess attribut ändras. För att göra det, högerklicka på DOM-noden på fliken Elements och välj "Break on ...".

Interaktiva tolkvariabler

Observera att dessa bara fungerar i utvecklarverktygen för vissa webbläsare.

$_ ger dig värdet på vilket uttryck som senast utvärderades.

"foo"             // "foo"
$_                // "foo"

$0 avser DOM-elementet som för närvarande är valt i inspektören. Så om <div id="foo"> markeras:

$0                      // <div id="foo">
$0.getAttribute('id')   // "foo"

$1 hänvisar till det tidigare valda elementet, $2 till det valda före det, och så vidare för $3 och $4 .

För att få en samling element som matchar en CSS-väljare använder du $$(selector) . Detta är i huvudsak en genväg för document.querySelectorAll .

var images = $$('img');  // Returns an array or a nodelist of all matching elements

¹ _{alias till antingen document.getElementById eller document.querySelector}

Elementinspektör

Klicka på Välj ett element på sidan för att inspektera det i det övre vänstra hörnet på fliken Element i Chrome eller Inspektör-fliken i Firefox, tillgängligt från Developer Tools, och klicka sedan på ett element på sidan markerar elementet och tilldelar det till $0 variabel .

Elementinspektör kan användas på olika sätt, till exempel:

1. Du kan kontrollera om din JS manipulerar DOM som du förväntar dig att göra det,
2. Du kan lättare felsöka din CSS när du ser vilka regler som påverkar elementet
   (Fliken Stilar i Chrome)
3. Du kan leka med CSS och HTML utan att ladda om sidan.

Chrome kommer också ihåg de fem senaste valen på fliken Element. $0 är det aktuella valet, medan $1 är det tidigare valet. Du kan gå upp till $4 . På så sätt kan du enkelt felsöka flera noder utan att ständigt byta val till dem.

Du kan läsa mer på Google Developers .

Använd nybyggare och brev för att hitta vad som förändrade en egenskap

Låt oss säga att du har ett sådant objekt:

var myObject = {
    name: 'Peter'
}

Senare i din kod försöker du komma åt myObject.name och du får George istället för Peter . Du börjar undra vem som har ändrat det och var exakt det har ändrats. Det finns ett sätt att placera en debugger (eller något annat) på varje set (varje gång någon gör myObject.name = 'something' ):

var myObject = {
    _name: 'Peter',
    set name(name){debugger;this._name=name},
    get name(){return this._name}
}

Observera att vi döpte name till _name och vi kommer att definiera en setter och en getter för name .

set name är setteren. Det är en söt plats där du kan placera debugger , console.trace() eller något annat du behöver för felsökning. Sättaren ställer in värdet för namn i _name . Getter ( get name delen) kommer att läsa värdet därifrån. Nu har vi ett fullt funktionellt objekt med felsökningsfunktioner.

Men för det mesta är objektet som förändras inte under vår kontroll. Lyckligtvis kan vi definiera setters och getters på befintliga objekt för att felsöka dem.

// First, save the name to _name, because we are going to use name for setter/getter
otherObject._name = otherObject.name;

// Create setter and getter
Object.defineProperty(otherObject, "name", {
    set: function(name) {debugger;this._name = name},
    get: function() {return this._name}
});

Kolla in nybörjare och getters på MDN för mer information.

Webbläsarsupport för seters / getters:

Bryt när en funktion kallas

För namngivna (icke-anonyma) funktioner kan du bryta när funktionen körs.

debug(functionName);

Nästa gång functionName funktionen körs avbryter felsökaren på sin första rad.

Använda konsolen

I många miljöer har du tillgång till ett globalt console som innehåller några grundläggande metoder för att kommunicera med standardutmatningsenheter. Vanligtvis kommer detta att vara webbläsarens JavaScript-konsol (se Chrome , Firefox , Safari och Edge för mer information).

// At its simplest, you can 'log' a string
console.log("Hello, World!");

// You can also log any number of comma-separated values
console.log("Hello", "World!");

// You can also use string substitution
console.log("%s %s", "Hello", "World!");

// You can also log any variable that exist in the same scope
var arr = [1, 2, 3];
console.log(arr.length, this);

Du kan använda olika konsolmetoder för att markera din produktion på olika sätt. Andra metoder är också användbara för mer avancerad felsökning.

För mer dokumentation, information om kompatibilitet och instruktioner om hur du öppnar webbläsarens konsol, se konsolens ämne.

Obs! Om du behöver stödja IE9, ta bort antingen console.log eller radera dess samtal enligt följande, eftersom console är odefinierad tills utvecklarverktygen öppnas:

if (console) { //IE9 workaround
    console.log("test");
}