browser-inspector-mcp

Gibt deinem KI-Coding-Tool dieselbe CSS-Sichtbarkeit, die du in den Browser-DevTools hast.

Bevor deine KI CSS schreibt, lass sie sehen, was tatsächlich im Browser passiert – die echten gerenderten Klassennamen, die vollständige Kaskade der Regeln, was gewinnt und warum. Dieselben Daten, die ein Mensch aus den DevTools erhält. Kein manuelles Kopieren und Einfügen mehr.

Vollständige Dokumentation und Visualisierungen →

Voraussetzungen: Node.js 18+, ein MCP-kompatibles KI-Tool (Claude Code, Cursor, Windsurf, Cline, etc.), ein laufender lokaler Entwicklungsserver.

Konfiguration (füge dies zur MCP-Konfigurationsdatei deines KI-Tools hinzu):

{
  "mcpServers": {
    "browser-inspector": {
      "command": "npx",
      "args": ["-y", "browser-inspector-mcp"]
    }
  }
}

Speicherorte der Konfigurationsdatei:

• Claude Code: ~/.claude.json

• Cursor: ~/.cursor/mcp.json oder .cursor/mcp.json

• Windsurf: ~/.codeium/windsurf/mcp_config.json

• Andere: wo auch immer dein Tool die MCP-Server-Konfiguration liest

Starte dein KI-Tool neu. Sag deiner KI beim ersten Aufruf, unter welcher URL dein Entwicklungsserver läuft – die Browsersitzung bleibt für den Rest der Konversation bestehen.

Ein Tool, vier Aktionen: browser_inspect mit action: "dom" (gerendertes DOM), "styles" (vollständige CSS-Kaskade), "diff" (Vorher/Nachher-Überprüfung), "screenshot" (visueller Schnappschuss). Oder beschreibe einfach, was du brauchst – Claude wählt die richtige Aktion aus.

Bei der ersten Verwendung lädt Puppeteer Chromium herunter (~170 MB).

Bevor du startest – was du brauchst

Dieses Tool verbindet zwei Dinge, die du bereits eingerichtet haben musst: ein KI-Coding-Tool und ein Webprojekt, an dem du aktiv arbeitest. Hier ist, was das jeweils bedeutet und wie du es bekommst.

1. Node.js (die Engine, die dieses Tool ausführt)

Node.js ist ein Programm, mit dem dein Computer JavaScript außerhalb eines Browsers ausführen kann. npm und npx – die Befehle, die zum Installieren und Ausführen dieses Tools verwendet werden – sind in Node.js enthalten.

Hast du es schon? Öffne das Terminal (Mac) oder die Eingabeaufforderung (Windows) und gib ein:

node --version

Wenn du eine Versionsnummer wie v20.11.0 siehst, ist alles in Ordnung. Wenn du einen Fehler erhältst, musst du es installieren.

Installieren: Lade es von nodejs.org herunter – nimm die LTS-Version (diejenige, die als "Empfohlen für die meisten Benutzer" gekennzeichnet ist). Führe das Installationsprogramm aus. Das war's.

2. Ein KI-Coding-Tool

Dies ist das Tool, in das du tippst, wenn du die KI bittest, Code zu schreiben oder zu korrigieren. Dieser MCP-Server funktioniert mit jedem der folgenden – du benötigst nur eines:

Wenn du noch keines hast und nicht sicher bist, wo du anfangen sollst: Probiere Cursor. Es hat die sanfteste Lernkurve, wenn du aus dem Design-Bereich kommst.

3. Was MCP ist (ein Satz)

MCP (Model Context Protocol) ist ein Standard, um KI-Tools Zugriff auf zusätzliche Funktionen zu geben – wie einen Browser, eine Datenbank oder dein Dateisystem. Dieses Tool ist eine dieser Funktionen. Du installierst es, indem du ein paar Zeilen Konfiguration zu deinem KI-Tool hinzufügst, und es erscheint automatisch in der Toolbox deiner KI.

