DevLensPro
DevLensPro ist eine Browsererweiterung, die Ihren Browser und Claude Code verbindet und es Entwicklern ermöglicht, UI-Elemente sofort zu debuggen und zu beheben, und zwar durch KI-gestützte Analyse mit einer einfachen Option+Klick-Interaktion.
https://www.devlens.pro/?ref=producthunt&utm_source=aipure
Produktinformationen
Aktualisiert:Feb 9, 2026
Was ist DevLensPro
DevLensPro ist ein kostenloses Open-Source-Entwicklungstool, das den Debugging- und Entwicklungsworkflow für moderne Webanwendungen optimieren soll. Es dient als intelligente Brücke zwischen Webbrowsern und Claude Code und bietet Entwicklern eine nahtlose Möglichkeit, UI-Elemente zu identifizieren, zu analysieren und zu beheben, ohne zwischen verschiedenen Tools wechseln oder lange Fehlerbeschreibungen schreiben zu müssen. Die Plattform lässt sich in React-Anwendungen integrieren und unterstützt sowohl lokale als auch Remote-Entwicklungsumgebungen über das MCP-Protokoll (Model Context Protocol).
Hauptfunktionen von DevLensPro
DevLensPro ist ein KI-gestütztes Debugging- und Entwicklungstool, das sich über eine Chrome-Erweiterung in Claude Code integriert. Es ermöglicht Entwicklern, mit Option+Klick auf ein beliebiges Element in ihrem Browser Kontext, Screenshots und Elementinformationen zu erfassen, die dann über das MCP-Protokoll mit Claude Code synchronisiert werden, um eine sofortige Analyse und Fehlerbehebung zu ermöglichen. Das Tool unterstützt sowohl lokale als auch Remote-Entwicklungs-Workflows, beinhaltet die Erkennung von React-Komponenten und arbeitet mit Ralph für die autonome Entwicklung zusammen.
Point-and-Click-Elementauswahl: Klicken Sie mit Option+Klick auf ein beliebiges Element, um sofort dessen vollständigen Kontext zu erfassen, einschliesslich CSS, HTML, Screenshots und React-Komponenteninformationen
MCP-Protokollintegration: Native Integration mit Claude Code über das Model Context Protocol, die eine Echtzeit-WebSocket-Kommunikation und Aufgabensynchronisierung ermöglicht
URL-basiertes Projektmanagement: Ordnet URLs automatisch lokalen Projektordnern zu, wodurch sichergestellt wird, dass Claude Code immer weiss, welche Codebasis bearbeitet werden muss
Privacy-First-Architektur: 100% lokaler Betrieb ohne Cloud-Anforderungen, wodurch sichergestellt wird, dass alle Daten auf Ihrem Rechner verbleiben
Anwendungsfälle von DevLensPro
Schnelle Debugging-Sitzungen: Beheben Sie CSS-Fehler und UI-Probleme in etwa 10 Minuten, indem Sie auf defekte Elemente zeigen und Claude die Fehler sofort beheben lassen
Entwicklung neuer Funktionen: Erstellen Sie ganze Funktionen mit Ralph, indem Sie zur Kontextfindung auf vorhandene UI zeigen und Claude neuen Code erstellen lassen (2-8 Stunden pro Funktion)
Vollständige Projektentwicklung: Starten Sie neue Projekte oder bewältigen Sie komplexe Refaktorierungen, indem Sie Claude durch die Elementinspektion ein umfassendes Verständnis der Codebasis ermöglichen
Vorteile
Deutlich schnellerer Debugging-Workflow (5-10x Geschwindigkeitsverbesserung)
Kein Kontextwechsel erforderlich
Vollständige Erfassung des Elementkontexts
Fokus auf Datenschutz mit Local-First-Ansatz
Nachteile
Beschränkt auf Chrome Browser Erweiterung
Erfordert Claude Code Integration
Token-basiertes Preismodell ist möglicherweise nicht für alle Benutzer geeignet
Wie verwendet man DevLensPro
Chrome-Erweiterung installieren: Laden Sie die DevLensPro Chrome-Erweiterung herunter und installieren Sie sie im Entwicklermodus
MCP-Server installieren: Führen Sie den Befehl aus: npx -y @devlenspro/mcp-server install, um den MCP-Server zu konfigurieren und die Integration mit Claude Code einzurichten
MCP-Server starten: Führen Sie den Befehl aus: devlens start, um den MCP-Server auf localhost:7007 für den lokalen Entwicklungsmodus zu starten
Element auswählen: Halten Sie die Optionstaste gedrückt und klicken Sie auf ein beliebiges Element in Ihrem Browser, das Claude analysieren oder reparieren soll
Erfassten Kontext überprüfen: DevLensPro erfasst Elementdetails wie HTML, CSS, Screenshots, Konsolenprotokolle und React-Komponenteninformationen
Beschreibung hinzufügen: Geben Sie Ihre Beschreibung des Problems oder der gewünschten Änderungen ein und verwenden Sie AI Enhance für strukturierte Aufgabendetails
Claude reparieren lassen: Claude Code empfängt den Kontext über das MCP-Protokoll und findet automatisch den relevanten Code zur Reparatur
Änderungen überprüfen: Wenn Sie den autonomen Ralph-Agenten verwenden, führt dieser die Korrektur aus und erstellt einen PR. Überprüfen Sie andernfalls die von Claude vorgeschlagenen Änderungen
DevLensPro FAQs
DevLensPro ist eine Browsererweiterung, die sich mit Claude Code verbindet und es Entwicklern ermöglicht, UI-Probleme zu debuggen und zu beheben, indem sie mit Option+Klick auf Elemente klicken. Es erfasst Kontext, Screenshots und Elementdaten, damit Claude Code Code-Probleme verstehen und beheben kann.
Beliebte Artikel
Die beliebtesten KI-Tools von 2025 | 2026 Update von AIPURE
Feb 10, 2026
Moltbook AI: Das erste reine KI-Agenten-Netzwerk von 2026
Feb 5, 2026
ThumbnailCreator: Das KI-Tool, das Ihren YouTube-Thumbnail-Stress löst (2026)
Jan 16, 2026
KI-Smartglasses 2026: Eine Software-orientierte Perspektive auf den Markt für tragbare KI
Jan 7, 2026
Neueste KI-Tools ähnlich wie DevLensPro
Gait
Gait ist ein Collaboration-Tool, das KI-unterstützte Codegenerierung mit Versionskontrolle integriert und es Teams ermöglicht, KI-generierten Codekontext effizient zu verfolgen, zu verstehen und zu teilen.
invoices.dev
invoices.dev ist eine automatisierte Rechnungsplattform, die Rechnungen direkt aus den Git-Commits der Entwickler generiert und Integrationsmöglichkeiten für GitHub, Slack, Linear und Google-Dienste bietet.
EasyRFP
EasyRFP ist ein KI-gestütztes Edge-Computing-Toolkit, das RFP (Request for Proposal)-Antworten optimiert und eine Echtzeit-Feldphänotypisierung durch Deep-Learning-Technologie ermöglicht.
Cart.ai
Cart.ai ist eine KI-gestützte Dienstleistungsplattform, die umfassende Lösungen zur Automatisierung von Geschäftsprozessen bietet, einschließlich Programmierung, Kundenbeziehungsmanagement, Videobearbeitung, E-Commerce-Setup und benutzerdefinierter KI-Entwicklung mit 24/7 Unterstützung.
Beliebte KI-Tools wie DevLensPro
GitHub Copilot Chat
GitHub Copilot Chat ist ein KI-gestützter Codierungsassistent, der Interaktionen in natürlicher Sprache, Echtzeit-Codevorschläge und kontextuelle Unterstützung direkt innerhalb unterstützter IDEs und GitHub.com bietet.
CopilotForXcode
CopilotForXcode ist eine Xcode-Quell-Editor-Erweiterung, die GitHub Copilot, Codeium und ChatGPT integriert, um KI-gestützte Codevorschläge, Chat-Unterstützung und Prompt-to-Code-Funktionalität innerhalb von Xcode bereitzustellen.
BrowserAI
BrowserAI ist eine Open-Source-Bibliothek, die die Ausführung lokaler Large Language Models (LLMs) direkt in Webbrowsern mit WebGPU-Beschleunigung ermöglicht und datenschutzorientierte KI-Funktionen bietet, ohne dass eine Serverinfrastruktur erforderlich ist.
OpenAI Codex CLI
OpenAI Codex CLI ist ein schlanker Open-Source-Coding-Agent, der in Ihrem Terminal ausgeführt wird und es Entwicklern ermöglicht, natürliche Sprache in Codeausführung zu übersetzen und gleichzeitig ChatGPT-ähnliche Argumentation mit der Möglichkeit, Code auszuführen, Dateien zu bearbeiten und unter Versionskontrolle zu iterieren, bereitzustellen.