Zelfs de meest ervaren webdevelopers schrijven zelden HTML en CSS die in één keer $100\%$ perfect werkt. Een knop die net niet goed uitlijnt, een ongewenste horizontale scrollbalk, of een kleur die niet klopt: fouten maken hoort bij het proces.
Gelukkig hoef je niet steeds blindelings je code aan te passen in je code-editor, op te slaan en je browser te verversen. Elke moderne browser heeft een ingebouwde gereedschapskist: de Browser Developer Tools (DevTools).
In deze les leer je hoe je met DevTools 'onder de motorkap' van een website kijkt, live code aanpast en lay-outproblemen snel opspoort.
DevTools is een verzameling hulpprogramma's die rechtstreeks in browsers zoals Google Chrome, Mozilla Firefox, Microsoft Edge en Safari is ingebouwd.
Het is als het ware een röntgenbril voor websites: je kunt exact zien hoe de HTML is opgebouwd, welke CSS-regels actief zijn en welke fouten de browser eventueel tegenkomt.
Er zijn drie snelle manieren om de DevTools te openen:
F12 of Ctrl + Shift + ICmd + Option + I [ 🔍 ] [ 📱 ] Elements Console Sources Network
─────────────────────────────────────────────────────────
◄ <header class="navbar"> ... </header>
► <main class="content"> ... </main>
Elements-tabblad: HTML & CSS live aanpassenHet Elements-tabblad (in Firefox Inspecteur genoemd) is de plek waar je als webdesigner de meeste tijd zult doorbrengen. Het is opgedeeld in twee hoofdvensters:
<!-- Voorbeeld van hoe een element eruitziet in de DOM-viewer -->
<button class="btn-primary" style="background-color: red;">
Klik Hier
</button>
+) om live nieuwe CSS aan te maken.💡 Belangrijk:
Aanpassingen in DevTools zijn tijdelijk! Zodra je de pagina ververst (F5), keert alles terug naar de originele staat. DevTools is een virtuele zandbak om ideeën te testen. Vergeet je werkende code niet te kopiëren naar je eigen.css-bestand!
Soms snap je niet waarom twee elementen te ver uit elkaar staan of waarom een kaart breder is dan verwacht. De Box Model Viewer onderaan het Styles-paneel geeft het verlossende antwoord.
Het Box Model toont in vier gekleurde kaders precies de afmetingen van:
┌──────────────────────────────────────────────┐
│ Margin (Oranje) │
│ ┌──────────────────────────────────────┐ │
│ │ Border (Geel) │ │
│ │ ┌──────────────────────────────┐ │ │
│ │ │ Padding (Groen) │ │ │
│ │ │ ┌──────────────────────┐ │ │ │
│ │ │ │ Content 200px x 50px │ │ │ │
│ │ │ └──────────────────────┘ │ │ │
│ │ └──────────────────────────────┘ │ │
│ └──────────────────────────────────────┘ │
└──────────────────────────────────────────────┘
Beweeg met je muis over de verschillende lagen in de Box Model Viewer: op de pagina verschijnen direct gekleurde vlakken die aangeven waar de ruimte vandaan komt!
Webdesigners komen dagelijks een aantal bekende CSS-problemen tegen. Zo spoor je ze op met DevTools:
Zie je een CSS-regel in het Styles-venster staan waar een streep doorheen staat? Dan betekent dit dat de regel wordt overschreven door een andere regel met een hogere specificiteit (prioriteit) of door een regel die later in de stylesheet staat.
/* Wordt overschreven (doorgehaald in DevTools) */
p {
color: black;
}
/* Krijgt voorrang omdat de class specifieker is */
.intro-tekst {
color: #2563eb;
}
Een van de meest irritante bugs op mobiel is een horizontale scrollbalk. Dit betekent dat een element breder is dan het scherm (overflow).
DevTools Oplossing:
* {
outline: 1px solid red !important;
}
Werk je met Flexbox of CSS Grid? Chrome en Firefox tonen handige badges (labels) naast elementen in het HTML-venster:
flex of grid badge naast een HTML-tag.:hov)Een knop verandert van kleur als je er met de muis overheen beweegt (:hover). Maar hoe pas je de CSS van die hover-status aan als je muis niet op de knop staat?
:hov.:hover, :active of :focus aan.Je hoeft niet elke smartphone op je bureau te leggen om te testen of je website responsief is. Gebruik de Device Mode in DevTools.
[ Dimensions: Responsive ▼ ] [ 375 x 667 ] [ 100% ▼ ]
──────────────────────────────────────────────────────────
┌─────────────────────────┐
│ Mobiele Weergave │
│ │
└─────────────────────────┘
Het Console-tabblad is het logboek van de browser. Hier zie je:
// Als je JavaScript gebruikt, kun je berichten naar deze console sturen:
console.log('DevTools is succesvol gekoppeld!');
Tip: Zie je dat een afbeelding of lettertype niet laadt? Kijk direct in de Console. Meestal staat er in het rood: Failed to load resource: the server responded with a status of 404 (Not Found). Je weet dan meteen dat het bestandspad niet klopt!
Hieronder staat een HTML/CSS-codeblok met een bewust ingebouwde fout: de kaart valt buiten de container en het hover-effect werkt niet naar behoren.
<div class="card-container">
<div class="card">
<h3>DevTools Test</h3>
<p>Waarom past deze kaart niet netjes in de container?</p>
<button class="btn">Lees Meer</button>
</div>
</div>
.card-container {
width: 300px;
background-color: #f1f5f9;
padding: 20px;
}
.card {
width: 320px; /* BUG 1: 320px breed in een container van 300px! */
background-color: #ffffff;
padding: 15px;
border-radius: 8px;
}
.btn {
background-color: #2563eb;
color: white;
padding: 10px 20px;
border: none;
}
/* BUG 2: Verkeerde selector geschreven voor hover */
.btn-hover {
background-color: #1d4ed8;
}
.card:card $320\text{px} + 30\text{px padding} = 350\text{px}$ inneemt, terwijl de container maar $300\text{px}$ is (minus padding).width: 320px; in width: 100%; of box-sizing: border-box;. De kaart past direct!<button class="btn">.:hov knop in het Styles-paneel en vink :hover aan..btn-hover staat in plaats van .btn:hover..btn:hover. De knop kleurt nu live donkerblauw bij hover!style.css-bestand.F12 of Inspecteren).margin, padding en border de afmetingen van een element beïnvloeden.:hov venster.