Breakpoints och watches

Vi börjar med lite termer och fortsätter sedan med exempel och demon. Dessa verktyg är livskritiska för all bugghunters där ute.

 

 

Breakpoint

Detta är basen och grundverktyget i alla debug-äventyr. En breakpoint är en plats i appen där vi kommer att pausa i debuggern när den raden körs.

Dessa kan sättas på lite olika vis men alla populära verktyg låter oss sätta dem genom att klicka till vänster om radnumren i vår editor eller Chrome.

 

Step Over

Detta kommando används för att köra en rad kod medan vi är pausade i debuggern. Vanligtvis med kortkommando F10 men det kan variera. I demot nedan kan vi se att när vi använder Step Over körs innerFunction() men vi hoppar inte in i den utan hela metoden körs och vi hoppar till raden nedan.

 

Step Into

 

Detta kommando används för att hoppa in i ett funktionsanrop. Vanligtvis med kortkommando F11 men det kan variera. I demot nedan kan vi se att när vi använder Step Into hoppar vi in i innerFunction() och kan stega igenom varje rad även i den.

 

Step Out

 

Motsatsen till Step Into, detta kommando kommer att köra all kod som är kvar i funktionen och hoppa ut till den plats där anropet skedde. Vanligtvis kortkommando Shift+F11 men det kan variera. I demot nedan använder vi först Step Into för att hoppa in i innerFunction() sen använder vi direkt Step Out för att skippa resten av funktionen. Den körs fortfarande men vi behöver inte stega igenom varje rad manuellt.

 

JavaScript specifikt

Javascript är lite speciellt i sammanhanget då det är väldigt asynkront och funktioner körs inte nödvändigtvis i den ordning som det verkar. Detta kan ställa till problem då man försöker stega igenom koden, helt plötsligt så verkar inte Step Into fungera utan vi fortsätter bara på nästa rad. När detta händer har vi stött på en asynkron funktion och det enklaste då är att försöka sätta en breakpoint i den funktionen och vänta tills att vi pausar där.

 

Nästa kapitel kommer, signa upp för vårt nyhetsbrev här nedanför för att hänga med hela vägen!