Website-Technologien erkennen: How Its Built vorgestellt

Welche Technik steckt hinter einer Website? Nutzt sie WordPress, Next.js oder Shopify? Welche Analytics-Dienste, CDN-Anbieter und JavaScript-Frameworks sind eingebunden?

Für solche Fragen habe ich How Its Built entwickelt: eine Browser-Erweiterung, die den sichtbaren Tech-Stack einer Website identifiziert und übersichtlich nach Kategorien sortiert. Der kostenlose Teil ist Open Source und funktioniert lokal im Browser.

Das Tool ist nicht nur für Entwickler interessant. Auch bei einem Website-Relaunch, einer technischen Bestandsaufnahme oder einer Wettbewerbsanalyse spart es den ersten manuellen Rechercheaufwand.

Die Startseite von How Its Built: Eine Domain eingeben und mit „Inspect“ die Analyse starten.

Warum sollte man den Tech-Stack einer Website kennen?

Eine Website besteht selten nur aus HTML und CSS. Häufig kommen ein Content-Management-System, mehrere JavaScript-Bibliotheken, ein Zahlungsanbieter, Analysewerkzeuge und zahlreiche externe Dienste dazu.

Die Auswahl dieser Komponenten beeinflusst Wartbarkeit, Ladezeiten, Datenschutz, Erweiterbarkeit und laufende Kosten. Deshalb ist es nützlich zu wissen, welche Werkzeuge tatsächlich eingesetzt werden – bei der eigenen Website genauso wie bei einem öffentlich sichtbaren Beispiel, dessen Umsetzung man verstehen möchte.

Das Problem: Ein Blick auf das Design verrät den Tech-Stack nicht. Zwei Websites können nahezu identisch aussehen und technisch völlig unterschiedlich aufgebaut sein.

Mit Browser-DevTools lassen sich Hinweise finden. Man muss dafür aber HTML untersuchen, Script-Dateien prüfen, Metadaten lesen und nach charakteristischen JavaScript-Variablen suchen. How Its Built automatisiert diese erste Sichtung.

Was erkennt How Its Built?

Die Extension vergleicht sichtbare Merkmale mit einer umfangreichen Sammlung von Technologie-Fingerprints. Erkennt sie einen passenden Hinweis, erscheint die Technologie mit Namen und Kategorie im Popup.

Technologie-Bereich	Typische Beispiele	Praktischer Nutzen
Frameworks	React, Vue, Angular, Next.js	Hinweise auf Frontend-Architektur und Rendering
Content-Management	WordPress und andere CMS	Plattform und mögliche Migrationsfragen erkennen
Shopsysteme	E-Commerce-Software und Payment-Integrationen	Checkout-Ökosystem einordnen
Analyse und Marketing	Analytics-Dienste, Tag-Manager, Pixel	Externe Mess- und Marketing-Werkzeuge identifizieren
Infrastruktur	CDN- und Hosting-Fingerprints	Hinweise auf Auslieferung und Dienste erhalten
Sonstige Tools	Chat-Widgets, Formulare, UI-Bibliotheken	Drittanbieter und Abhängigkeiten entdecken

Die Liste enthält mögliche Kategorien, keine Garantie für die Erkennung jeder Technologie. Bei vielen Backends gibt es überhaupt keinen zuverlässig erkennbaren Fingerprint im Browser.

Bedienung: drei Schritte

1. Öffnen Sie eine Website in Chrome oder einem kompatiblen Chromium-Browser.
2. Klicken Sie auf das Icon von How Its Built. Die Erweiterung scannt erst jetzt den aktiven Tab.
3. Sehen Sie die erkannten Technologien nach Kategorien sortiert oder kopieren Sie die Liste über Copy als Text.

Nach dem Scan zeigt das Toolbar-Badge die Anzahl erkannter Technologien. Navigieren Sie zur nächsten Seite, wird das Badge gelöscht. Die Extension untersucht nicht im Hintergrund jede aufgerufene Website.

Bei geöffnetem Popup kann nach etwa drei Sekunden ein zweiter lokaler Scan stattfinden. Das ist hilfreich für Webanwendungen, deren JavaScript-Komponenten erst etwas später geladen werden.

Wie funktioniert die Erkennung technisch?

Website-Technologie-Erkennung ist kein Raten anhand des Designs. Die Extension arbeitet mit Signaturen, die bestimmte technische Hinweise beschreiben.

Zu den lokal überprüften Signalen zählen:

• HTML und Meta-Tags: beispielsweise charakteristische Generator-Einträge und Markup-Strukturen.
• Skripte: Dateipfade und Inline-JavaScript, die auf bestimmte Technologien hindeuten.
• JavaScript-Globals: vom Frontend bereitgestellte Objekte und Eigenschaften.
• DOM-Strukturen: Elemente und Attribute, die bestimmte Frameworks oder Integrationen erzeugen.
• Cookies: Namen und gegebenenfalls Werte von Cookies, auf die JavaScript zugreifen darf.

