JavaScript debuggolás 1. rész

A JavaScript hibák kezelése elég fontos és ugyanakkor kényes dolog a frontend fejlesztők számára. A weboldalak és webalkalmazások egyre több és bonyolultabb JS kódot tartalmaznak, így a debuggolás nem állhatott meg ott, hogy egy alert tartalmaként kiíratjuk az objektumunkat. Szerencsére ezt felismerték a böngészők fejlesztői is és hatékony, jól használható eszközökkel örvendeztettek meg minket.

A fejlesztő eszközök lehetőségeiről és használatáról később esik szó, először viszont érdemes kicsit a JavaScript hibakezelésével foglalkozni.

A JavaScript roppant egyszerű hibakezeléssel bír: ha gond van, dob egy kivételt és szép csendben lehal az egész script futása (ez természetesen egy sarkított megközelítése a dolognak). Ebből persze a felhasználó csak annyit érzékel, hogy hiába kattintgat, nem vált a slider a következő képre, vagy nem tűnik el az a fránya ajax-loader.

Hiba objektumok

Amikor hiba történik, mindig létrejön egy objektum, ami a generált hibát reprezentálja. A JavaScript nyelv hét beépített error objektumot kezel, amik a hibakezelés alapját képezik.

Error

Az „Error” hibatípust az általános hibák leírására használhatod. Ez a leggyakrabban előforduló objektumtípus.

var hiba = new Error("hibaüzenet");

RangeError

Akkor generálódik, amikor szám típusú változók „nem férnek” el egy adott intervallumban. Például a toFixed() metódus hívásával lehet előidézni, aminek az argumentuma 0 és 20 közötti egész szám lehet.

var szam = 1.234;  
szam.toFixed(100); // RangeError

ReferenceError

Ez a hibatípus akkor generálódik, amikor nem létező változóra hivatkozol. Leggyakrabban egyszerű elgépelés miatt találkozhatsz vele.

function fuggveny() {  
    valtozo++; // ReferenceError  
}

SyntaxError

Másik gyakran előforduló hibatípus, ami akkor jön létre, ha a JavaScript szintaktikai szabályainak nem felel meg a kódod. Általában lemaradó zárójelek vagy pontosvesszők eredményezik létrejöttét.

if (valtozo) { // SyntaxError  
    // A lezáró kapcsos zárójel hiányzik

TypeError

TypeError típusú kivétellel találod szembe magad, amikor egy objektum nem létező értékére vagy függvényére akarsz hivatkozni.

var valami = {};  
valami.fuggveny(); // TypeError  
// A valami objektum függvény metódusa nincs definiálva

URIError

Az encodeURI() és decodeURI() metódusok által generált hibatípus, ami akkor jön létre, ha a fentiek nem tudják értelmezni a kapott paramétert.

decodeURIComponent("%"); // URIError

EvalError

Az eval() függvény helytelen futásakor generálódó hibatípus. A legújabb EcmaScript szabvány már nem tartalmazza, viszont a visszafelé biztosított kompatibilitás miatt még támogatják az interpreterek.

Hibakezelés

JavaScriptben a hibakezelés a try – catch – finally szerkezettel kezelhető le. Az elkapott error objektum két leggyakrabban használt értéke a name és message tulajdonságok.

try {  
    // Futó programkód  
} catch (error) {  
    // Hiba esetén lefutó kód  
} finally {  
    // Minden esetben lefutó kód  
}

A fenti szerkezetben lehetőséged van típusonként lekezelni a keletkezett hibát az instanceof kifejezés használatával.

try {  
    // Futó programkód  
} catch (error) {  
    if (error instanceof TypeError)   
        // TypeError lekezelése  
    } else if (error instanceof ReferenceError) {  
        // ReferenceError lekezelése  
    } else {  
       // Többi hibatípus lekezelése  
   }  
}

Lehetne még részletezni a JavaScript hibakezelését, és érdemes is, viszont a cikk célja csak az alapok bemutatása volt, hogy a következőkben megtudd, mikor és miért kapod az adott hibaüzenetet, ezzel is gördülékenyebbé téve a debuggolást.

Ha részletesebben olvasnál még a témáról, ezt a linket ajánlom.