Weblabor

A Weblaboron előforduló fórumtémák nagy többségénél az a probléma, hogy a szerző csak nemrég kezdett el ismerkedni a webfejlesztéssel, és nem tudja, milyen eszközök állnak rendelkezésre a hibák kiderítéséhez. Ezért igyekszem a legegyszerűbb eszközöket bemutatni, ami a kezdéshez elegendő lesz; ezeknél persze léteznek bonyolultabb módszerek, de azok megtalálását a nyájas olvasóra és a lelkes kommentelőkre bízom.

Kezdő vagyok, merre induljak el?

Emberek vagyunk, tévedhetünk, és gyakran élünk is ezzel a lehetőséggel. Amikor elkezdünk dolgozni egy weboldalon, előbb-utóbb szembesülünk azzal a problémával, hogy nem úgy jelenik az meg, ahogy elképzeltük. Mivel csak pár kósza bitről van szó, a legfontosabb, hogy ne essünk pánikba, hanem a lehetőségek számbavételével izoláljuk a problémát. Nagy segítség ilyenkor, ha modulárisan építkezünk: külön fájlban van a HTML kód, a kinézetért felelő stílusok, valamint a funkcionalitást biztosító JavaScriptek. A megoldáshoz felhasználhatjuk tapasztalatainkat, vagy megkérhetünk másokat, hogy segítsenek, ehhez viszont szükséges, hogy meg tudjuk fogalmazni, hogy mi a gond.

Ehhez az egyik legfontosabb, hogy tanuljunk meg angolul, mert az interneten található ingyenes dokumentációk általában ezen a nyelven íródtak. A számítástechnika kb. 2-3000 szót használ, tehát minimális erőfeszítéssel, gyakorlatilag pár hét alatt belejön bárki, aki komolyan gondolja, hogy el szeretne érni valamit, és talál egy jó szótárat.

A nyelvet célszerű mindjárt az általunk használni kívánt nyelv dokumentációján gyakorolni. Mindenkinek megvannak a saját tanulási szokásai, én általában úgy szoktam kezdeni, hogy végignézem az elérhető összes parancsot-lehetőséget, ami kezdetnek kicsit tömény lehet, de legalább kapok egy képet, hogy mit lehet megvalósítani s mit nem. Magasszintű programozási nyelveknél, mint például a PHP, a függvénynevek szerencsére elég beszédesek ahhoz, hogy rájöjjünk, mire is jó az adott funkció. A nyelvi referenciák persze sokszor túlságosan szakmainak és részletesnek tűnhetnek, de ne ijedjünk meg, később nagy hasznát fogjuk venni minden itt leírt információnak.

CSS, megjelenés

Manapság már minden modern böngészőhöz létezik beépített fejlesztést támogató eszköz – menüből általában Fejlesztői eszközök (Developer Tools) néven érhetjük el, vagy a Ctrl+Shift+I billentyűkombinációval – vagy letölthető kiegészítő (a Firefoxhoz a Firebug). Ez utóbbit az Eszközök, Kiegészítők menüpontokon keresztül telepíthetjük, és az F12 segítségével nyithatjuk meg – csukhatjuk be. Ezen keresztül mutatom be az egyes eseteket, mivel tapasztalataim szerint ez az egyik legjobban használható program.

HTML-ek gyártása közben sokszor előfordul, hogy egy elem nem úgy néz ki, ahogy azt elképzeltük. Talán az egyik legfontosabb, hogy megértsük, mi az a doboz modell, hogyan működik az elemek úsztatása, valamint az elemek pozícionálása, minden más adja magát.

A Firebugban az elemek kijelölése többféleképp történhet, például a bal felső sarokban található, kék négyzeten lévő egérkurzor ikonnal, segítségével elég rákattintani a képernyőn egy pontra, és a HTML fülön azonnal megtudunk választottunkról mindent. A bal oldalon látható a HTML fastruktúra, ha itt egy sor fölé visszük az egeret, a böngészőben az aktuális elemet különböző színekkel jelöli a program: a kék a tartalmat, a lila a kitöltést, a barna szín a keretet, míg a sárga a margót.

Jobb oldalon az aktuális stílusdefiníciók jelennek meg, a listában lefelé görgetve megtekinthetjük az összes, az elemre vonatkozó stílust. Ezt lehetőségünk van átszerkeszteni, vagy akár új tulajdonságokat hozzáadni, így élőben kipróbálhatjuk a változtatásokat, az oldal újratöltése nélkül.

JavaScript

