2021.11.16.

Hogy kell debugolni, az az hibamentesíteni egy weboldalt?

hogy-kell-debugolni

A “debugolás” nem más, mint hibakeresés, vagyis a potenciális hibák felderítésének és eltávolításának folyamata. Egy weboldal esetében – mivel az különböző programnyelvekből és alrendszerekből tevődik össze -, a hibakeresés elég nehéz. Néha több időbe telik egy program hibakeresése, mint a kódolása. Valójában a többnapos hibakeresés még abszolút nem számít kivételesnek.

Bármennyire is óvatosak vagyunk a kódírásakor, elkerülhetetlen hibákat, vagy elütéseket ejteni. Még a legegyszerűbb feladatokban is lehet olyan hibát véteni, aminek javítására nem jössz rá azonnal, vagy sok időbe telik kiböngészni.

Ez nem kikerülhető, sokkal inkább a fejlesztői munka szerves és folyamatos része. Akkor tudsz jól kódolni, ha hatékonyan megy a hibajavítás, egyedül is megtudod találni és ki is tudod javítani a kódban a hibáidat. Nyilván ennek előfeltétele, hogy tudod és érted is amit csinálsz, illetve tudod értelmezni a hibaüzeneteket.

Mi számít hibának?

A nem megfelelő, vagy hibás működés nyilván, de ennél sajnos bonyolultabb a helyzet. A leggyakoribb esetekben a weboldalt alkotó kódban nem megfelelő a szintaktika, mert például elírtad / rossz helyen van a pont / egyel több zárójelet írtál, stb. Ezeknek a hibáknak a kijavítása a legkönnyebb, mert semmi mást nem kell csinálnod, csak javítani az elírásokat, ahol a hibaüzenet mondja.

Van olyan eset, amikor nincs hibaüzenet, de mégsem működik jól a weboldal. Ezek lehetnek logikai hibák, amiket nem vettél észre, vagy a tesztelés során nem jött elő. Aztán van olyan is, amikor valójában nincs is hiba, csak próbálják veled elhitetni. Például “Nem lehet fizetni”, miközben a fizetésnek semmi baja nincsen, csak a felhasználó képtelen magát két-faktorosan azonosítani.

Mik a hibajavítás lépései?

A nulladik lépés, még mielőtt bármit csinálsz, hogy győződj meg róla, hogy újra töltődött-e az oldal és a legfrissebb verziót látod-e. Ehhez ürítsd ki a böngésző gyorsítótárat. Ez a bővítmény segítségedre lehet a cache kiürítésében Chromeban.

  1. A probléma azonosítása – Használd az egyes programnyelvek “debug” funkcióit, amik kijelzik a hibákat. Felhasználók esetében próbálj minél több részletet, akár képernyőképet kérni a felhasználótól, hogy megtud mi a hiba. Ez baromi nehéz, mert ilyeneket szoktak mondani, hogy “Eldobta magát”, “Ugrál”, “Nem jön be”. Tehát sajnos megfogalmazni sem tudják mi a probléma, de a kapott infók alapján már el tudsz indulni a hibakeresésben.
  2. A probléma felderítése – Hol, melyik programrészben lehet a gond. Ezt a hibaüzenetek helyéből a legegyszerűbb megállapítani. Szerencsére a weboldal egyes hibaüzenetei máshol jelennek majd meg, tehát ahol hibát kapsz ott kell keresgélni.
  3. A probléma javítása – A hibaüzenetek minden esetben tartalmazzák, hogy melyik fájl, melyik sorában eredményez hibát a program futása. Sajnos ez nem mindig azt jelenti, hogy ott is van a hiba, de legtöbbször szerencsére igen. Tehát mindig ott keresgélj, ahova a hibaüzenet hivatkozik.

HTML / CSS

A W3C validátoraival ellenőrizhetjük, hogy nincs-e szintaktikai hiba a HTML, vagy a CSS kódban. A validátor valójában hibakeresést végez és ellenőrzi, hogy a weboldal kódolása megfelel-e a szabványnak. A kód érvényesítése nemcsak a megfelelő kinézetet támogatja, hanem felhívja a figyelmedet minden fontosabb szemantikai szempontra. A kód akkor jó, ha “zöld”. Ezt ellenőrizd a HTML oldalaidnál és minden CSS stíluslapodnál is. Vannak esetek, amikor nem lehet kikerülni, hogy egy-két figyelmeztetés ne szereplejen a listában, de ezeket általában külső szolgáltatások, APIk okozzák. Az a lényeg, hogy az a kód, amit Te írsz, az minden esetben valid legyen.

