A HTML-debuggolás

A HTML-debuggolás

A HTML-kódot megírni egy dolog, de mi van akkor, ha valami balul sül el, és nem találjuk, hol van a kódban a hiba? Mai cikkünkben egy olyan eszközt mutatunk be, amely segít megtalálni és kijavítani a HTML-ben levő hibákat.

A debuggolás nem olyan ijesztő

A kód írása általában rendben folyik, mindaddig a borzalmas pillanatig, amíg fel nem üti a fejét egy hiba — valami, amit nem jól csináltál, és ami miatt a kód egyáltalán nem működik, vagy nem úgy működik, ahogy szeretted volna. A debuggolás a kódban rejlő hibák felderítésének és javításának a folyamata.

A hibaüzenetek lehetnek könnyen értelmezhetőek is, de ahogy a kód egyre nagyobb lesz, úgy a hibaüzeneteket is egyre nehezebb interpretálni.

A debuggolás azonban nem olyan borzalmas — a lényeg az, hogy tisztában legyél a programnyelvvel és az eszközökkel.

 

A HTML és a debuggolás

A böngészők sokkal engedékenyebbek a HTML-kódok elemzése során, mint más programnyelvek (JavaScript, Python stb.) futtatásakor. Ennek az engedékenységnek jó és rossz oldalai is vannak.

Mit értünk engedékenységen? Nos, amikor valami gond van a kóddal, általában két fő hibatípusról van szó:

Szintaxishibák: Vannak olyan helyesírási vagy gépelési hibák, amelyek megakadályozzák a kód helyes értelmezését. Ezek a hibák leggyakrabban könnyen kijavíthatóak, ha ismerjük a programnyelv szintaxisát és a hibaüzenetek jelentését.

Logikai hibák: Az ilyen hibák esetében a szintaxis helyes, de a kód nem azt mutatja, amit szeretnénk. A logikai hibákat gyakran nehezebb korrigálni, mint a szintaxishibákat, mert nincs hibaüzenet, mely a hiba forrására mutat.

A HTML-kódok esetében nem is léteznek a szintaxishibák — hiszen az oldal akkor is megjelenik, ha vannak szintaxishibák, mert a böngészők engedékenyebbek a kód elemzése során. Gyakran azonban az oldal nem olyan, amilyennek elképzeltük, ami szintén gondot okozhat!

A HTML azért van engedékenyebben elemezve, mert a web létrehozásakor fontosabb volt, hogy a tartalom megjelenjen, mint az, hogy a szintaxis teljesen pontos legyen. A web manapság valószínűleg nem volna ennyire populáris, ha a kezdetektől ilyen szigorúak lettek volna a szabályok.

 

HTML-validáció

Egy rövid kódban könnyebb megtalálni a hibákat, de mi van akkor, ha a HTML-dokumentum nagy és összetett?

A legjobb stratégia, ha a HTML-oldalunkat átfuttatjuk a W3C szervezet Markup Validation Service nevű szolgáltatásán. A weboldalra fel kell tölteni a HTML-kódot, melyet a program átnéz, és kiemeli a benne található hibákat.

 

A hibaüzenetek értelmezése

