Kun jokin ei toimi · Koodaa Martinin kanssa

Pelastusluku. Jokainen ohjelmoija jää joskus jumiin – parhaatkin. Tässä on mitä tehdä.

Ensin tärkein asia

Kun jokin ei toimi, se ei ole sinun vikasi etkä ole rikkonut mitään. Jumiin jääminen on täysin normaalia ohjelmoinnissa. Ammattiohjelmoijat kohtaavat bugeja joka päivä – ainoa ero on, että he ovat oppineet etsimään ne rauhallisesti.

Kultainen sääntö: lue tarkasti

90 % kaikista koodin bugeista on kirjoitusvirheitä. Tietokoneet ovat uskomattoman tarkkoja:

<h1> toimii, <hl> ei (numero yksi vs. pieni L)
index.html toimii, index. html ei (ylimääräinen väli)
Jokainen avaava tagi <p> tarvitsee oman sulkevan taginsa </p>

Vertaa koodiasi oppitunnin koodiin kirjain kerrallaan. Löydät virheen yleensä minuutissa.

Yleisiä ongelmia ja ratkaisuja

”Se avautuu vain tavallisena tekstinä, ei sivuna”

Tiedostosi nimi ei todennäköisesti ole index.html, vaan esimerkiksi index.html.txt. VS Codessa poista tiedosto ja luo uusi – nimen on päätyttävä täsmälleen .html.

”Muutin koodia, mutta sivulla ei muuttunut mitään”

Kaksi yleisintä syytä:

Unohdit tallentaa – paina Ctrl+S (Macilla Cmd+S). Tallentamattomalla tiedostolla on VS Codessa pisteen nimen vieressä X:n sijaan.
Unohdit päivittää sivun – paina F5 selaimessa.

”Sivulla näkyy outoja merkkejä ääkkösten sijaan”

Tiedostosi otsikosta puuttuu rivi <meta charset="UTF-8">. Lisää se <head>- ja </head>-tagien väliin – se kertoo selaimelle, mitä merkistöä tekstissäsi käytetään.

”Kuva ei näy, vain rikkinäisen kuvan kuvake”

Tarkista tiedostonimi koodissasi – sen on oltava täsmälleen sama kuin kansiossasi oleva tiedostonimi, myös pääte mukaan lukien (photo.jpg ei ole sama kuin photo.JPG tai photo.jpeg).
Kuvan on oltava samassa kansiossa kuin index.html (tai kansiopolussa, jonka kirjoitit koodiin, kuten images/photo.jpg).

”Yhtäkkiä puolet sivusta on lihavoitua / valtavaa / sinistä”

Jossain on unohtunut sulkeva tagi. Esimerkiksi <strong>-tagilta puuttuu </strong>, joten kaikki pysyy lihavoituna loppuun asti. Etsi, mistä outous alkaa, ja lisää puuttuva sulkeva tagi.

Kun olet yhä jumissa

Pidä tauko. Totisesti. Viisi minuuttia ikkunaan tuijottamista, ja bugi usein löytää itsensä. Ammattilaisetkin tekevät näin.
Lue rikkinäinen kohta ääneen. Kuulostaa typerältä, mutta toimii – ääneen lukeminen saa huomaamaan asioita, joita silmät ohittavat.
Pyydä toista paria silmiä. Vanhempi, sisarus, kaveri – heidän ei tarvitse osata koodata, heidän tarvitsee vain vertailla koodiasi oppitunnin kanssa.
Aloita pieni osa alusta. Kun kaikki tuntuu liikaa, poista viimeisin lisäämäsi osa, tarkista että sivu toimii taas, ja lisää se takaisin – tällä kertaa hitaammin.

💡

Muista: jokainen korjaamasi bugi tekee sinusta paremman ohjelmoijan. Debuggaus ei ole ikävää puuhaa, vaan supervoima, jota rakennat juuri nyt.