Då och då gör utvecklare kodningsfel. Ett fel i ett program eller skript kallas en bugg.
Processen att hitta och åtgärda fel kallas felsökning och är en normal del av utvecklingsprocessen. Det här avsnittet diskuterar verktyg och tekniker som kan hjälpa dig att felsöka uppgifter.
Felmeddelanden i IE
Det enklaste sättet att spåra fel är att aktivera felrapportering i din webbläsare. Standard Internet Explorer visar en felikon i statusfältet när ett fel uppstår på sidan.
Om du dubbelklickar på den här ikonen kommer du till en dialogruta som visar information om det specifika felet.
Eftersom den här ikonen lätt kan förbises ger Internet Explorer dig möjligheten att automatiskt visa en dialogruta för fel när ett fel uppstår.
För att aktivera det här alternativet, välj Verktyg → Internetalternativ → fliken Avancerat. och markera till sist kryssrutan "Visa meddelande på varje skript" som visas nedan -
Felmeddelanden i Firefox eller Mozilla
Andra webbläsare, som Firefox, Netscape och Mozilla, skickar felmeddelanden till ett speciellt fönster som heter JavaScript-konsol eller Error Console. För att visa konsolen, välj Verktyg → Felkonsol eller Webbutveckling.
Tyvärr, eftersom dessa webbläsare inte tillhandahåller visuell information när ett fel uppstår bör du hålla konsolen öppen och se efter fel när ditt skript körs.
Felmeddelanden
Felmeddelanden visas i konsolen eller via dialogrutor Internet Explorer-fel är resultatet av både syntax- och körtidsfel. Dessa felmeddelanden inkluderar radnumret där felet uppstod.
Om du använder Firefox kan du klicka på det tillgängliga felet i felkonsolen för att gå till den exakta raden i skriptet med felet.
Hur man felsöker ett skript
Existera olika sätt felsöka ditt JavaScript - Använd JavaScript Validator
Ett sätt att testa JavaScript-kod för konstiga fel är att köra den genom ett program som kontrollerar den för att säkerställa att den är giltig och att den följer språkets officiella syntaxregler. Dessa program kallas parsers eller bara validatorer för kort och ofta kommer med kommersiella HTML-redigerare och JavaScript.
Den bekvämaste validatorn för JavaScript är Douglas Crockfords JavaScript Lint, som är tillgänglig gratis i Douglas Crockfords JavaScript Lint.
Besök helt enkelt den här webbsidan, klistra in JavaScript-koden (endast JavaScript) i textområdet och klicka på jslint-knappen. Detta program analyserar din JavaScript-kod och säkerställer att alla variabel- och funktionsdefinitioner följer rätt syntax. Han ska också kolla JavaScript-instruktioner, som om och medan, så att de också följer rätt format
Lägg till felsökningskod till dina program
Du kan använda metoderna alert() eller document.write() i ditt program för att felsöka din kod. Du kan till exempel skriva något så här:
var debugging = sant; var whichImage = "widget"; if(debugging) alert("Anropar swapImage() med argument: " + whichImage); var swapStatus = swapImage(whichImage); if(debugging) alert("Avslutar swapImage() med swapStatus=" + swapStatus);
Genom att undersöka innehållet och ordningen för alert() när de visas kan du enkelt testa funktionen hos ditt program.
Hur man använder JavaScript Debugger
En debugger är ett program där alla aspekter av skriptkörning är under kontroll av programmeraren. Debuggers ger finkornig kontroll över ett skripts tillstånd genom ett gränssnitt som låter dig inspektera och ställa in värden och kontrollera flödet av exekvering.
När skriptet har laddats in i debuggern kan det köras en rad i taget eller instrueras att stanna vid specifika brytpunkter. När körningen stoppas kan programmeraren kontrollera skriptets tillstånd och dess variabler för att avgöra om något är fel. Du kan också visa variabler för att ändra deras värden.
- Använd mycket kommentarer. Kommentarer låter dig förklara varför du skrev manuset som du gjorde och förklara särskilt svåra delar av koden.
- Använd alltid indrag för att göra din kod lätt att läsa. Indrag gör det också lättare för dig att matcha start- och sluttaggar, lockiga hängslen och andra HTML- och skriptelement.
- Skriv modulär kod. När det är möjligt, gruppera dina uttalanden i funktioner. Funktioner låter dig gruppera relaterade uttalanden och testa och återanvända kodbitar med minimal ansträngning.
- Var konsekvent i hur du namnger dina variabler och funktioner. Försök att använda namn som är tillräckligt långa för att vara meningsfulla och beskriva innehållet i en variabel eller syftet med en funktion.
- Använd konsekvent syntax när du namnger variabler och funktioner. Med andra ord, behåll dem gemener eller versaler; om du föredrar Camel-Back notation, använd den konsekvent.
- Kontrollera långa skript på ett modulärt sätt. Med andra ord, försök inte skriva hela manuset innan du testar någon del av det. Skriv delen och kör den innan du lägger till nästa del av koden.
- Använd beskrivande namn för variabler och funktioner och undvik att använda namn med enstaka tecken.
- Se upp för citat. Kom ihåg att citattecken används i par runt strängar och att båda citattecken måste ha samma stil (ett eller två).
- Håll koll på dina likhetstecken. Du bör inte använda en = för jämförelseändamål.
- Jag deklarerar uttryckligen variabler med hjälp av nyckelord var.
Föreställ dig att du arbetar med denna otroliga nya webbapplikation och dina testare har bett dig att fixa följande buggar:
- Statusfältsmeddelandet "Laddar in..." försvinner inte när programmet har laddats klart.
- Standardspråket är norska, även på engelska versioner IE och Firefox.
- Någonstans i koden skapades en global variabelpropp.
- Av någon anledning har alla element i DOM-visaren attributet "clone".
Kör debuggers
- I Firefox måste du se till att du har installerat Firebug-tillägg. Välj "Verktyg > Firebug > Öppna Firebug".
- I Opera 9.5+ väljer du "Verktyg > Avancerat > Utvecklingsverktyg."
- I IE beta, gå till "Verktyg > Paneler > Utforskarfält > IE Developer Toolbar."
- I Safari eller WebKit, aktivera först felsökningsmenyn (1), välj sedan "Utveckla > Visa webbinspektör"
Fel #1: "Laddar..." meddelande
Om du tittar på programmet du felsöker kommer du först att se vad som visas i figur 1.ris. 1: Inledande vy av vår JavaScript-applikation i Dragonfly respektive Firebug.
När du tittar på original text i debuggern, var uppmärksam på clearLoadingMessage()-funktionen i början av koden. Det här är ett bra ställe för en checkpoint.
Så här installerar du det:
- Klicka i vänstermarginalen på radnumret för att ställa in en brytpunkt på den första raden
- Ladda om sidan.
När sidan laddas om kommer skriptet att sluta köras och du kommer att se vad som visas i figur två.
ris. 2: debuggers stannade vid Kontrollpunkt inuti clearLoadingMessage.
Låt oss ta en titt på funktionskoden. Som du lätt kan se uppdaterar den två DOM-element och rad 31 nämner ordet statusfält. Det ser ut som att getElements("p", ("class":"statusrad")).innerHTML letar efter statusfältselementet i DOM-trädet. Hur kan vi snabbt testa vårt antagande?
Klistra in detta uttalande i kommandoraden för att testa. Figur tre visar tre skärmdumpar (Dragonfly, Firebug och IE8) efter att ha läst innerHTML eller yttre HTML-element, returneras av kommandot du söker efter.
Gör följande för att kontrollera:
- Hitta kommandoraden:
* I Firebug byter du till fliken "Konsol".
* I Dragonfly, titta under JavaScript-kodpanelen.
* I IE8, hitta fliken "Konsoll" till höger. - Klistra in getElements("p", ("class":"statusrad")).innerHTML på kommandoraden.
- Tryck enter.
ris. 3: Mata ut kommandoresultatet i Dragonfly, Firebug respektive IE8.
Kommandoraden är mycket användbart verktyg, vilket gör att du snabbt kan testa små kodbitar. Firebug-konsolintegrationen är mycket användbar - om ditt kommando matar ut ett objekt får du en mycket intelligent vy. Till exempel, om det är ett DOM-objekt - kommer du att se det uppmärkta resultatet.
Du kan använda konsolen för att göra mer djupgående forskning. JavaScript-sträng, som vi studerar, gör följande tre saker:
- Får en referens till statusfältselementet.
- Hittar firstChild, med andra ord, den första noden i detta stycke.
- Anger egenskapen innerText.
getElements( "p", ("klass" :"statusfält")).firstChild.innerText
Överraskning, på slutet... ingenting. Således pekar uttrycket getElements("p",("class:"statusbar")).firstChild på något objekt i DOM som inte innehåller någon text, eller som inte har en innerText-egenskap.
Sedan är nästa fråga: vad är egentligen det första barnet i ett stycke? Låt oss ställa den här frågan på kommandoraden. (Se fjärde bilden).
ris. 4: kommandorad StDragonfly debugger, utgång [Textobjekt].
Dragonflys debugger-utgång - [Textobjekt] visar att detta är en DOM-textnod. Därmed hittade vi orsaken till det första problemet. En textnod har inte en innerText-egenskap, så att sätta p.firstChild.innerText till ett värde gör ingenting. Detta fel kan enkelt fixas genom att ersätta innerText med nodeValue, som är en egenskap som definieras av W3C-standarden för textnoder.
Nu när vi har tagit itu med det första felet:
- Klicka eller Kör-knappen för att avsluta skriptet.
- Glöm inte att återställa den inställda kontrollpunkten genom att klicka på radnumret igen.
Misstag två: språkdefinitionsproblem.
Du kanske har lagt märke till variabeln lang;/*language*/ i början av skriptet. Man kan misstänka att koden som ställer in värdet på denna variabel orsakar problemet. Du kan försöka hitta den här koden med hjälp av sökfunktionen som är inbyggd i debuggers. I Dragonfly finns sökningen precis ovanför kodvisaren, i Firebug är den till höger övre hörnet(se bild 5)Gör följande för att ta reda på var lokaliseringsproblemet sannolikt uppstår:
- Skriv lang = i sökfältet.
- Ställ in en brytpunkt på linjen där variabeln lang är satt till ett värde.
- Ladda om sidan.
ris. 5: Sök i Dragonfly och WebInspector.
För att kontrollera vad den här funktionen gör:
- Klicka på "steg in"-knappen för att gå in i getLanguage-funktionen.
- Tryck på den igen och igen, exekvera koden steg för steg
- I variabelvisningsfönstret kan du se hur deras värden förändras.
var str1 = navigator.userAgent.match(/\((.*)\)/);
var ar1 = str1.split(/\s*;\s*/), lang;
för (var i = 0; i< ar1.length; i++){
if (ar1[i].match(/^(.(2))$/))(
lang = ar1[i];
}
}
När du går igenom koden kan du använda Local Variables Viewer. Figur 6 visar hur det ser ut i Firebug och IE8 DT vi utökade ar1-arrayen för att se dess element.
ris. 6: Ruta för att visa lokala variabler för getLanguage-funktionen i Firebug IE8
Uttrycket ar1[i].match(/^(.(2))$/) söker helt enkelt efter en sträng som består av två tecken, till exempel "nej", "en". Men som du kan se på skärmdumpen Firefox-information om språket presenteras i formen "nn-NO" (2). IE lägger inte alls in språkinformation i användaragenten.
Således hittade vi det andra felet: språket bestämdes genom att söka efter en tvåbokstavskod i användaragentraden, men Firefox har en språkbeteckning på fem tecken, och IE har det inte alls. Sådan kod måste skrivas om och ersättas med språkdetektering antingen på serversidan med hjälp av Accept-Language HTTP-headern eller genom att hämta den från navigator.language (navigator.userLanguage för IE). Här är ett exempel på vad en sådan funktion kan vara
funktion getLanguage() (
var lang;if (navigator.language) (
lang = navigator.språk;
) else if (navigator.userLanguage) (
lang = navigator.userLanguage;
}if (lang && lang.length > 2) (
lang = lang.substring(0, 2);
}return lang;
}
Misstag tre: Den mystiska "prop"-variabeln
ris. 7: Den globala prop-variabeln är synlig i Firebug och Dragonfly-variabelvypanelen
I figur 7 kan du tydligt se variabeln "prop". I välskrivna applikationer bör antalet globala variabler hållas till ett minimum, eftersom de kan orsaka problem när till exempel två delar av applikationen vill använda samma variabel. Låt oss säga att i morgon kommer ett annat team att lägga till nya funktioner till vår applikation och även deklarera variabeln "prop". Vi kommer att sluta med två olika delar av applikationskoden som använder samma namn för olika saker. Denna situation leder ofta till konflikter och misstag. Du kan försöka hitta denna variabel och deklarera den lokal. För att göra detta kan du använda sökningen, som vi gjorde i föregående fall, men det finns ett smartare sätt...
Debuggers för många andra programmeringsspråk har konceptet med en "klocka", som går in i felsökningsläge när en specificerad variabel ändras. Varken Firebug eller Dragonfly stöder "observatörer" för närvarande, men vi kan enkelt emulera liknande beteende genom att lägga till nästa rad till början av koden som studeras:
__defineSetter__( "prop" , function () (debugger; ));
Gör följande:
- Lägg till felsökningskod i början av det allra första skriptet.
- Ladda om sidan.
- Lägg märke till hur skriptkörningen avbryts.
När du laddar om sidan kommer kodexekveringen omedelbart att stoppas där variabeln "prop" är definierad. Det faktiska stoppet kommer att inträffa vid den punkt där du lade till raden ovan. Ett klick på "steg ut"-knappen tar dig till platsen där variabeln är inställd.
för (prop i attribut) (
if (el.getAttribute(prop) != attribut) includeThisElement = false ;
Det är inte svårt att lägga märke till för slinga där prop-variabeln deklareras utan nyckelordet var, dvs. global. Det är inte svårt att fixa detta, lägg bara till var och åtgärda felet.
Misstag fyra: ett "klon"-attribut som inte borde finnas där
Den fjärde buggen upptäcktes tydligen av en avancerad testare som använde DOM-inspektören, eftersom dess existens inte visas på något sätt i användargränssnitt applikationer. Om vi öppnar DOM-inspektören (i Firebug är detta fliken "HTML", i Dragonfly kallas det "DOM"), kommer vi att se att många element har ett klonattribut, som inte borde finnas där.ris. 8: Dragonflys DOM-inspektör visar problematisk kod.
Eftersom detta inte påverkar applikationens användare på något sätt, kan det här felet inte betraktas som allvarligt, men glöm inte att det kan påverka prestandan avsevärt, eftersom skriptet ställer in attributet på hundratals och tusentals element.
Mest snabbt sätt Lösningen på detta problem är att ställa in en brytpunkt som aktiveras när ett attribut som kallas clone sätts på något HTML-element. Kan debuggers göra detta?
JavaScript är ett mycket flexibelt språk, och ett av dess styrkor(eller svaga, beroende på din synvinkel) är vad du kan ersätta grundläggande funktioner språk med ditt eget. Lägg till denna kodbit på sidan, den kommer att åsidosätta systemmetod setAttribute, vilket gör att koden slutar när egenskapen "clone" är inställd:
var funcSetAttr = Element.prototype.setAttribute; /* spara en referens till systemmetoden */
Element.prototype.setAttribute = funktion (namn, värde) (
if (namn == "klon") (
felsökare; /* stoppa skriptet */
}
funcSetAttr.call(detta, namn, värde); /* anropa en tidigare sparad systemmetod så att normala egenskaper ställs in korrekt */
};
Så vi gör följande:
- Lägg till följande kod i början av det första skriptet på sidan.
- Ladda om sidan.
När exekveringen stannar vid en brytpunkt, vill du veta var setAttribute()-anropet inträffade, vilket betyder att du måste gå tillbaka upp i funktionsanropskedjan och se vad som händer där. Du kan använda en samtalsstack för detta.
ris. 9: Ring stack i Dragonfly och IE8.
Figur 10 visar stacken i Firebug. I kö " setAttribute
ris. 10: Ring stack i Firebug. Den senast kallade funktionen till vänster.
Genom att klicka på namnen på funktioner i stacken kan du avgöra hur du kom dit. Det är viktigt att prova själv för att förstå hur det fungerar. Observera att när du navigerar i stacken, uppdateras även innehållet i rutan Lokala variabler för att visa deras tillstånd vid den tidpunkt då din valda funktion kördes.
Så här använder du samtalsstacken för att hitta den problematiska funktionen:
- Klicka på namnet på funktionen i stapeln som du vill se.
- Observera att lokala variabler uppdateras till de värden de har i det valda sammanhanget.
- Kom ihåg att om du använder stegknapparna kommer de att flytta dig från brytpunktsplatsen även om du är i en annan del av stacken.
för (var prop i attribut) (
el.setAttribute(prop, attribut);
}
där du kommer att se setAttribute-anropet. Panelen Lokala variabler visar att värdet på variabeln "prop" verkligen är "klon". Prop-variabeln definieras i en for...in loop. Detta talar om för oss att detta är namnet på en av egenskaperna för objektet "attribut". Detta objekt skickas till funktionen som den andra parametern. Om du flyttar upp högen ytterligare en nivå kommer du att se följande kod:
var form = makeElement('form', ( action:'/login', method:'post', name:'loginform'), dokument .body);
Metodens andra parameter är markerad med fet stil - det här objektet har ingen klonegenskap. Så var kom det ifrån?
Låt oss gå tillbaka till makeElement-funktionen igen och titta närmare på attributvariabeln och dess "clone" -egenskap. Du kan klicka på funktionsvärdet för denna egenskap för att gå till platsen där den är tilldelad, den kommer att markeras i blått
ris. 11: Firebug visar oss var klonegenskapen definierades.
Så vi hittade orsaken till det fjärde felet: klonmetoden läggs till i alla objekt som använder Object.prototype. Detta tillvägagångssätt anses vara dålig praxis, eftersom i för...in loopar på objekt kommer alla egenskaper du ställer in genom Object.prototype att vara synliga. Detta kan leda till mycket subtila fel.
För att åtgärda det här felet kan du flytta klonmetoden från objektets prototyp direkt till själva objektet och sedan ersätta alla anrop till obj.clone() med Object.clone(obj), som visas i exemplet:
// DÅLIGT, du borde inte göra det här
Object.prototype.clone = function() (
var obj = ();
för (var prop i detta) (
obj = detta ;
}
returnera obj;
}
// Kod. demonstrerar användningen av metoden clone():
var myObj1 = ( "id" : "1" );
var myObj2 = myObj1.clone();
Gör det bättre så här:
Publicerad: 26 mars 2013
Chrome Developer Tools är enligt min mening det mest bekväma webbutvecklingsverktyget. Den innehåller all nödvändig funktionalitet för att skapa och felsöka fullfjädrade webbapplikationer. Men som alla andra verktyg måste du lära dig hur du arbetar med det. Låt oss börja med grunderna.
Konsolen spelar rollen som en interaktiv JavaScript-tolk. Den visar också fel som uppstår när webbapplikationen körs. Förutom en separat flik är konsolen tillgänglig på alla andra flikar genom att trycka på Esc eller konsolikonen i det nedre vänstra hörnet av skärmen.
Konsolen ger utvecklaren tillgång till ett antal bekväma och användbara funktioner. Låt oss överväga de viktigaste:
console.log() , console.error() , console.warn() och console.debug()
Grundläggande konsolutgångsfunktioner låter dig mata ut godtyckliga meddelanden till konsolen. De skiljer sig åt i klassificeringen av utgående meddelanden: error() markerar meddelanden som fel, warn() markerar meddelanden som varningar, debug() markerar meddelanden som felsökning.
Dessa funktioner accepterar ett obegränsat antal parametrar, vilket gör att du kan visa flera variabler i rad och till och med limma ihop dem till hela meningar:
Console.log("Loggtid:", 1121102802);
Det finns också formateringsstöd:
Console.log("Loggningstid: %d", 1121102802);
Formatindikatorer som stöds:
// %s — string console.log("%s", "Hej"); // %d, %i — heltal console.log("%d", 1337 / 42); // %f är ett flyttalnummer console.log("%f", 1337 / 42); // %o är ett DOM-element console.log("%o", document.body); // antingen console.dirxml(document.body); // %O är ett JavaScript-element console.log("%O", document.body); // antingen console.dir(document.body); // %c — utdata med inställning av CSS-stilar console.log("%chello %cworld", "color: red", "color: blue");
console.trace()
Skriver ut anropsstacken från den punkt i koden där metoden anropades. Anropsstacken innehåller filnamn och radnummer plus ett antal anrop till metoden trace() från samma punkt.
console.assert()
Assert-funktionen kontrollerar uttrycket som skickas som den första parametern, och om uttrycket är falskt, skriver ett fel till konsolen tillsammans med anropsstacken:
Var två = 3; var tre = 2; console.assert(två< three, "два меньше трех");
console.group() , console.groupCollapsed() och console.groupEnd()
Funktioner för att gruppera utdata. group()-funktionen öppnar en meddelandegrupp, tar gruppnamnet som en parameter (formatering stöds som i console.log()), och groupEnd()-funktionen stänger den senast öppnade gruppen. GroupCollapsed()-funktionen liknar group()-funktionen, men meddelandegruppen som skapas är komprimerad som standard.
console.time() och console.timeEnd()
Funktioner för att beräkna kodexekveringstiden. Time()-funktionen startar en timer, och timeEnd()-funktionen stoppar timern och skriver ut dess värde. Båda funktionerna accepterar timernamnet som en obligatorisk parameter.
Meddelandefilter
I det nedre högra hörnet av konsolfliken finns ett meddelandefilter efter typ. Alla motsvarar alla meddelanden, Errors - errors och utdata från console.error()-funktionen, Warnings - warnings och output från console.warn()-funktionen, Loggar - utdata från console.log()-funktionen, Debug - utdata från console.debug(), konsolfunktioner .timeEnd() och annan information.
Interaktion med andra flikar
felsökare;
När webbläsaren når felsökningsraden; i vilken kod som helst stoppar den automatiskt skriptkörningen vid denna tidpunkt och går till fliken Skript (Källor).
$() , $$() och $x()
Funktioner som gör det lättare att välja element fungerar bara i konsolen. $()-funktionen returnerar det första elementet som matchar den valda väljaren. Den andra parametern kan användas för att skicka sökkontexten:
$("huvud") // returnerar huvudelementet $("huvud", document.body) // returnerar null eftersom body inte innehåller några huvudelement
$$()-funktionen liknar $() , men returnerar alla hittade element:
$$("script") // returnerar alla skriptelement $$("script", document.body) // returnerar alla skriptelement som finns i body
$x()-funktionen returnerar alla element som matchar XPath-uttrycket. Den andra parametern kan användas för att skicka kontexten:
$x("//script") // returnerar alla skriptelement $x("script", document.body); // returnerar alla skriptelement som finns direkt i kroppen
Många JavaScript-ramverk definierar sin egen $()-funktion, och därför ändras också innebörden av funktionerna i konsolen.
$0 — $4
Konsolen lagrar i minnet referenser till de fem senaste elementen som valts på fliken Element. För att komma åt dem används variablerna $0, $1, $2, $3 och $4. $0 lagrar en länk till det för närvarande valda elementet, $1 till det föregående, och så vidare.
$_
Variabeln $_ lagrar resultatet av att köra det sista kommandot i konsolen. Detta gör att resultatet av ett kommando kan användas i ett annat kommando. Prova dessa kommandon ett efter ett:
1337/42; console.log("%d", $_);
inspektera()
Funktionen inspect() öppnar det skickade objektet eller elementet på motsvarande flik:
Inspect($("head script")) // öppnar fliken Elements och markerar den första script-taggen som finns inuti head
När jag pratade med mina kollegor nyligen blev jag förvånad över att många av dem aldrig hade använt webbläsarens inbyggda JavaScript-konsolfelsökare i sitt arbete. Tyvärr arbetar en av dem i mitt företag. Jag kommer inte att avslöja hans namn.
För er som ännu inte är bekanta med Browser API Console är den här artikeln skriven.
Visuell felsökning
När du arbetar på en webbplats bygger felsökning främst på visuell uppfattning. Det är extremt lätt att se felaktigt justerade kolumner, överlappande text, göra nödvändiga ändringar och uppdatera sidan. För PHP stoppar felmeddelandet skriptet och visar problemet direkt på sidan. Kort sagt: de flesta fel som kan åtgärdas omedelbart är lätta att se efter att sidan har laddats.
API-konsolen är ett objekt (konsol) som kan användas för att mata ut felsökningsinformation (den kan användas när sidan har laddats av webbläsaren). Konsolen är mest effektiv när du arbetar med JavaScript.
Felsökning av javascript firebug
Hur man spårar händelser
Firefox - Logga händelser
Firefox + Firebug + Firequery = Visar händelser som utlösts med jQuery
Bromsar - stäng av när den inte fungerar
Glöm felsökning med console.log för alltid! Lär dig hur du använder brytpunkter för att felsöka kod i Chrome Developer Tools
Översättning av artikelnBrandon Morelli : Lär dig hur du felsöker JavaScript med Chrome DevTools . Publicerad med tillstånd av författaren.
Att hitta och åtgärda fel kan vara svårt. Du kan bli frestad att använda console.log() okontrollerat för att få din kod att fungera korrekt. Det är avslutat!
Den här artikeln handlar om det korrekta sättet att felsöka! Du lär dig hur du använder Chrome Developer Tools för att ställa in brytpunkter och undersöka kod. Detta tillvägagångssätt är ofta det mest effektiva sättet att hitta och åtgärda fel i din kod.
Den här handledningen visar hur man felsöker ett specifikt problem, men ett liknande arbetsflöde är användbart för att felsöka alla typer av JavaScript-fel.
Steg 1: Återskapa felet
Att återskapa felet – det första steget till felsökning – innebär att upptäcka den serie av åtgärder som leder till att det dyker upp. Du kan behöva reproducera buggen många gånger, så det är tillrådligt att eliminera alla onödiga steg.
Följ instruktionerna nedan för att återskapa felet som vi ska åtgärda under denna handledning:
- Här är webbsidan vi kommer att arbeta med för den här artikeln. Öppna den på en ny flik: DEMO.
- I demo för Nummer 1 ange 5.
- Ange 1 för Nummer 2.
- Klick Lägg till nummer 1 och nummer 2.
- Titta på etiketten under ingångarna och knappen. Hon säger att 5 + 1 = 51.
Hoppsan. Detta är ett felaktigt resultat. Resultatet ska bli 6. Det här är felet vi ska åtgärda.
Steg 2: Pausa kodexekveringen med en brytpunkt
DevTools låter dig pausa din kod mitt i körningen och hämta värdena alla variabler vid denna tidpunkt. Verktyget för att pausa kod kallas en brytpunkt. Prova det nu:
- Gå tillbaka till demon och öppna DevTools genom att trycka på Kommando+Alternativ+I (Mac) eller Ctrl+Skift+I (Windows, Linux).
- Gå till fliken Källor.
- Klick Brytpunkter för händelselyssnare för att utöka menyn. DevTools avslöjar en lista med händelsekategorier som t.ex Animation Och Urklipp.
- Expandera händelsekategori Mus.
- Välj klick.
- Återgå till demon, klicka igen Lägg till nummer 1 och nummer 2. DevTools pausar och markerar kodraden i panelen Källor:
När du trycker på klicka ställer du in en brytpunkt baserat på alla klickhändelser. När klicket inträffar några nod och denna nod har en klickhändelsehanterare, stoppar DevTools automatiskt exekvering på den första raden med klickhanterarkod för denna nod.
Steg 3: Utforska koden
En vanlig orsak till fel är att skriptet körs i fel ordning. Genom att granska koden kan du exekvera koden en rad i taget och ta reda på exakt var den exekveras i en oväntad ordning. Prova det nu:
- På panelen Källor i DevTools klicka Gå in i nästa funktionssamtal.
Den här knappen låter dig utföra onClick()-funktionen en rad i taget. DevTools stoppar körningen och markerar följande kodrad:
If (inputsAreEmpty()) (
- Klicka nu på knappen Gå över nästa funktionsanrop.
Detta talar om för DevTools att köra funktionen inputAreEmpty() utan att gå in i den. Observera att DevTools hoppar över flera rader kod. Detta inträffar eftersom inputAreEmpty() utvärderas till false , så if-satsblocket med kod exekveras inte.
Detta är grundidén bakom kodutforskning. Om du tittar på get-started.js-koden ser du att felet förmodligen finns någonstans i updateLabel()-funktionen. Istället för att undersöka varje kodrad kan du använda en annan typ av brytpunkt för att pausa koden närmare där felet uppstår.
Steg 4: Ställ in en annan brytpunkt
De vanligaste brytpunkterna som sätts på kodrader är när du har en specifik kodrad som du vill pausa. Prova det nu:
- Titta på den sista raden i koden i updateLabel():
Till vänster om koden kan du se numret på den specifika raden: 32 . Klicka på det. DevTools kommer att placera en blå ikon ovanpå numret. Det betyder att det finns en brytpunkt på den här linjen. DevTools kommer nu alltid att pausa innan det.
- Klicka på knappen Återuppta skriptkörning:
Skriptet kommer att köras tills det når en brytpunkt.
- Titta på kodraderna som redan körts i updateLabel() . DevTools matar ut värdena addend1, addend2 och summa.
Summan ser misstänkt ut. Det ser ut som att det behandlas som en sträng när det ska vara ett nummer. Detta kan vara orsaken till vårt fel.
Steg 5: Kontrollera variabelvärdena
En annan vanlig orsak till fel är när en variabel eller funktion genererar andra värden än förväntat. För att se hur värden förändras över tid använder många utvecklare console.log() , men console.log() kan vara tråkigt och ineffektivt av två anledningar. Först kan du behöva redigera kod manuellt med många console.log()-anrop. För det andra kanske du inte vet exakt vilken variabel som är associerad med felet, så du kan behöva logga många variabler.
Watch Expressions är ett DevTools-alternativ till console.log() . Använd Watch Expressions för att spåra värdet på variabler över tid. Som namnet antyder är Watch Expressions inte begränsad till bara variabler. Du kan lagra vilket giltigt JavaScript-uttryck som helst i Watch Expression. Prova det nu:
- På panelen Källor Klicka på DevTools Kolla på. Avsnittet öppnas.
- Klick Lägg till uttryck.
- Ange summatyp.
- Tryck enter. DevTools kommer att visa: typeof summa: "string" . Värdet till höger om kolon är resultatet av ditt klockuttryck.
Som förväntat behandlas summa som en sträng när det ska vara ett tal. Detta är anledningen till vårt fel i demon.
