Seiten-Inspektor
Jede Live-Webseite analysieren — Schriften, Farben, Bilder und SVGs. Läuft als Bookmarklet auf jeder Website.
Live-Demo — dies analysierte diese Seite. Installiere das Bookmarklet unten, um jede Website zu inspizieren.
Diese Seite wird analysiert…
Auf jeder Seite nutzen (Bookmarklet)
Du möchtest Seiten-Inspektor nutzen, ohne die aktuelle Seite zu verlassen? Zieh den Button unten in deine Lesezeichenleiste und klicke ihn auf einer beliebigen Website an — Seiten-Inspektor öffnet sich direkt dort und läuft vollständig in deinem Browser.
Verantwortungsvoll nutzen: Ein Bookmarklet läuft auf der Seite, auf der du es anklickst. Meide sensible Websites wie Online-Banking, Zahlungen oder Gesundheitsseiten — die Nutzung erfolgt auf eigenes Risiko. Alles wird lokal verarbeitet, es werden keine Daten gesendet. Siehe unsere Nutzungsbedingungen.
- Blende die Lesezeichenleiste ein, falls sie verborgen ist — Ctrl+Shift+B (⌘+Shift+B auf dem Mac).
- Zieh den Button oben auf die Lesezeichenleiste.
- Öffne eine beliebige Website und klicke das Lesezeichen — das Seiten-Inspektor-Panel erscheint oben rechts. Mit ✛ wechselst du die Ecke, mit ›/‹ klappst du es an den Rand und wieder heraus.
- Klicke das Lesezeichen erneut (oder ✕), um es zu schließen.
Hinweis: Einige Websites mit strengen Sicherheitsrichtlinien können Bookmarklets blockieren.
Beispiele
Schriften einer Website identifizieren
Eingabe
Bookmarklet auf einer Seite klicken → Reiter Schriften
Ausgabe
Inter — 400/600/700 · 142× Roboto Mono — 400 · 18×
Farbpalette extrahieren
Eingabe
Reiter Farben
Ausgabe
#111827 · 308 #2563EB · 47 #F9FAFB · 22 (klicken für Hex-Kopie)
Bilder mit Format & Größe auflisten
Eingabe
Reiter Bilder
Ausgabe
logo.svg — SVG hero.webp — WEBP · 1600×900
Über dieses Tool
Der Seiten-Inspektor ist ein kostenloser Webseiten-Analyzer, der offenlegt, wie eine beliebige Live-Site gebaut ist: die Schriften, die sie rendert, ihre Farbpalette, jedes Bild und Inline-SVG, ihre Links und eine schnelle technische Übersicht. Er läuft komplett in deinem Browser ohne Upload und ist damit ein schneller, privater Weg, Schriften auf einer Website zu finden, Farben zu extrahieren, Bilder zu prüfen oder ein SVG-Icon zu holen — ob als Designer, der ein Layout nachbaut, als Entwickler beim Debuggen oder einfach aus Neugier.
So funktioniert's
- Probier die Live-Demo oben — sie analysiert genau diese Seite über die Reiter Übersicht, Schriften, Farben, Bilder, SVGs und Links.
- Um eine andere Site zu inspizieren, zieh den Button Seiten-Inspektor unten in deine Lesezeichenleiste.
- Öffne eine beliebige Website und klicke das Lesezeichen an — darüber öffnet sich ein Panel.
- Wechsle die Reiter, um ihre Schriften zu lesen, Hex-Farben zu kopieren, Bilder zu öffnen oder Inline-SVG-Markup zu kopieren.
Was es inspiziert
- Schriften — die tatsächlich gerenderten Schriftfamilien, mit Schnitten und Kursiv, nach Nutzung sortiert.
- Farben — Text-, Hintergrund- und Rahmenfarben als Hex, nach Häufigkeit sortiert, sodass Markenfarben zuerst erscheinen.
- Bilder — jedes <img> plus CSS-Hintergrundbilder, mit Format und natürlichen Abmessungen.
- SVGs — Inline-SVG-Icons mit Vorschau und Ein-Klick-Ansicht des Markups.
- Links — alle Links aufgeteilt in intern und extern.
- Übersicht — Titel, Meta-Beschreibung, Canonical, DOM-Knotenzahl, Skript-/Stylesheet-Anzahl und ungefähre HTML-Größe.
Da er die gerenderte Seite liest, meldet er die Schriften und Farben, die Nutzer tatsächlich sehen, nicht nur die im Stylesheet deklarierten. Zum Bauen der SEO-Tags, die er anzeigt, kombiniere ihn mit dem Meta-Tag-Generator.
Verantwortungsvolle Nutzung
Der Seiten-Inspektor ist ein Entwickler- und Lernwerkzeug zur Analyse der Struktur, Stile und Medien einer Seite — dieselben Informationen, die die eingebauten Entwicklertools deines Browsers bereits offenlegen. Er kopiert, speichert oder verbreitet keine Inhalte: Bilder und Videos öffnen in einem neuen Tab, und SVG-Code wird nur zur Ansicht gezeigt. Alle Bilder, Videos und SVGs, die du ansiehst, bleiben Eigentum ihrer ursprünglichen Inhaber (der Website und ihrer Autoren). Du bist allein dafür verantwortlich, wie du das Angezeigte verwendest; verwende urheberrechtlich geschützte Assets nicht ohne Erlaubnis erneut. Siehe unsere Nutzungsbedingungen.
Häufig gestellte Fragen
Was zeigt der Seiten-Inspektor?
Er analysiert eine Live-Webseite und listet ihre Schriften (mit Schnitten), die für Text, Hintergründe und Rahmen verwendeten Farben, jedes Bild (mit Format und Abmessungen), die Inline-SVGs, die Links (intern vs. extern) und eine Kurzübersicht — Titel, Beschreibung, DOM-Knotenzahl, HTML-Größe und mehr.
Wie inspiziere ich eine andere Website, nicht nur diese?
Zieh den Seiten-Inspektor-Button in deine Lesezeichenleiste, öffne eine beliebige Website und klicke dann das Lesezeichen an. Über dieser Seite öffnet sich ein Panel mit ihren Schriften, Farben, Bildern, SVGs und Links. Die Demo auf dieser Seite führt genau dieselbe Analyse auf der Seite aus, die du gerade liest.
Muss ich eine Erweiterung installieren?
Nein. Es ist ein Bookmarklet — ein normales Lesezeichen, dessen Adresse ein kleines Stück JavaScript ist. Es gibt nichts zu installieren und keine Berechtigungen zu erteilen; es läuft nur, wenn du es anklickst, und nur auf dem Tab, den du gerade ansiehst.
Findet es die Schriften, die eine Website verwendet?
Ja. Es liest die berechnete font-family jedes Textelements, meldet also die tatsächlich auf dem Bildschirm gerenderten Schriften (nicht nur die im CSS deklarierten), samt Schnitten und ob Kursiv verwendet wird. Eine schnelle Art, die Typografie jeder Seite zu identifizieren.
Kann es die Farbpalette einer Seite extrahieren?
Ja. Es sammelt die Text-, Hintergrund- und Rahmenfarben jedes Elements, wandelt sie in Hex um und ordnet sie nach Häufigkeit, sodass die dominanten Markenfarben nach oben steigen. Klicke ein Farbfeld an, um seinen Hex-Code zu kopieren.
Werden meine Daten irgendwohin hochgeladen?
Nein. Alles läuft lokal in deinem Browser — der Inspektor liest nur die Seite, auf der du bist, und sendet nie etwas an einen Server. Keine Anmeldung und komplett kostenlos.
Warum fehlen einige Bilder oder Farben?
Der Inspektor liest das gerenderte DOM, daher erscheinen unterhalb der Falz lazy geladene Bilder, Inhalte in Cross-Origin-iframes oder nach einem Klick angewendete Stile eventuell erst, wenn sie auf der Seite sind. Scanne nach dem Scrollen oder Interagieren erneut, um sie zu erfassen.