4. Ein lokal laufendes Webprojekt

Dieses Tool inspiziert CSS in einem Live-Browser. Das bedeutet, dass du ein Webprojekt auf deinem Computer laufen haben musst – normalerweise eine React-, Vue- oder ähnliche App, die du aktiv entwickelst.

Wenn du dein Projekt lokal ausführst, öffnet es sich unter einer Adresse wie http://localhost:5173 oder http://localhost:3000. Das ist die URL, die du diesem Tool gibst.

Wenn du kein lokales Projekt hast, hat dieses Tool nichts zu inspizieren. Es ist für aktive Entwicklungsworkflows konzipiert, nicht für die Inspektion öffentlicher Live-Websites.

Installation

Du musst vorab nichts installieren. Wenn du dein KI-Tool konfigurierst (nächster Schritt), lädt es browser-inspector-mcp automatisch beim ersten Bedarf mit einem Tool namens npx herunter und führt es aus.

Beim ersten Ausführen wird auch ein Browser namens Chromium (~170 MB) heruntergeladen. Dies ist der Headless-Browser, den das Tool verwendet, um deine Seite zu inspizieren – er läuft unsichtbar im Hintergrund und hat nichts mit deinem normalen Chrome oder Safari zu tun.

Konfiguration deines KI-Tools

Du musst ein kleines Stück Konfiguration – einen JSON-Block – zu einer Datei auf deinem Computer hinzufügen. JSON ist nur ein strukturiertes Textformat. Der Block sieht so aus:

{
  "mcpServers": {
    "browser-inspector": {
      "command": "npx",
      "args": ["-y", "browser-inspector-mcp"]
    }
  }
}

Die Datei, zu der du ihn hinzufügst, hängt davon ab, welches KI-Tool du verwendest. Finde deines unten.

Wichtig: Wenn die Konfigurationsdatei bereits andere Inhalte enthält, fügst du sie hinzu – du ersetzt sie nicht. Siehe die Beispiele unten.

Claude Code

Dateispeicherort: ~/.claude.json

Das ~ steht für deinen Benutzerordner. Auf einem Mac ist das /Users/deinname/. Die Datei existiert möglicherweise noch nicht – falls nicht, erstelle sie.

Öffne das Terminal und führe aus:

open -e ~/.claude.json

Dies öffnet die Datei in TextEdit. Wenn die Datei nicht existierte, erstelle eine neue und füge Folgendes ein:

{
  "mcpServers": {
    "browser-inspector": {
      "command": "npx",
      "args": ["-y", "browser-inspector-mcp"]
    }
  }
}

Wenn die Datei bereits Inhalt hat, suche den Abschnitt "mcpServers" und füge den "browser-inspector"-Block darin ein. Lösche nicht, was bereits dort steht.

Speichere die Datei, dann beende Claude Code und öffne es erneut.

Cursor

Dateispeicherort: ~/.cursor/mcp.json (gilt für alle deine Projekte) oder .cursor/mcp.json innerhalb eines bestimmten Projektordners (gilt nur für dieses Projekt)

Gehe in Cursor zu: Settings → MCP – es gibt normalerweise eine Benutzeroberfläche, um MCP-Server direkt hinzuzufügen, was einfacher ist, als die Datei manuell zu bearbeiten. Wenn du die Datei lieber bearbeiten möchtest, füge denselben JSON-Block wie oben ein.

Starte Cursor neu, nachdem du gespeichert hast.

Windsurf

Dateispeicherort: ~/.codeium/windsurf/mcp_config.json

Öffne die Datei, füge denselben JSON-Block hinzu, speichere und starte Windsurf neu.

Cline (VS Code-Erweiterung)

In VS Code mit installiertem Cline: Öffne die Cline-Seitenleiste → klicke auf das Einstellungssymbol → finde "MCP Servers" → füge einen neuen Server mit dem Befehl npx und den Argumenten ["-y", "browser-inspector-mcp"] hinzu.

