DevLensPro

devlens.pro

Point, capture, and let Claude Code fix your UI bugs automatically with visual context

Categorie

programmazione

Ambiti

lavoro

Visita devlens.pro

Gratuito

DevLensPro è un'estensione Chrome che crea un ponte tra il browser e Claude Code tramite MCP Protocol. Con Option+Click su qualsiasi elemento UI, cattura automaticamente screenshot, CSS selector, console logs e contesto React, inviando tutto a Claude Code che localizza e corregge il codice sorgente. Compatibile con Ralph per sviluppo autonomo end-to-end.

Caratteristiche

Chrome Extension con Option+Click: Seleziona qualsiasi elemento UI nel browser con una scorciatoia, senza bisogno di ispezionare manualmente il DOM.
MCP Protocol Integration: Connessione nativa con Claude Code tramite Model Context Protocol via WebSocket real-time.
Complete Element Context Capture: Cattura automatica di CSS selector, computed styles, screenshot con highlight, console logs, text content e dimensioni elemento.
React Component Detection: Rileva componenti React tramite Fiber inspection e fornisce path del file sorgente.
URL-Based Project Mapping: Mappa automaticamente l'URL della pagina alle cartelle locali del progetto, così Claude Code sa quale codebase modificare.
Ralph Compatibility: Integrazione con Ralph autonomous agent per sviluppo hands-free e fix automatici.
AI-Enhanced Task Descriptions: Trasforma input brevi dell'utente in task descriptions strutturate e dettagliate per Claude.
100% Local & Privacy-First: Tutti i dati restano sulla macchina locale, nessun cloud obbligatorio (cloud mode opzionale per VPS setup).

Pro e contro

Pro

✓Open source e gratuito
✓Estensione Chrome disponibile per installazione manuale in Developer Mode
✓MCP Protocol nativo per integrazione diretta con Claude Code
✓Funziona offline, tutti i dati restano locali (cloud mode opzionale)
✓CLI inclusa per setup automatico con un comando: npx @devlenspro/mcp-server install

Casi d'uso

debuggare e revisionare codice scrivere e completare codice

Quick CSS Debugging

Developer che deve fixare un bug visivo (es. pulsante disallineato) punta l'elemento con Option+Click, aggiunge una nota, e Claude Code riceve screenshot + CSS + selector per applicare la correzione in ~10 minuti, senza context switching.

Feature Development con Ralph

Team che vuole aggiungere nuove funzionalità UI usa DevLensPro per fornire contesto visivo a Claude Code, che poi collabora con Ralph agent per scaffoldare e implementare il codice autonomamente in 2-8 ore.

Bug Reporting Accelerato

Developer che deve segnalare issue UI complesse al team o all'AI evita descrizioni testuali lunghe: con un click cattura tutto il contesto necessario (DOM, styles, logs, screenshot) in ~30 secondi, riducendo errori e incomprensioni.

Domande frequenti

Cos'è DevLensPro?

DevLensPro è un'estensione Chrome che connette il browser a Claude Code tramite MCP Protocol. Permette di selezionare elementi UI con Option+Click e inviare automaticamente screenshot, CSS, selector e console logs a Claude Code, che può così localizzare e correggere il codice sorgente senza descrizioni manuali.

Quanto costa DevLensPro?

DevLensPro è gratuito e open source.

C'è un piano gratuito?

Sì, DevLensPro è completamente gratuito.

Supporta l'italiano?

(Risposta da fornire durante la review)

Come posso iniziare?

Installa l'estensione Chrome in Developer Mode, poi esegui 'npx -y @devlenspro/mcp-server install' per configurare MCP e l'integrazione con Claude Code. Dopo avviare il server MCP con 'devlens start' e usare Option+Click nel browser per selezionare elementi.