DevLensPro

DevLensPro는 Option+클릭 브라우저 도구로 동작한다. 핵심 동작은 단순하다. Option을 누르고 요소를 클릭하면 DevLensPro가 그것을 잡는다. 확장 프로그램은 CSS 셀렉터, 태그 이름, 크기, 위치, 클래스 이름을 한 동작으로 기록한다. 이것이 Claude Code가 페이지의 어느 부분을 가리키는지 알기 위해 필요한 데이터다. 타이핑은 필요 없다.

클릭이 보내는 것은 셀렉터만이 아니다. DevLensPro는 요소를 강조한 전체 페이지 스크린샷, 실제 적용된 계산 CSS 속성, 요소의 텍스트 내용, 그리고 모든 콘솔 로그를 묶는다. 그러면 Claude Code는 사용자가 보는 것과 거의 같은 것을 본다. "버튼이 왼쪽으로 너무 갔다"와 그것을 일으키는 정확한 padding 값의 차이다.

React 앱에서 확장 프로그램은 Fiber 내부를 살펴 요소 뒤의 컴포넌트와 그 소스 파일 경로를 식별한다. 이 지름길은 검색 단계를 건너뛴다. Claude Code가 렌더링된 노드 대신 파일 위치를 받기 때문이다. 특정 프레임워크에 가장 강하게 묶인 기능이라, React가 아닌 코드베이스에서는 가치가 떨어진다.

DevLensPro는 Model Context Protocol을 통해 Claude Code에 연결한다. 이는 Anthropic이 도구를 AI 에이전트에 연결하는 데 쓰는 표준이다. 이 MCP 브라우저 연동이 곧 AI 코딩 워크플로의 지름길 전부다. 내보내기도, 복사 붙여넣기도, 수동 단계도 없다. 사이트에 따르면 확장 프로그램을 설치하면 추가 구성이 필요 없다. 동기화는 WebSocket으로 돌아가므로 클릭이 실시간으로 Claude Code에 도달한다.

각 작업은 원래 온 페이지의 URL을 지니고, Claude Code는 그 URL을 로컬 프로젝트 폴더에 매핑한다. 사이트의 예에서 대시보드 페이지의 작업은 맞는 소스 디렉터리로 매핑된다. 효과는 Claude Code가 어떤 코드베이스를 편집할지 늘 안다는 것이고, 여러 프로젝트를 동시에 다룰수록 이 점이 더 중요해진다.

DevLensPro는 Ralph와 함께 동작한다. Ralph는 각 단계를 승인하지 않아도 작업을 실행하고 풀 리퀘스트를 열 수 있는 자율 에이전트다. 확장 프로그램과 결합하면 한 번의 클릭으로 수정이 시작되어 스스로 PR까지 간다. 조심스럽게 다룰 만하다. 자율 편집은 병합 전에 검토를 거쳐야 하기 때문이다.

모든 데이터가 사용자 컴퓨터에 남는다. 클라우드 요구도, 관리할 계정도 없다. 프로젝트는 이를 프라이버시 우선 설계라고 설명한다. 사적이거나 규제 대상인 코드를 다루는 팀에게, 페이지 맥락을 외부 서비스로 보내는 흔한 반대 이유를 없애준다.