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

Címkék: ,

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.



Akikre büszkék vagyunk

Siker sztorik

Molnár Erika

Molnár Erika

Nekem borzasztó érthető volt, követhető és minden támogatást megkaptam. A facebook csoportban lehet kérdezni, rávezetnek a megoldásra és így nagyon gyorsan lehet fejlődni. Mindenképp ezzel akarok foglalkozni. Leginkábban abban szeretnék fejlődni, hogy egyedi sablonokat építsek, mert nagyon sok olyan felhasználó van, aki előre készített komponensekből akarja összerakatni a weboldalát, de én jobbat szeretnék, főleg így, hogy beleláttam a HTML és a sablonkészítés rejtelmeibe.

Elolvasom >>>

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!

A programozás alapjai

Ingyenes leckesorozat!

Ahhoz, hogy később kód szinten is meg tudj valósítani összetettebb frontend igényeket, tisztában kell lenned a programozás alapfogalmaival. Ebben a leckesorozatban bevezetlek a programozás alapismereteibe teljesen programfüggetlenül.

Megismerkedhetsz az algoritmusokkal, ciklusokkal, logikai műveletekkel és adattípusokkal, emellett gyakorlati feladatokat is kapsz minden témakörhöz. Mindezt egy kényelmes online oktatófelületen.

Regisztrálj és kezdd el még ma!

szám, kisbetű, nagybetű, legalább 8 karakter

Elolvastam és elfogadom az Adatvédelmi Nyilatkozatot

A programozás alapjai

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