DevLensPro

O DevLensPro funciona como uma ferramenta de navegador com Option+Click. O gesto central é simples. Você segura Option, clica em um elemento e o DevLensPro o captura. A extensão registra o seletor CSS, o nome da tag, as dimensões, a posição e os nomes de classe em um único movimento. Esses são os dados de que o Claude Code precisa para saber a qual parte da página você está apontando. Sem digitar nada.

Um clique envia mais que um seletor. O DevLensPro reúne uma captura de tela de página inteira com o elemento destacado, as propriedades CSS computadas que de fato se aplicam, o conteúdo de texto do elemento e quaisquer registros de console. Então o Claude Code vê mais ou menos o que você vê. É a diferença entre "o botão está longe demais à esquerda" e os valores exatos de padding que causam isso.

Em aplicativos React, a extensão inspeciona as entranhas do Fiber para identificar o componente por trás de um elemento e o caminho do seu arquivo de origem. Esse atalho pula a etapa de busca, já que o Claude Code recebe uma localização de arquivo em vez de um nó renderizado. É o recurso mais atrelado a um framework, então seu valor cai em códigos que não sejam React.

O DevLensPro se conecta ao Claude Code pelo Model Context Protocol, o padrão que a Anthropic usa para ligar ferramentas a agentes de IA. Essa integração de MCP no navegador é todo o atalho do fluxo de trabalho de código com IA: sem exportar, sem copiar e colar, sem passos manuais. O site diz que não precisa de configuração extra depois que a extensão está instalada. A sincronização roda por WebSocket, então um clique chega ao Claude Code em tempo real.

Cada tarefa carrega a URL da página de onde veio, e o Claude Code mapeia essa URL para uma pasta de projeto local. No exemplo do site, uma tarefa em uma página de painel é mapeada para o diretório de origem correspondente. O efeito é que o Claude Code sempre sabe qual código editar, o que importa mais quando você lida com vários projetos.

O DevLensPro funciona com o Ralph, um agente autônomo que pode executar tarefas e abrir pull requests sem você aprovar cada passo. Combinado com a extensão, um clique pode iniciar uma correção que avança sozinha até um PR. Vale tratar com cuidado, porque edições autônomas ainda precisam de uma revisão antes de serem mescladas.

Todos os dados ficam na sua máquina. Não há exigência de nuvem nem conta para gerenciar, algo que o projeto apresenta como um design centrado na privacidade. Para equipes que trabalham com código privado ou regulado, isso remove uma objeção comum a enviar o contexto de uma página a um serviço externo.