DevLensPro
DevLensPro · Coding
DevLensPro ist eine kostenlose, quelloffene Browser-Erweiterung, die Ihren Browser mit Claude Code verbindet. Sie halten Option gedrückt, klicken auf ein beliebiges Element einer Seite, und die Erweiterung übergibt Claude Code den vollen Kontext, um den passenden Code zu finden und zu korrigieren: Selektor, Styles, Screenshot, Konsolenprotokolle und React-Komponenteninfos. Es ist ein KI-UI-Debugging-Tool für Entwickler, die ohnehin in Claude Code arbeiten. Was ändert sich? Sie hören auf zu beschreiben, was auf dem Bildschirm falsch aussieht. Wie funktioniert es also?
Über DevLensPro
Was ist DevLensPro
DevLensPro ist eine Chrome-Erweiterung, die einen Klick im Browser in eine Aufgabe in Claude Code verwandelt. Statt eine URL zu kopieren, einen kaputten Button zu beschreiben und eine ganze Codebasis zu durchsuchen, zeigen Sie auf das Problem und lassen die KI es bis zur Quelldatei zurückverfolgen. Das Tool behält alles auf Ihrem Rechner und spricht über das Model Context Protocol (MCP) mit Claude Code, dazwischen liegt also kein Cloud-Konto.
Das Hauptproblem, das es löst, ist die Distanz. Front-End-Fehler leben meist auf einer gerenderten Seite, die Korrektur aber im Code. Diese Lücke von Hand zu schließen ist langsam. DevLensPro schließt sie, indem es den sichtbaren Kontext, das angewandte CSS, die Konsolenausgabe und den Pfad der React-Komponente an einen einzigen Klick hängt. Das ist die Kernidee.
Die größte Einschränkung ist die Einrichtung. DevLensPro funktioniert nur mit Claude Code, und die Erweiterung wird manuell im Entwicklermodus installiert statt aus einem Store. Das heißt: keine Ein-Klick-Updates und keine automatischen Versionsprüfungen, die eine veröffentlichte Erweiterung für Sie erledigen würde. Wenn Sie Claude Code nicht nutzen, gibt es hier noch nichts für Sie.
Erste Schritte
- Installieren Sie die Chrome-Erweiterung DevLensPro, indem Sie sie im Entwicklermodus über die Erweiterungsseite des Browsers unverpackt laden.
- Verbinden Sie sie über das MCP-Protokoll mit Claude Code; die Website vermerkt, dass über die native Integration hinaus keine zusätzliche Einrichtung nötig ist.
- Öffnen Sie Ihre laufende App im Browser und halten Sie Option gedrückt, während Sie auf das Element klicken, das Sie ändern wollen.
- Fügen Sie eine kurze Notiz hinzu und klicken Sie auf AI Enhance, wenn Sie eine strukturierte, detaillierte Aufgabenbeschreibung möchten, dann senden Sie sie ab.
- Sehen Sie zu, wie Claude Code die Seiten-URL Ihrem lokalen Projektordner zuordnet, den Code findet und die Korrektur anwendet.
Produktinformationen
Ein kurzer Überblick über Preise, unterstützte Plattformen und die Leistung von DevLensPro.
Am besten für
Die Nutzer, Aufgaben und Szenarien, für die dieses Tool am besten passt.
Nutzer
- Front-End-Entwickler, die Claude Code nutzen
- React-Entwickler
- Solo-Entwickler und Indie-Hacker
Aufgaben
- Layout- und Styling-Fehler beheben
- Laufzeitfehler debuggen
- Rohe Notizen in Aufgabenbeschreibungen verwandeln
Szenarien
- Einen lokalen Entwicklungs-Build prüfen
- Kleine UI-Anpassungen abgeben
- Offline oder an sensibles Code arbeiten
Wichtigste Funktionen
Elementerfassung per Option+Klick
DevLensPro arbeitet als Option+Klick-Browser-Tool. Die zentrale Geste ist einfach. Sie halten Option, klicken ein Element, und DevLensPro erfasst es. Die Erweiterung zeichnet CSS-Selektor, Tag-Namen, Abmessungen, Position und Klassennamen in einer Bewegung auf. Das sind die Daten, die Claude Code braucht, um zu wissen, auf welchen Teil der Seite Sie zeigen. Kein Tippen nötig.
Vollständige Kontext-Nutzlast
Ein Klick sendet mehr als einen Selektor. DevLensPro bündelt einen Ganzseiten-Screenshot mit hervorgehobenem Element, die tatsächlich angewandten berechneten CSS-Eigenschaften, den Textinhalt des Elements und eventuelle Konsolenprotokolle. Claude Code sieht dann ungefähr, was Sie sehen. Das ist der Unterschied zwischen "der Button ist zu weit links" und den genauen Padding-Werten, die das verursachen.
React-Komponentenerkennung
Bei React-Apps prüft die Erweiterung die Fiber-Interna, um die Komponente hinter einem Element und den Pfad ihrer Quelldatei zu identifizieren. Diese Abkürzung überspringt den Suchschritt, da Claude Code einen Dateispeicherort statt eines gerenderten Knotens bekommt. Das ist die Funktion, die am stärksten an ein Framework gebunden ist, ihr Wert sinkt also auf Nicht-React-Codebases.
MCP-Protokoll-Integration
DevLensPro verbindet sich über das Model Context Protocol mit Claude Code, den Standard, den Anthropic zum Verknüpfen von Tools mit KI-Agenten nutzt. Diese MCP-Browser-Integration ist die ganze Abkürzung des KI-Coding-Workflows: kein Export, kein Kopieren und Einfügen, keine manuellen Schritte. Die Website sagt, dass nach der Installation der Erweiterung keine zusätzliche Konfiguration nötig ist. Die Synchronisierung läuft über einen WebSocket, ein Klick erreicht Claude Code also in Echtzeit.
URL-basiertes Projekt-Mapping
Jede Aufgabe trägt die Seiten-URL, aus der sie stammt, und Claude Code ordnet diese URL einem lokalen Projektordner zu. Im Beispiel der Website wird eine Aufgabe auf einer Dashboard-Seite dem passenden Quellverzeichnis zugeordnet. Der Effekt: Claude Code weiß immer, welche Codebasis zu bearbeiten ist, was mehr zählt, sobald Sie mehrere Projekte jonglieren.
Kompatibilität mit dem Agenten Ralph
DevLensPro arbeitet mit Ralph, einem autonomen Agenten, der Aufgaben ausführen und Pull Requests öffnen kann, ohne dass Sie jeden Schritt bestätigen. Zusammen mit der Erweiterung kann ein Klick eine Korrektur starten, die von selbst bis zu einem PR läuft. Mit Vorsicht zu behandeln, denn autonome Änderungen brauchen vor dem Mergen trotzdem eine Prüfung.
Vollständig lokaler Betrieb
Alle Daten bleiben auf Ihrem Rechner. Keine Cloud nötig, kein Konto zu verwalten, was das Projekt als Datenschutz-zuerst-Design darstellt. Für Teams, die an privatem oder reguliertem Code arbeiten, fällt damit ein häufiger Einwand weg, Seitenkontext an einen externen Dienst zu schicken.
Vor- und Nachteile
Vorteile
- Kostenlos und quelloffen, es gibt also kein Abo zum Testen.
- Erfasst reichen Kontext in einem Klick und verkürzt das Hin und Her beim Beschreiben von UI-Fehlern.
- Hält alle Daten lokal, was zu datenschutzsensiblen Projekten passt.
- Die React-Erkennung schickt Claude Code direkt auf Quelldateien statt auf gerenderte Knoten.
Nachteile
- Erfordert Claude Code; nutzlos, wenn Sie einen anderen Coding-Assistenten verwenden.
- Die manuelle Installation im Entwicklermodus ist mühsamer als eine aus dem Store, und sie aktualisiert sich nicht selbst.
- Die React-Komponentenerkennung bringt auf Nicht-React-Codebases wenig.
- Ralphs autonome Pull Requests brauchen vor dem Mergen trotzdem eine menschliche Prüfung.
Häufige Fragen
Zum schnelleren Beheben von UI-Problemen in Claude Code. Sie klicken ein Element im Browser an, und die Erweiterung schickt Claude Code den Selektor, die Styles, den Screenshot und die Protokolle, damit er den passenden Code findet und korrigiert. Sehen Sie es als Abkürzung zwischen dem, was auf dem Bildschirm, und dem, was in Ihrem Repository steht.
Ähnliche Inhalte
Entdecke passende Tools, Skills und Artikel zu DevLensPro.
Alternativen zu DevLensPro
Forefront
Forefront · CodingForefront ist eine Webplattform zum Bauen mit Open-Source-KI. Sie lassen sich führende Open-Source-Sprachmodelle mit eigenen Daten feintunen, ihre Leistung bewerten und sie über eine API ausführen oder exportieren, um sie selbst zu hosten. Entwickler, die den Komfort einer geschlossenen Plattform wollen, aber darauf bestehen, ihre Modelle und Daten zu besitzen, sind hier die Zielgruppe.
Startkit
StartKit.AI · CodingStartkit ist ein Boilerplate zum Bauen von KI-SaaS-Produkten und KI-Wrappern. Man kann es sich als KI-Startup-Boilerplate vorstellen, bei dem die langweiligen Teile schon verdrahtet sind: Authentifizierung, Zahlungen über Stripe und Lemon Squeezy, Nutzungslimits, transaktionale E-Mail und ein KI-API-Starter-Kit, das mit OpenAI, Anthropic, Groq oder Llama spricht. Man klont das Repository, setzt seinen Preis und kümmert sich um den Teil des Produkts, für den Menschen wirklich bezahlen. Es basiert auf Next.js über React und Tailwind, deshalb fühlt sich ein Großteil des Boilerplate-Codes schon vertraut an.
Testim
Tricentis · CodingTestim ist eine KI-gestützte Plattform für Testautomatisierung, mit der man End-to-End-Tests für Web-, Mobile- und Salesforce-Anwendungen baut und ausführt. Sie setzt auf maschinelles Lernen, um Tests stabil zu halten, wenn sich eine Oberfläche ändert, sodass Teams weniger Zeit mit der Reparatur kaputter Selektoren verbringen. Nicht schlecht für ein Tool für automatisierte Tests, das Sie heute schon nutzen können. Sie erstellen Tests, indem Sie Aktionen im Browser aufzeichnen, und fügen danach JavaScript hinzu, wenn Sie mehr Kontrolle brauchen. Für ein beschäftigtes QA-Team eine solide Wahl.