JavaScript hibakeresés Táblázattal?

Mindenki jól ismeri a Chrome vagy a Firefox fejlesztést segítő eszközeit. Van egy általános objektumunk, ami a console névre hallgat. A console.log talán mindenki által jól ismert. A console.error és a console.warn függvényeket is ismertek sok helyen. Ezek a kedves barátok sokat segítenek, amikor JavaScript kódunkban szeretnénk megtalálni, hogy hol a hiba.

Sokszor előfodul, hogy egy tömböt szeretnénk megvizsgálni, ám ilyenkor ezek az eszközök elég kényelmetlenek tudnak lenni. Ha például van egy XHR kérésünk, amiben visszakapunk egy tömböt, amiben a kapcsolódó cikkek vannak, akkor az összes objektumunknak ugyan azok a tulajdonságai vannak. Ezeket viszont szeretnénk egyben látni. Erre jó a console.table.

Tulajdonképpen a paraméterben kapott tömb objektumainak kulcsa alapján készít egy táblázatot és szépen kirajzolja azt.

Screen Shot 2014-11-01 at 17.35.00

Láthatóan sokkal informatívabb a táblázatos forma a JavaScript tömbjeink megjelenítésére 🙂 Ha egy adott objektumot szeretnénk megnézni, akkor továbbra is maradhat a jól megszokott metódus, mert a táblázatos forma nem kezd vele semmit, pedig milyen jó lenne, ha olyankor egy két oszlopos nézetet adna kulcs és érték fejléccel.

Egyelőre Chrome és Firefox, amiről tudok, hogy működik, minden máshol vagy nem vagy még nem működik. Egy negatívuma talán van… Ha sok táblázatot pakolunk ki, akkor biza nagyon megnő a memóriahasználat. Nem tudom ez csak nálam van-e így Chrome dev csatornán vagy általános jelenség, mindenesetre legyünk vele óvatosak és nézzük meg jó előre, hogy meddig bírja a gép. Ha nem akad ki a sok hosszú táblázattól, akkor bátran lehet hazsnálni. Ugyan így érdemes vigyázni a JavaScript objektumon belüli objektumokkal, mert azokat szintén nem jeleníti meg a rendszer, hanem simán kiírja, hogy “Object”, mint érték.

Ha egy adott tulajdonsága nincs egy objektumunknak, akkor logiusan “undefined” értéket kapunk. Előnyös viszont, hogy nem csak az első elem kulcsai számítanak, mert ha abból hiányzik valami, akkor is bekerül a fejléc elemek közé.

Te milyen megoldásokat használsz hibakeresésre? Azon kívül persze, hogy nem hibázol 🙂

Kapcsolódó cikkek:

Balazs Nadasdi

Developer, Project Manager, Blogger, Dad... or sometihng like these