A Firebugban a Konzol fülön tudjuk követni szkriptjeink hibáit: ha megtörtént a baj, piros betűkkel adja tudtunkra a program, merre kezdjünk el keresni. Ha ez a fül aktív, a Konzol felirat mellett megjelenik egy kis háromszög, itt tudjuk személyre szabni a kapott üzeneteket, valamint érdemes bekapcsolni a „Veremmel kiíratása a hibák mellett” (sic!) menüpontot, mert ekkor azt is láthatjuk, hogy a függvényeink milyen paramétereket kaptak.

Ha tudatosan szeretnénk megállítani a szkript futását egy bizonyos helyen, írjuk be a forrásba a következőt: debugger;. Ha ide érkezik a programunk, a Firebug átvált a Szkript fülre, ahol bal oldalon lenn a kódot, jobb oldalon pedig további hasznos információkat láthatunk: a Figyelés fülön az aktuális változók értékei jelennek meg, a Verem fülön pedig a függvényhívások paramétereikkel, az ide vezető úton.

Üzeneteket úgy is küldhetünk szkriptünkből, hogy nem szakítjuk meg a program futását, ehhez használjuk a console.log() parancsot. Roppant hasznos tulajdonsága, hogy a tömböket és objektumokat szépen, fastruktúrában jeleníti meg, így nagyon könnyen olvasható a tartalmuk. Figyelem! Az oldal élesítésekor ne felejtsük el kivenni a kódból ezeket a parancsokat, mert hibát okozhatnak ott, ahol nincs Firebug telepítve, ráadásul nem is a felhasználókra tartoznak ezek az üzenetek.

A DOM fülön tekinthetjük meg a dokumentumunk összes nyilvános változóját egy nagy fastruktúrában, ahol ezek az értékek egy része egyébként szerkeszthető is. Itt aztán tényleg belemászhatunk a böngészőnk lelkivilágába, és megtudhatjuk a legapróbb bitig, hogy elemeink milyen tulajdonságokkal rendelkeznek.

PHP

A legegyszerűbben a következő három parancs használatával kérhetünk állapotinformációt a programunk futásáról: print_r(), get_defined_vars() és debug_backtrace(). A print_r() egy segédfüggvény, formázottan jeleníti meg a paraméterként megkapott változókat; érdemes a kimenete köré rakni egy <pre> … </pre> taget, így tömbjeink és objektumaink tartalma jól olvasható lesz.

A get_defined_vars() egy tömbben adja vissza az adott helyen létező változók értékeit, míg a debug_backtrace() segítségével megjeleníthetjük a vermet, azaz azon függvények listáját, amelyeken keresztül eljutottunk az adott pontra, mellettük a bejövő paraméterekkel és a definiált változókkal. Egy komolyabb rendszernél ez az adattömb meglehetősen nagy lehet, de általában elég az utolsó pár elemét vizsgálni, hogy rájöjjünk a hiba okára. Itt is fontos megjegyezni, figyeljünk arra, hogy élesítéskor még véletlenül se jelenjenek meg ilyen hibaüzenetek, mert az átlagfelhasználó számára zavarók, a nem tisztességes látogatók számára pedig támpontot adhatnak; ilyen esetben megoldás lehet a hibák naplózása egy fájlba vagy adatbázisba.

A manapság népszerű AJAX-os alkalmazások hibakeresésére használhatjuk a Firefox Firebugra épülő FirePHP kiterjesztését, aminek használata nagyon hasonló a javascriptes console.log() függvényéhez. Az eredményt a Firebug Konzol fülén tekinthetjük meg, a PHP-s tömbjeink és objektumaink formázottan, olvashatóan jelennek meg.

Végszó

Jóbarátunk a kereső! Senki se érezze magát különlegesnek, az épp aktuális problémával nagyon nagy valószínűséggel már más is találkozott, s meg is osztotta a tapasztalatait. Mint mindenhol, ebben a szakmában is fontos, hogy lépésről lépésre haladjunk, azaz tanuljuk meg a szakmai nyelvet és az angolt, ismerjük az adott programozási vagy leírónyelv parancsait-lehetőségeit, hogy minél pontosabban tudjuk feltenni a kérdésünket.

Miután ötször végigolvastuk az adott nyelv dokumentációját, átnyálaztuk a függvényekhez tartozó kommenteket, átkutattuk az internet legutolsó, legporosabb szegletét, és még mindig nem találtuk meg a Választ, akkor érdemes a kollegák segítségét kérni fórumokon, például a Weblaboron. Ne felejtsük: ők is emberek, valószínűleg dolgoznak, és kevés az idejük, ezért adjuk meg nekik a tiszteletet!

Mit és hogyan írjunk le?

• Mik a körülmények, hogyan lehet reprodukálni a hibát?
• Ha van hibaüzenet, másoljuk be!
• Melyik böngészőben teszteltük?
• Szerveroldali nyelv esetén írjuk le a használt szoftverek verziószámait!
• Használjuk a kódszínezőt!