Pagina-inspecteur
Analyseer elke live webpagina — lettertypen, kleuren, afbeeldingen en SVG’s. Werkt als bookmarklet op elke site.
Live demo — dit analyseerde deze pagina. Installeer de bookmarklet hieronder om elke website te inspecteren.
Deze pagina analyseren…
Gebruik op elke pagina (bookmarklet)
Wil je Pagina-inspecteur gebruiken zonder de pagina te verlaten waarop je zit? Sleep de knop hieronder naar je bladwijzerbalk en klik erop op een willekeurige website — Pagina-inspecteur opent daar ter plekke en draait volledig in je browser.
Gebruik verantwoord: Een bookmarklet draait op de pagina waarop je erop klikt. Vermijd gevoelige sites zoals online bankieren, betalingen of zorg — gebruik is op eigen risico. Alles wordt lokaal verwerkt en er worden geen gegevens verzonden. Zie onze Voorwaarden.
- Toon de bladwijzerbalk als die verborgen is — Ctrl+Shift+B (⌘+Shift+B op de Mac).
- Sleep de knop hierboven naar de bladwijzerbalk.
- Open een willekeurige website en klik op de bladwijzer — het Pagina-inspecteur-paneel verschijnt rechtsboven. Gebruik ✛ om van hoek te wisselen en ›/‹ om het tegen de rand te vouwen en weer uit te klappen.
- Klik nogmaals op de bladwijzer (of op ✕) om het te sluiten.
Let op: enkele sites met strikt beveiligingsbeleid kunnen bookmarklets blokkeren.
Voorbeelden
De lettertypen van een site identificeren
Invoer
Klik op de bookmarklet op een pagina → tabblad Lettertypen
Uitvoer
Inter — 400/600/700 · 142× Roboto Mono — 400 · 18×
Het kleurenpalet extraheren
Invoer
Tabblad Kleuren
Uitvoer
#111827 · 308 #2563EB · 47 #F9FAFB · 22 (klik om hex te kopiëren)
Afbeeldingen met formaat & grootte opsommen
Invoer
Tabblad Afbeeldingen
Uitvoer
logo.svg — SVG hero.webp — WEBP · 1600×900
Over deze tool
De Pagina-inspecteur is een gratis webpagina-analyzer die onthult hoe elke live site is gebouwd: de lettertypen die hij rendert, zijn kleurenpalet, elke afbeelding en inline-SVG, zijn links en een snel technisch overzicht. Hij draait volledig in je browser zonder upload, dus een snelle, privé manier om lettertypen op een site te vinden, kleuren te extraheren, afbeeldingen te controleren of een SVG-icoon te pakken — of je nu een ontwerper bent die een lay-out reverse-engineert, een ontwikkelaar aan het debuggen, of gewoon nieuwsgierig.
Zo gebruik je het
- Probeer de live demo hierboven — hij analyseert deze pagina zelf via de tabbladen Overzicht, Lettertypen, Kleuren, Afbeeldingen, SVG's en Links.
- Om een andere site te inspecteren, sleep je de knop Pagina-inspecteur hieronder naar je bladwijzerbalk.
- Open een willekeurige website en klik op de bladwijzer — er opent een paneel bovenop.
- Wissel van tabblad om de lettertypen te lezen, hex-kleuren te kopiëren, afbeeldingen te openen of inline-SVG-markup te kopiëren.
Wat het inspecteert
- Lettertypen — de daadwerkelijk gerenderde lettertypefamilies, met gewichten en cursief, gerangschikt op gebruik.
- Kleuren — tekst-, achtergrond- en randkleuren als hex, gerangschikt op frequentie zodat merkkleuren eerst verschijnen.
- Afbeeldingen — elke <img> plus CSS-achtergrondafbeeldingen, met formaat en natuurlijke afmetingen.
- SVG's — inline-SVG-iconen met voorbeeld en kopiëren van de markup met één klik.
- Links — alle links opgesplitst in intern en extern.
- Overzicht — titel, meta-beschrijving, canonical, aantal DOM-knopen, aantal scripts/stylesheets en geschatte HTML-grootte.
Omdat hij de gerenderde pagina leest, rapporteert hij de lettertypen en kleuren die gebruikers daadwerkelijk zien, niet alleen wat in een stylesheet is gedeclareerd. Om de SEO-tags te bouwen die hij toont, combineer je hem met de Meta-taggenerator.
Verantwoord gebruik
De Pagina-inspecteur is een ontwikkel- en leertool voor het analyseren van de structuur, stijlen en media van een pagina — dezelfde informatie die de ingebouwde ontwikkelaarstools van je browser al blootleggen. Hij kopieert, bewaart of verspreidt geen inhoud: afbeeldingen en video's openen in een nieuw tabblad, en SVG-code wordt alleen ter inspectie getoond. Alle afbeeldingen, video's en SVG's die je bekijkt, blijven eigendom van hun oorspronkelijke eigenaren (de website en haar auteurs). Je bent zelf verantwoordelijk voor hoe je gebruikt wat hij toont; hergebruik geen auteursrechtelijk beschermde middelen zonder toestemming. Zie onze Gebruiksvoorwaarden.
Veelgestelde vragen
Wat toont de Pagina-inspecteur?
Hij analyseert een live webpagina en somt de lettertypen op (met gewichten), de kleuren voor tekst, achtergronden en randen, elke afbeelding (met formaat en afmetingen), de inline-SVG's, de links (intern vs extern) en een snel overzicht — titel, beschrijving, aantal DOM-knopen, HTML-grootte en meer.
Hoe inspecteer ik een andere website, niet alleen deze?
Sleep de knop Pagina-inspecteur naar je bladwijzerbalk, open een willekeurige website en klik dan op de bladwijzer. Boven die pagina opent een paneel met haar lettertypen, kleuren, afbeeldingen, SVG's en links. De demo op deze pagina voert precies dezelfde analyse uit op de pagina die je nu leest.
Moet ik een extensie installeren?
Nee. Het is een bookmarklet — een gewone bladwijzer waarvan het adres een klein stukje JavaScript is. Er valt niets te installeren en geen rechten te verlenen; hij draait alleen als je erop klikt, en alleen op het tabblad dat je bekijkt.
Vindt hij de lettertypen die een website gebruikt?
Ja. Hij leest de berekende font-family van elk tekstelement, dus rapporteert de lettertypen die daadwerkelijk op het scherm worden gerenderd (niet alleen die in CSS zijn gedeclareerd), samen met de gewichten en of cursief wordt gebruikt. Een snelle manier om de typografie van elke site te identificeren.
Kan hij het kleurenpalet van een pagina extraheren?
Ja. Hij verzamelt de tekst-, achtergrond- en randkleuren van elk element, zet ze om naar hex en rangschikt ze op hoe vaak ze voorkomen, zodat de dominante merkkleuren bovenaan komen. Klik op een staal om de hex-code te kopiëren.
Worden mijn gegevens ergens geüpload?
Nee. Alles draait lokaal in je browser — de inspecteur leest alleen de pagina waar je bent en stuurt nooit iets naar een server. Geen registratie en volledig gratis.
Waarom ontbreken sommige afbeeldingen of kleuren?
De inspecteur leest de gerenderde DOM, dus afbeeldingen die lazy onder de vouw worden geladen, inhoud in cross-origin-iframes of stijlen die na een klik worden toegepast, verschijnen mogelijk pas als ze op de pagina staan. Scan opnieuw na scrollen of interactie om ze op te pikken.