Als iets niet werkt · Code met Martin

Een reddingshoofdstuk. Elke programmeur loopt soms vast – zelfs de besten. Dit is wat je doet.

Eerst het belangrijkste

Als iets niet werkt, is het niet jouw schuld en heb je niets kapot gemaakt. Vastlopen hoort helemaal bij programmeren. Professionele programmeurs gaan elke dag bugs na – het enige verschil is dat ze geleerd hebben ze rustig op te sporen.

De gouden regel: lees aandachtig

90% van alle bugs in code zijn typefouten. Computers zijn ongelooflijk precies:

<h1> werkt, <hl> niet (het cijfer één vs. een kleine L)
index.html werkt, index. html niet (een extra spatie)
Elke openende tag <p> heeft zijn eigen sluitende </p> nodig

Vergelijk je code letter voor letter met de code in de les. Meestal vind je de fout binnen een minuut.

Veelvoorkomende problemen en oplossingen

”Het opent gewoon als platte tekst, geen pagina”

Je bestand heet waarschijnlijk niet index.html, maar iets als index.html.txt. Verwijder het bestand in VS Code en maak een nieuw – de naam moet precies eindigen op .html.

”Ik veranderde de code, maar er veranderde niets op de pagina”

Twee meest voorkomende oorzaken:

Je bent vergeten op te slaan – druk Ctrl+S (Cmd+S op Mac). Een niet-opgeslagen bestand heeft een puntje naast de naam in VS Code in plaats van een X.
Je bent vergeten de pagina te verversen – druk F5 in je browser.

”Er staan rare tekens op de pagina in plaats van accenten”

De header van je bestand mist de regel <meta charset="UTF-8">. Voeg die toe tussen <head> en </head> – die vertelt de browser welke tekenset je tekst gebruikt.

”De afbeelding wordt niet getoond, alleen een kapot icoon”

Controleer de bestandsnaam in je code – die moet precies hetzelfde zijn als in je map, inclusief extensie (photo.jpg is niet hetzelfde als photo.JPG of photo.jpeg).
De afbeelding moet in dezelfde map staan als je index.html (of in het pad dat je in de code schreef, zoals images/photo.jpg).

”Plots is de helft van de pagina vet / enorm / blauw”

Ergens ben je een sluitende tag vergeten. Bijvoorbeeld <strong> mist zijn </strong>, dus alles blijft vet tot het einde. Zoek waar het raar begint en voeg de ontbrekende sluitende tag toe.

Als je nog steeds vastzit

Neem een pauze. Echt. Vijf minuten uit het raam staren en de bug vindt zichzelf vaak. Zelfs de profs doen dit.
Lees het kapotte stuk hardop voor. Klinkt gek, maar het werkt – hardop lezen laat je dingen zien die je ogen overslaan.
Vraag om een second pair of eyes. Een ouder, broer of zus, vriend – ze hoeven geen code te kennen, ze moeten alleen je code met de les vergelijken.
Begin een klein stuk opnieuw. Als het te veel wordt, verwijder het laatste stuk dat je toevoegde, controleer dat de pagina weer werkt, en voeg het dan terug toe – langzamer deze keer.

💡

Onthoud: elke bug die je oplost maakt je een betere programmeur. Debuggen is geen karwei, het is een superkracht die je nu opbouwt.