De browserconsole en HTML bekijken
Elke moderne browser heeft een verborgen superkracht ingebouwd: de DevTools (ontwikkelaarsgereedschap). Het is het eerste gereedschap dat elke webdeveloper leert gebruiken — en waarschijnlijk het meest geopende venster in je werkdag.
DevTools openen
Er zijn drie manieren om de DevTools te openen:
| Methode | Windows / Linux | macOS |
|---|---|---|
| Sneltoets | F12 | F12 |
| Sneltoets (alternatief) | Ctrl + Shift + I | Cmd + Option + I |
| Via menu | Rechtermuisknop op de pagina → Inspecteren | Rechtermuisknop op de pagina → Inspecteren |
De DevTools zijn beschikbaar in alle grote browsers: Chrome, Firefox, Edge en Safari. De schermafbeeldingen in deze introductie zijn gemaakt in Chrome, maar de werking is in elke browser vergelijkbaar.
De Console tab
De Console is de directe lijn tussen jou en de browser. Hier zie je foutmeldingen, waarschuwingen en berichten die jij zelf via JavaScript instuurt.
Een bericht loggen vanuit JavaScript
In je HTML-bestand kun je JavaScript toevoegen met een <script> tag. De methode console.log() stuurt een bericht naar de console:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<title>Mijn website</title>
</head>
<body>
<h1>Hallo wereld!</h1>
<script>
console.log('De pagina is geladen!')
console.log('2 + 2 =', 2 + 2)
</script>
</body>
</html>
Open dit bestand in je browser, open de DevTools en klik op de tab Console. Je ziet nu:
De pagina is geladen!
2 + 2 = 4
Foutmeldingen lezen
Wanneer er iets misgaat in je code, verschijnt er een rode foutmelding in de console. Dit is de meest waardevolle informatie die je als developer kunt krijgen — lees het altijd als eerste!
Uncaught ReferenceError: gebruikersNaam is not defined
at index.html:12:17
De foutmelding vertelt je:
- Wat er mis is:
gebruikersNaam is not defined - Waar het mis gaat: regel
12, kolom17vanindex.html
Klik op de bestandsnaam en het regelnummer in de foutmelding. De browser brengt je direct naar de exacte regel in de Sources tab.
De Elements tab
In de Elements tab (in Firefox heet dit Inspector) zie je de volledige HTML-structuur van de huidige pagina — precies zoals de browser die heeft opgebouwd.
HTML inspecteren
Klik met de rechtermuisknop op een element op de pagina en kies Inspecteren. De Elements tab springt dan direct naar dat element in de HTML-boom.
Aan de linkerkant zie je de HTML, aan de rechterkant de bijbehorende CSS-stijlen.
HTML live bewerken
Je kunt HTML rechtstreeks in de Elements tab aanpassen — zonder je bestand te hoeven opslaan. Dit is ideaal om snel iets uit te proberen.
- Dubbelklik op een tekst of attribuut in de Elements tab
- Pas de waarde aan
- Druk op
Enter
De wijziging is direct zichtbaar op de pagina.
Aanpassingen in de DevTools worden niet opgeslagen in je bestanden. Zodra je de pagina herlaadt (F5 of Cmd + R), zijn de wijzigingen weg. Gebruik het als schetsblok, niet als editor.
Handige console-methoden
Naast console.log() zijn er nog een paar methoden die dagelijks van pas komen:
// Gewone melding
console.log('Gebruiker ingelogd')
// Waarschuwing (oranje)
console.warn('Let op: de sessie verloopt binnenkort')
// Foutmelding (rood)
console.error('Verbinding mislukt')
// Een object netjes weergeven als tabel
const gebruikers = [
{ naam: 'Anna', rol: 'admin' },
{ naam: 'Boris', rol: 'gebruiker' },
]
console.table(gebruikers)
De DevTools zijn je dagelijkse metgezel als webdeveloper. Hoe sneller je er vertrouwd mee raakt, hoe sneller je problemen opspoort en oplost.