Diese Signale werden lokal gesammelt und mit den gebündelten Fingerprints verglichen. Der Matching-Code berücksichtigt nicht nur einzelne Treffer, sondern auch Beziehungen zwischen Technologien. Eingelesene große Inhalte werden begrenzt, um die Untersuchung kontrollierbar zu halten.

Ein solcher Treffer ist dennoch kein endgültiger Architekturbeweis. Eine eingebundene Bibliothek kann veraltet sein oder gar nicht mehr aktiv genutzt werden. Umgekehrt können serverseitige Werkzeuge vollständig unsichtbar bleiben.

Die technische Umsetzung lässt sich im öffentlichen Repository nachvollziehen: Signalerfassung, Scan-Logik und Detection-Engine.

Datenschutz: Was die Erweiterung über Ihre Besuche weiß

Bei Browser-Erweiterungen ist der Berechtigungsumfang besonders wichtig. Ich wollte keinen permanenten Beobachter bauen, der alle besuchten Domains im Hintergrund auswertet.

Die aktuelle Free-Implementierung wertet die Signale auf Abruf lokal aus. Sie sendet weder die beim Scan gelesenen Seiteninhalte noch die Ergebnisse an unseren Server. Für Header-Hinweise kontaktiert sie die untersuchte Website; ein Benutzerkonto ist dafür nicht nötig.

Die Berechtigungen sind bewusst eingeschränkt:

Berechtigung	Aufgabe
activeTab	Temporärer Zugriff auf die Website nach dem Klick auf die Extension
scripting	Ausführung des mitgelieferten Erkennungscodes auf der aktiven Seite
storage	Lokale Aufbewahrung eines optionalen Account-Tokens
https://howitsbuilt.fyi/*	Verbindung zum eigenen Login- und Pro-Dienst

Die Extension fordert in der aktuellen Quellcodeversion kein <all_urls> und kein webRequest mehr an. Für Header-Hinweise sendet die Extension beim Scan eine einzelne Anfrage ohne Cookies an die Startseite der untersuchten Website. Diese Anfrage geht an die untersuchte Website, nicht an How Its Built.

Transparenz bedeutet auch, die lokale Erfassung korrekt zu beschreiben: Für die Technologieerkennung kann die Extension JavaScript-lesbare Cookie-Namen und -Werte inspizieren. HttpOnly-Cookies sind darüber nicht zugänglich. Beim kostenlosen Scan bleiben diese Informationen im Browser; für die freiwillige Pro-Abfrage wird dagegen die ausgewählte Domain an den Webdienst übermittelt.

Mehr dazu steht in der Dokumentation der Browser-Berechtigungen.

Browser-Erweiterung oder Website-Abfrage?

Unter howitsbuilt.fyi lässt sich eine Domain auch direkt über das Webinterface analysieren. Geben Sie die Domain in das Suchfeld ein und wählen Sie Inspect. Der kostenlose Web-Lookup ist laut Preisseite auf 20 neue Websites pro Tag begrenzt. Das unterscheidet sich technisch vom Browser-Scan.

	Browser-Extension	Website-Lookup
Ausgangspunkt	Bereits geöffnete Seite	Eingetragene Domain
Sichtbare Signale	Gerendertes DOM, JavaScript, HTML, Meta-Tags	Öffentlich abrufbares HTML und HTTP-Header
Zusätzliche Installation	Ja	Nein
Kostenloser Scan	Lokal und auf Klick	Serverbasierte Abfrage

Eine React- oder Vue-Anwendung kann sich erst nach dem Laden vollständig im Browser zu erkennen geben. Genau hier kann die Extension gegenüber einem einfachen Website-Lookup im Vorteil sein. Auch die Extension kann über eine Anfrage an die Startseite HTTP-Header berücksichtigen; die Ergebnisse beider Wege können sich dennoch unterscheiden.

Mein Rat: Für eine schnelle Domain-Recherche eignet sich die Website. Wenn Sie bereits auf der untersuchten Seite sind und die tatsächlich gerenderte Oberfläche analysieren möchten, ist die Extension oft aussagekräftiger. Beide Ansätze ergänzen sich.

Wie ich das Tool in der Webentwicklung einsetzen würde

1. Technische Bestandsaufnahme vor dem Relaunch

Eine bestehende Website soll modernisiert werden, aber es fehlen Unterlagen zur technischen Grundlage? Ein Scan kann Hinweise geben, ob ein CMS, ein Shopsystem oder bestimmte Frontend-Bibliotheken eingesetzt werden.