Andere Tools (Continue, OpenCode, Codex, etc.)

Jedes MCP-kompatible Tool akzeptiert denselben Konfigurationsblock. Finde heraus, wo dein Tool seine MCP-Server-Konfiguration speichert, und füge sie dort hinzu.

Verwendung

Sobald sie konfiguriert sind, stehen die Tools automatisch zur Verfügung. Du rufst sie nicht beim Namen auf – beschreibe einfach, woran du arbeitest.

Sitzung starten: Sag deiner KI, unter welcher URL dein Entwicklungsserver läuft:

I'm working on the dashboard at http://localhost:5173 — the button styles aren't applying correctly.

Die KI wird die Tools verwenden, die sie benötigt. Die Browsersitzung bleibt für die gesamte Konversation geöffnet – du musst die URL nur einmal erwähnen.

Was die KI hinter den Kulissen tut:

You:  "The icon in the panel header isn't picking up the brand color"

AI:   → browser_inspect(action="dom", selector=".panel-header")
        sees the real rendered class names, finds the icon is <span class="panel__header-icon">
      → browser_inspect(action="styles", selector=".panel__header-icon", properties=["color"])
        sees there's an explicit color rule on the icon overriding the parent
      → fixes the right rule, first try

Keine DevTools. Kein Kopieren und Einfügen. Kein Hin und Her.

Das Problem, das dies löst

Was normalerweise passiert

Du bittest dein KI-Tool, ein Styling-Problem zu beheben. Es liest die Quelldateien, schreibt eine CSS-Änderung und wendet sie an. Du überprüfst den Browser. Immer noch falsch. Die KI versucht es erneut. Immer noch falsch. Nach ein paar Runden öffnest du selbst die DevTools, findest das tatsächliche Element, kopierst das HTML, fügst es zurück in den Chat ein – und erst dann versteht die KI, womit sie es tatsächlich zu tun hatte.

Dieser manuelle Kopier-und-Einfüge-Schritt? Das ist die Lücke, die dieses Tool schließt.

Warum es immer wieder passiert

KI liest Quelldateien. Browser rendern etwas anderes.

Moderne Komponentenbibliotheken wie Ant Design, Material UI und Radix generieren ihre eigenen Klassennamen zur Laufzeit – Namen, die nirgendwo in deinem Quellcode auftauchen. Dein JSX sagt <Menu>. Der Browser rendert ant-dropdown-menu-item-container. Die KI schreibt CSS für ant-menu-item, weil sie das im Quellcode gefunden hat. Die Regel greift nie.

Es gibt noch ein zweites Problem: Selbst wenn die KI das richtige Element anvisiert, kann sie nicht bestätigen, ob ihre Änderung angekommen ist. Hat das CSS gegriffen? Hat etwas anderes es überschrieben? War font-weight bereits fett oder sah es nur so aus? Ohne DevTools ist jede Antwort ein Raten.

Drei Szenarien, wie sich das abspielt

Problem 1 – Das Rezept lesen, nicht das Gericht

Ein Schneider studiert das ursprüngliche Schnittmuster für einen Anzug – die flache Papiervorlage. Er kennt jede Naht. Aber der Anzug vor ihm wurde von jemand anderem genäht, der Änderungen vorgenommen hat. Das Muster ist nicht das, was gebaut wurde.

Das ist KI, die CSS-Quelldateien liest. Sie liest das ursprüngliche Muster. Der Browser hat etwas anderes gerendert. Die KI ändert immer wieder die falsche Naht.

Der Inspektor ist die Umkleidekabine. Du prüfst, was tatsächlich gebaut wurde, bevor du es anfasst.

Problem 2 – Die Antenne einstellen

Du bist im Garten und stellst eine TV-Antenne ein. Jemand drinnen beobachtet das Bild. Jedes Mal, wenn du sie bewegst, rufst du "besser oder schlechter?" und wartest. Jede Anpassung ist ein Hin und Her.