Mi van, ha ez nem oldja meg a problémát? Ha szintaktikailag rendben van a kód, de még sem működik valami, akkor a leggyakoribb esetek a következők lehetnek:

  • Elírtad a HTML elem nevét (pl: <section>, helyett <secton>). HTML-ben hozhatsz létre egyedi elemet is, ami annyit jelent, hogy, ha az elem címkéjét elírod, az attól még valid lesz.
  • A HTML struktúra szerint nem létezik olyan elem, amire hivatkozol. Például ID-ra hivatkozol CLASS helyett, vagy az elem kiválasztás nem jó, vagy a szülő-gyerek kapcsolatot nem látod át a HTML struktúrában.
  • Töréspontra van szűkítve a formázás, nem oda írtad be a szabályt, ahova kéne, nyomd össze a böngésző ablakot, hogy kisebb kijelzőn van-e változás. Minden kapcsoszárójel be van zárva?
  • CSS tulajdonság át van húzva a DevToolsban. A DevTools nem más, mint egy böngésző panel, ami lehetővé teszi, hogy diagnosztizáljuk a weboldalon lévő problémákat. Ami át van húzva, az felül van bírálva egy magasabb szintű kiválasztási szabállyal. Azt, hogy mi írja felül kiderítheted, ha fel/le görgetsz a panelon. Ha sehogy máshogy nem tudod megoldani akkor használd az !important kulcsszót a tulajdonsághoz.

JavaScript

A kód természetesen itt is tartalmazhat szintaktikai hibát, ezt a legkönnyebb javítani, mert a DevToolsban meg fognak jelenni a hibaüzenetek pirossal. Viszont előfordulhat, hogy nem kapsz hibaüzenetet, mégsem működik jól a script.

  • Uncaught SyntaxError: Invalid or unexpected token – Elírtad, kimaradt egy karakter, stb.
  • Unexpected end of input – Elfelejtettél egy zárójelet, kapcsoszárójelet.
  • Uncaught TypeError: ‘valami’ Is Not a Function – Nem definiált függvény meghívásakor fordul elő.
  • Uncaught ReferenceError: ‘valami’ is not defined – olyan változót használsz, ami nem definiált, (tehát valszeg elírtad)

Ezek könnyen javíthatóak mert álltalában figyelmetlenség, vagy félregépelés van a háttérben. Ha szintaktikailag jó a program, nincs hibaüzenet, de mégsem azt csinálja, amit kell, akkor az a legjobb módszer, ha soronként mindent kiírsz a konzolba, az összes változót ellenőrződ, hogy van-e értékük, minden cikluson, elágazáson végig mész. Kattintás alapú eseményekhez használd az alert() függvényt, minden máshoz a console.log()-ot.

alert(valtozo);
console.log(valtozo);

PHP

A PHP hibakezelése majdnem megegyeznek más programozási nyelvekével. Ha elírás, elütés, vagy egyéb szintaktikai hiba van kódban, akkor a program egyszerűen nem fut le. Az alábbi sorokat érdemes a PHP kódod tetejében elhelyezni, hogy hatékony legyen a hibakezelés.

ini_set('display_errors', 1);  
ini_set('display_startup_errors', 1);  
error_reporting(E_ALL);  

Leggyakoribb hiba lehetőségek:

  • A leggyakoribb eset, ha syntax error-od van, egyszerűen nézz körül abban a sorban, amire az üzenet hivatkozik. Nézd meg jól a közvetlenül előtte lévő sort is, mert lehet, hogy a hiba valójában ott van, nem abban melyikre a hibaüzenet hivatkozik.
  • Amikor a szintaxis jó, de még sem fut jól a program, az sajnos logikai hiba. Ennek több oka is lehet, például hagytál egy logikai kiskaput, vagy nem teljesen világosak az adattípusok, és megesik, hogy például szöveget akarsz beszorozni számmal.
  • Ki akarod írni valaminek az eredményét, de nem ír ki semmit. Üres a változó, vagy nem kap értéket. A programot utasításonként ajánlatos leellenőrizni a változók értékeinek kiírásával. Ha feltételek mentén halad a program, akkor meg kell vizsgálni, hogy a feltétel értelmezhető-e, ami mentén az utasítás meg van adva.

WordPress

Ebben aztán millió +1 hiba lehet, attól függően, hogy mibe nyúltál eddig bele. Egyes bővítmények, vagy sablonok is okozhatnak gondot. Ami szinte mindig tévút, hogy a WordPress “core” fájlaiban van hiba. Ez általában sosem igaz, még akkor sem ha a hibaüzenet azt mondja. A hibák megjelenítéséhez a gyökér mappában lévő wp-config.php fájlban be kell kapcsolnod a “debug módot”. Keresd ki ezt a sort és állítsd át “true”-ra a paraméterét.

define( 'WP_DEBUG', false );

Mivel a WordPress sablonok és bővítmények PHP nyelven íródnak, így az összes hibatípus a fentiekből itt is igaz lehet.



Tetszett a bejegyzés?

Iratkozz fel és küldök Neked E-mail értesítőt, ha ehhez hasonló új cikk kerül fel a blogra.

.
Nekem való?

Maradtak még kérdéseid?

Ha nem vagy biztos benne, hogy ez Neked való, vagy további kérdéseid vannak a kurzusokkal kapcsolatban,
írd meg chaten és 48 órán belül válaszolok!

Kérdezek!

Kövesd közösségi csatornáinkat is!