Das ersetzt kein Audit des Quellcodes oder der Serverumgebung. Es liefert aber erste Anhaltspunkte für das Gespräch mit dem Betreiber – und hilft dabei, die nächsten Fragen zu formulieren.

2. Wettbewerber und Design-Referenzen einordnen

Eine andere Website hat eine überzeugende Navigation, einen guten Checkout oder eine interessante Oberfläche. Statt lediglich die Gestaltung nachzubauen, kann man prüfen, welche sichtbaren Frameworks und Integrationen verwendet werden.

Das ist Inspiration, keine Anleitung zum Kopieren proprietärer Software. Ein gutes Ergebnis entsteht durch das Verständnis des Problems und eine passende eigene Lösung, nicht durch eine Liste bekannter JavaScript-Bibliotheken.

3. Externe Dienste und Tracking identifizieren

Die Erweiterung kann Anhaltspunkte für eingebundene Analytics-, Marketing- oder Chat-Werkzeuge liefern. Gerade bei gewachsenen Websites ist das hilfreich, um weitere Prüfungen zu priorisieren.

Aber: Eine erkannte oder fehlende Tracking-Technologie ist kein DSGVO-Audit. Die rechtliche Bewertung hängt unter anderem von der tatsächlichen Datenverarbeitung, Einwilligungen, Konfiguration und den verwendeten Diensten ab. Das kann ein Fingerprint-Scan nicht beurteilen.

4. Architekturentscheidungen gezielter vorbereiten

Wer überlegt, von WordPress auf ein anderes System zu wechseln, sollte nicht nur den sichtbaren CMS-Namen kennen. Wichtiger sind Funktionen, redaktionelle Abläufe, Integrationen, Datenmigration und Wartbarkeit.

Ein Tech-Stack-Scan liefert dafür den Anfang, nicht die Entscheidung. Bei größeren Projekten folgen technische Gespräche, Quellcodeprüfung, Performance-Messungen und Sicherheitsbetrachtungen.

Free und Pro: Was ist enthalten?

Die grundlegende Erkennung bleibt kostenlos: Technologien, Kategorien, Icons, auf der Seite gefundene Versionen und Kopieren der Ergebnisliste. Die Browser-Extension ist unter GPL-3.0-only veröffentlicht und kann selbst geprüft oder aus dem Quellcode gebaut werden.

Pro ergänzt erweiterte Angaben, soweit sie aus den Signalen ermittelbar sind: Confidence-Werte, konkrete Belege und zusätzliche Versionsinformationen. Über die Website sind zudem JSON- und CSV-Exporte möglich.

Auf der Preisseite ist Pro aktuell mit 4,99 US-Dollar pro Monat und sieben Tagen Testphase angegeben; zum Start ist eine Zahlungskarte nötig.

Laut Preisseite umfasst Pro außerdem Hosting- und DNS-Details, Mailprovider, Tracking-IDs, Mehrseiten-Scans, JavaScript-Rendering und eine Bewertung von Security-Headern. Welche Daten tatsächlich angezeigt werden, hängt von der untersuchten Website ab.

Ebenso gilt: Open Source ist die Extension. Das bedeutet nicht, dass der gesamte separate Webdienst einschließlich Pro-Backend öffentlich lizenziert ist.

Installation der Browser-Erweiterung

Die aktuelle GitHub-Veröffentlichung bietet ein ZIP für Chrome und Chromium-basierte Browser. Stand 27. Oktober 2026 ist das Version 0.3.0. Laden Sie das Chrome-ZIP herunter und entpacken Sie es. Öffnen Sie chrome://extensions, aktivieren Sie den Entwicklermodus, wählen Sie Entpackte Erweiterung laden und wählen Sie den entpackten Ordner. Anschließend können Sie das Icon anheften und auf einer Website anklicken.

Wer den Code selbst bauen möchte, findet die Befehle und den Quellcode im GitHub-Repository. Ob eine Store-Version verfügbar ist, prüfen Sie über die offizielle Projektseite.

Fazit: Sichtbare Technik schneller verstehen

How Its Built beantwortet eine begrenzte, aber hilfreiche Frage: Welche Technologien lassen sich auf dieser Website anhand der sichtbaren Merkmale erkennen?

Die kostenlose Extension liefert diese Antwort auf Klick und lokal im Browser. Das macht sie zu einem sinnvollen Ausgangspunkt für technische Recherche, Webentwicklung und die Vorbereitung eines Website-Relaunchs.

Nicht mehr – aber auch nicht weniger. Wer daraus eine Migrationsstrategie, ein Security-Audit oder eine Datenschutzbewertung ableiten will, muss die Ergebnisse anschließend fachlich überprüfen.

Links zum Projekt: How Its Built ausprobieren · Öffentlicher Extension-Quellcode · Issues und Feedback