Das ist der Push-Check-Push-Zyklus. Die KI nimmt eine Änderung vor. Du gehst zum Browser. Du schaust. Du kommst zurück und tippst, was du gesehen hast. Jede Schleife ist ein Hin und Her ohne direkte Verbindung zwischen der Person, die die Antenne hält, und der Person, die auf den Bildschirm schaut.

Dieses Tool ist das Kabel. Die KI prüft das Ergebnis selbst, ohne dass du hin und her laufen musst.

Problem 3 – Den falschen Patienten behandeln

Ein Arzt sieht jemanden, der blass und müde aussieht. Ohne ihn zu untersuchen, vermutet er Eisenmangel und verschreibt entsprechendes. Sechs Wochen später hat sich nichts geändert. Es war die ganze Zeit die Schilddrüse.

Die KI sieht Text, der auf einem Screenshot fett erscheint. Sie nimmt an, dass font-weight hoch eingestellt ist. Sie versucht, es zu überschreiben. Aber der Wert war 400 – der Text wurde bei dieser Größe einfach so gerendert. Die KI hat die Sitzung damit verbracht, ein Problem zu lösen, das nicht existierte.

Inspiziere, bevor du verschreibst. Der berechnete Wert ist die Untersuchung.

Für wen es ist

Designer, die KI-Coding-Tools verwenden – Cursor, Claude Code, Windsurf, Cline. Du denkst und verifizierst visuell. Das Öffnen der DevTools und das Einfügen von HTML in einen Chat ist ein störender Kontextwechsel, der deinen Fluss unterbricht. Dies entfernt diesen Schritt vollständig.

Frontend-Entwickler, die möchten, dass ihr KI-Pair-Programmierer den Kreislauf selbst schließt – inspizieren, ändern, verifizieren –, ohne dass man ihm erklären muss, was der Browser tatsächlich rendert.

Design-System-Mitwirkende, die mit Komponentenbibliotheken arbeiten, bei denen Laufzeit-Klassennamen nicht mit der Quelle übereinstimmen. Ant Design, Material UI, Radix, Shadcn – überall dort, wo der Browser eine andere Struktur aufbaut als die im JSX.

Jeder, der CSS debuggt und schon einmal gesagt hat "warum greift das nicht?" und sich gewünscht hat, die KI könnte einfach in den Browser schauen, anstatt zu raten.

Funktioniert neben claude --chrome

Die claude --chrome-Integration von Anthropic ermöglicht es Claude Code, zu navigieren, zu klicken, Formulare auszufüllen und Screenshots in deinem Live-Browser zu machen. browser-inspector-mcp macht etwas anderes: Es liest die CSS-Kaskade – welche Regel gewinnt, woher sie kommt, warum ein Stil nicht greift.

Sie sind für unterschiedliche Aufgaben gedacht. Ein guter Workflow: Verwende claude --chrome, um zu dem Zustand zu navigieren, den du inspizieren möchtest, und verwende dann browser-inspector-mcp, um das CSS zu debuggen. Kein Tool ersetzt das andere.

Ein Tool, vier Aktionen

dom – Sieh, was der Browser tatsächlich gebaut hat

Bevor die KI CSS schreibt, ruft sie dies auf. Gibt das echte gerenderte HTML zurück – tatsächliche Laufzeit-Klassennamen, tatsächliche DOM-Struktur – für jedes Element, auf das du zeigst.

Das ist die Umkleidekabine. Die KI prüft, was tatsächlich gebaut wurde, bevor sie es anfasst.

styles – Sieh jede CSS-Regel und wer gewinnt

Wenn eine Stiländerung nicht angezeigt wird, gibt dies die vollständige CSS-Kaskade für ein Element zurück: jede Regel, die gegriffen hat, in der Reihenfolge, woher sie kommt (Stylesheet + Zeilennummer) und welche Eigenschaften aktiv vs. überschrieben sind.

Geht auch bis zu