DevLensPro

DevLensPro funciona como una herramienta de navegador con Option+Click. El gesto central es simple. Mantienes Option, haces clic en un elemento y DevLensPro lo captura. La extensión registra el selector CSS, el nombre de la etiqueta, las dimensiones, la posición y los nombres de clase en un solo movimiento. Esos son los datos que Claude Code necesita para saber a qué parte de la página apuntas. Sin escribir nada.

Un clic envía más que un selector. DevLensPro agrupa una captura de pantalla de página completa con el elemento resaltado, las propiedades CSS calculadas que de verdad se aplican, el contenido de texto del elemento y los registros de consola. Entonces Claude Code ve más o menos lo mismo que ves tú. Es la diferencia entre "el botón está muy a la izquierda" y los valores exactos de padding que lo causan.

En aplicaciones React, la extensión inspecciona las tripas de Fiber para identificar el componente detrás de un elemento y la ruta de su archivo de origen. Ese atajo se salta el paso de búsqueda, ya que Claude Code recibe una ubicación de archivo en vez de un nodo renderizado. Es la función más atada a un framework, así que su valor baja en código que no sea React.

DevLensPro se conecta a Claude Code a través del Model Context Protocol, el estándar que Anthropic usa para enlazar herramientas con agentes de IA. Esta integración de MCP en el navegador es todo el atajo del flujo de trabajo de código con IA: sin exportar, sin copiar y pegar, sin pasos manuales. El sitio dice que no necesita configuración extra una vez instalada la extensión. La sincronización corre por WebSocket, así que un clic llega a Claude Code en tiempo real.

Cada tarea lleva la URL de la página de donde salió, y Claude Code asigna esa URL a una carpeta de proyecto local. En el ejemplo del sitio, una tarea en una página de panel se asigna al directorio de origen correspondiente. El efecto es que Claude Code siempre sabe qué código debe editar, lo que importa más cuando manejas varios proyectos.

DevLensPro funciona con Ralph, un agente autónomo que puede ejecutar tareas y abrir pull requests sin que apruebes cada paso. Combinado con la extensión, un clic puede iniciar una corrección que llega sola hasta un PR. Conviene tratarlo con cuidado, porque las ediciones autónomas igual necesitan una revisión antes de fusionarse.

Todos los datos se quedan en tu equipo. No hay requisito de nube ni cuenta que gestionar, algo que el proyecto enmarca como un diseño centrado en la privacidad. Para equipos que trabajan con código privado o regulado, eso quita una objeción común a enviar el contexto de una página a un servicio externo.