Keuze
In deze opleiding maken we gebruik van Chromium-based browsers; dit zijn browsers gebaseerd op Google's open source Chromium project. Voorbeelden zijn uiteraard Google Chrome zelf, maar ook Microsoft Edge, Opera en Brave - eigenlijk zowat alle browsers behalve Apple Safari (gebaseerd op Webkit) en Mozilla Firefox (gebaseerd op Gecko). Voor dit vak gebruik je een chromium based browser, dus elke browser behalve Safari of Mozilla. Op MAC/OSx installer je best een alternatief als Google Chrome (link).
Extensies
Extensies breiden de mogelijkheden van je browser uit. Enkele aanraders:
- ColorZilla - hiermee kan je met een pipet kleuren vinden op een webpagina
- Lighthouse - analyseert performantie, compressie en algemene kwaliteit van webpagina's
- Wave - analyseert hoe toegankelijk je webpagina is
- Save ChatGPT as PDF - exporteren van een chatGPT chat naar PDF
- GoFullPage - handig om screenshots te nemen van webpagina's (optioneel)
Als alles goed is, zou je ze rechtsboven moeten vinden onder het puzzel icoon, waar je ook kan kiezen welke je zichtbaar houdt op de toolbar:
Developer tools
Openen
Elke degelijke browser heeft tegenwoordig developer tools ingebouwd. Open in elke webpagina met F12 of Ctrl-Shift-I.
Je kan de tools net zoals de browser in- en uitzoomen met Ctrl-+ en Ctrl-−
Docken
Je kan het via de Dock to Location knop docken waar je wil: rechts, onder... of zelfs als apart venster — handig als je een tweede monitor hebt:
Activity bar
De activity bar is de knoppenrij met alle beschikbare tools.
positie
Je kan het boven of links plaatsen. Ik persoonlijk vind links makkelijker als je de devtools rechts geplaatst hebt:
aanpassen
Je kan tools aan de activity bar toevoegen via het plusteken:
Inspector
De inspector is het meest gebruikte onderdeel van de developer tools. Klik de inspector knop, en duid dan een element aan om de HTML en CSS eigenschappen te inspecteren:
Hoe je alle informatie moet interpreteren en gebruiken wordt uitgelegd in het deel Elements.
Device emulation
Inspecteer de pagina voor verschillende toestellen via de device emulator knop:
Elements
Dit is veruit het belangrijkste onderdeel voor de web developer. Het bestaat uit twee delen: een HTML inspector, en een CSS inspector.
HTML
Het HTML panel bevat alle HTML code (d.i. de structuur) nadat de pagina geparsed is. Het is belangrijk te begrijpen dat dit niet hetzelfde is als de broncode (roep op met Ctrl-U), dat is de rauwe HTML code vóór alle scripts, die b.v. dynamisch content kunnen inladen, werden uitgevoerd
De verschillende onderdelen van de pagina kan je inspecteren met de inspector.
elementen en attributen
Inspecteer b.v. deze afbeelding:
Je ziet:
- welk HTML element gebruikt werd — hier: een
<img>element - welke attributen dit element heeft — hier:
src(de bron),widthenheight(standaardafmetingen),alt(beschrijving) enloading(manier van laden) - een popupvenster met een paar eigenschappen, in dit geval de (werkelijke) afmetingen
element state
Een HTML element kan verschillende uitzichten hebben naargelang de staat, denk b.v. aan een ingedrukte knop die van kleur verandert, een link die bij hover een lijntje krijgt... Om die te kunnen inspecteren gebruik je dit subpanel (merk op hoe de stijlen veranderen):
CSS
De CSS (of Cascading StyleSheets) is de opmaak: kleuren, lettertypes, layout... We beperken ons tot de twee belangrijkste: Styles en Computed.
styles tab
De styles tab toont alle CSS regels die van toepassing zijn op een element. Deze regels kunnen in verschillende CSS bestanden gecombineerd worden, en kunnen daardoor aanvullen, overlappen of overschrijven. De overschreven regels zijn doorstreept:
Probeer je ook alvast de CSS terminologie eigen te maken:
- selector: op welke elementen de stijl van toepassing is
- stijlregel: property met waarde, b.v.
color: blue - property: de stijl die je wil instellen, b.v.
color - waarde: de ingestelde waarde, b.v.
blue
Er bestaan tientallen eenheden in CSS, zie de CSS cursus. Voorlopig volstaat het dat in de meeste gevallen 1rem = 10px.
De browser (ook user agent genoemd) voorziet zelf ook standaardstijlen voor HTML elementen. Je herkent ze aan de schuine weergave:
computed tab
Met al die overlappende/overschrijvende stijlen is het soms lastig te zien welke stijl het nu uiteindelijk geworden is. Daarvoor dient de computed tab:
Console
Hier vind je alle waarschuwingen en foutmeldingen:
- scriptfouten
- veiligheidswaarschuwingen
- netwerkfouten
- allerhande logs
- niet gevonden afbeeldingen en andere bestanden
- ...
Network
De network tab toont alle netwerkactiviteit van de pagina:
Klik op een request om alle response informatie te zien:
Sources
De sources tab toont een boomstructuur van alle bronnen (afbeeldingen, scripts, bestanden...) gebruikt in deze pagina en waar ze vandaan komen:
Performance
De performance tab gaan we niet direct gebruiken, maar vermelden we toch voor de volledigheid. Daarmee kan je een analyse maken van de performantie van de pagina, en waar de knelpunten liggen:
Application
Onder de application tab vind je informatie over de code opbouw als background services, gegevensopslag enz... Het meeste is redelijk technisch, maar wel interessant zijn de cookies en localStorage (een soort modernere versie van cookies):
Experimenteren met code
Je kan alle weergegeven HTML en CSS aanpassen in de developer tools. Denk aan:
- HTML nodes verwijderen
- HTML teksten en attribuutwaarden veranderen
- CSS waarden als kleuren of lettertypes veranderen
- andere kleuren uitproberen
- CSS stijlen aan- en uitzetten
- ...
De wijzigingen gaan uiteraard wel verloren bij het verversen van de pagina, maar het is ideaal om een paar dingen uit te proberen.