A hibaüzenetek gyakran segítenek, időnként azonban nehéz értelmezni őket. Mai leckénkben sorra vesszük a leggyakoribb hibaüzeneteket, és kitérünk a jelentésükre is. Minden hibaüzenetben ott van a sor és az oszlop száma, mely segít könnyen megtalálni a hibát.

 

  • "End tag li implied, but there were open elements" (A li zárócímke értelmezett, de vannak nyitott elemek): Ez a hibaüzenet azt jelenti, hogy egy elem nyitva maradt, pedig be kellett volna zárni. A sor/oszlop információ a bezáratlan sor után következő első sorra utal, melynek segítségével könnyebb azonosítani a hiba helyét.
  • "Unclosed element strong" (Bezáratlan strong elem): Ez egy könnyen értelmezhető hibaüzenet — egy strong elem nem lett bezárva, a sor/oszlop információ pedig azt mutatja, hol található a hiba.
  • "End tag strong violates nesting rules" (A strong zárócímke sérti a beágyazás szabályait): Ez az üzenet arra utal, hogy a kódban hibásan beágyazott elemek szerepelnek, a sor/oszlop információ pedig azt mutatja, hol.
  • "End of file reached when inside an attribute value. Ignoring tag" (A fájl vége egy attribútumon belül van. A címke ignorálva van”): Ez az üzenet már valamivel rejtélyesebb. Arra utal, hogy valahol a dokumentum vége felé található egy helytelenül megformázott attribútumérték. A hiba megtalálásában segít, ha megfigyeljük, melyik elemet nem tölti be a böngésző.
  • "End of file seen and there were open elements" (A fájl végére érve nyitott elemekkel találkozni): Az üzenet egy kicsit homályos, de arra utal, hogy vannak olyan nyitott elemek a dokumentumban, amelyeket be kell zárni. A sorszámok a dokumentum utolsó soraira mutatnak, az üzenet mellé pedig egy rövid kód is jár, mely illusztrálja a nyitott elem fogalmát. Az olyan attribútum, amelynél hiányzik a záró idézőjel, nyílt elemet eredményez, hiszen a dokumentum többi része az attribútum tartalmaként lesz értelmezve.
  • "Unclosed element ul" (Az ul elem nincs bezárva): Ez az üzenet nem sokat segít, mert az <ul> elem helyesen be van zárva. A hibaüzenet akkor jelenik meg, amikor az <a> elem nincs bezárva, mert hiányzik a záró idézőjel.

Ha nem tudsz minden hibaüzenetet értelmezni, ne aggódj — próbáld meg előbb azokat a hibákat kijavítani, amelyeket azonosítani tudsz, majd validáld újra a HTML-t. Esetenként egy hiba kijavítása más hibaüzenetektől is megszabadít, hiszen egyetlen gond több hibát vagy egy egész dominóeffektust is okozhat.

 

Összegzés

Mai leckénkben megismerkedtünk a HTML-debuggolás alapjaival — ezáltal olyan értékes tudást szereztél, amely hasznodra lesz a későbbi karriered során is, ha CSS, JavaScript vagy más típusú kódokat kell kijavítanod. Ezzel a cikkel a HTML-modul végére érkeztünk, további írásainkban már az egy fokkal bonyolultabb CSS-en lesz a hangsúly.
 



Nyereményjáték!
 

Rovatunk elsődleges célja, hogy közelebbről is bemutassa a legismertebb webtechnológiákat. Azok között az olvasók között, akik minden héten követik rovatunkat, azaz velünk tanulják a programozás alapjait és kitöltik a feladatsort, a sorozat végén egy laptopot sorsolunk ki.
 
A játék heti kérdése:
Mi annak a szolgáltatásnak a neve, amellyel ellenőrizni tudjuk a HTML-kódunkat?
 
1. HTML Validation Service
2. Markup Checking Service
3. Markup Validation Service
 
A választ a tanulok@erdsoft.com e-mail-címre kell elküldeni, a tárgysorba pedig a következőt kell beírni: HÉTNAP-TANULOK. Sok szerencsét!
 

Néhány szó rólunk:

Az ErdSoft (www.erdsoft.com) 2011-ben alakult meg. Csapatunkat a fiatalos lendület, a szakértelem, a folyamatos tanulás és tapasztalatgyűjtés jellemzi. Ügyfeleinknek igyekszünk teljes körű szolgáltatást nyújtani — bátran fordulhatnak hozzánk, legyen szó webfejlesztésről, alkalmazásokról, SEO-optimalizálásról, grafikai tervezésről, marketingről vagy szövegírásról. Csapatunk sikerét mi sem bizonyítja jobban, mint a több száz elkészült weboldal és a számos elégedett ügyfél Szerbiában, Magyarországon és az Egyesült Királyságban.

Hozzászólások

Kapcsolódó cikkek

Hogyan működik a CSS?
Számtek
  • Erdsoft
  • 2018.12.07.
  • LXXIII. évfolyam 49. szám
A dokumentumok és a weboldalak szerkezete
Számtek
  • Erdsoft
  • 2018.11.26.
  • LXXIII. évfolyam 47. szám
Facebook

Támogatóink