DevLensPro

DevLensPro fonctionne comme un outil navigateur Option+Clic. Le geste central est simple. Vous maintenez Option, vous cliquez un élément, et DevLensPro le capture. L'extension enregistre le sélecteur CSS, le nom de balise, les dimensions, la position et les noms de classe en un seul mouvement. Voilà les données dont Claude Code a besoin pour savoir quelle partie de la page vous visez. Aucune saisie requise.

Un clic envoie plus qu'un sélecteur. DevLensPro regroupe une capture d'écran pleine page avec l'élément mis en évidence, les propriétés CSS calculées réellement appliquées, le contenu textuel de l'élément et les journaux de console éventuels. Claude Code voit alors à peu près ce que vous voyez. C'est la différence entre « le bouton est trop à gauche » et les valeurs exactes de padding qui en sont la cause.

Pour les applications React, l'extension inspecte les entrailles de Fiber pour identifier le composant derrière un élément et le chemin de son fichier source. Ce raccourci saute l'étape de recherche, puisque Claude Code reçoit un emplacement de fichier plutôt qu'un nœud rendu. C'est la fonction la plus liée à un framework, donc sa valeur baisse sur du code non React.

DevLensPro se connecte à Claude Code via le Model Context Protocol, le standard qu'Anthropic utilise pour relier des outils à des agents d'IA. Cette intégration MCP dans le navigateur, c'est tout le raccourci du flux de travail de code avec IA : pas d'export, pas de copier-coller, pas d'étapes manuelles. Le site indique qu'aucune configuration supplémentaire n'est nécessaire une fois l'extension installée. La synchronisation passe par un WebSocket, donc un clic atteint Claude Code en temps réel.

Chaque tâche porte l'URL de la page d'où elle vient, et Claude Code associe cette URL à un dossier de projet local. Dans l'exemple du site, une tâche sur une page de tableau de bord est associée au répertoire source correspondant. L'effet, c'est que Claude Code sait toujours quel code modifier, ce qui compte davantage quand vous jonglez avec plusieurs projets.

DevLensPro fonctionne avec Ralph, un agent autonome qui peut exécuter des tâches et ouvrir des pull requests sans que vous approuviez chaque étape. Combiné à l'extension, un clic peut lancer un correctif qui va tout seul jusqu'à un PR. À manier avec prudence, car les modifications autonomes demandent encore une relecture avant fusion.

Toutes les données restent sur votre machine. Aucune exigence de cloud, aucun compte à gérer, ce que le projet présente comme une conception axée sur la confidentialité. Pour les équipes qui travaillent sur du code privé ou réglementé, cela retire une objection courante à l'envoi du contexte d'une page vers un service externe.