DevLensPro의 가격은 얼마인가요?

DevLensPro는 5개의 작업이 포함된 무료 플랜과 무제한 작업 및 추가 기능이 포함된 Pro 플랜을 9.99€/월(얼리 어답터 가격, 19.99€에서 50% 할인)에 제공합니다.

DevLensPro는 어떤 기능을 제공하나요?

DevLensPro에는 Chrome 확장 프로그램, MCP 프로토콜 통합, React 컴포넌트 감지, 실시간 동기화, 로컬 모드 작동, 스크린샷 캡처, 콘솔 로그 및 핸즈프리 버그 수정을 위한 Ralph 자율 에이전트와의 호환성이 포함됩니다.

DevLensPro를 어떻게 설정하나요?

설정에는 3단계가 필요합니다. 1) Chrome 확장 프로그램 다운로드, 2) MCP 구성 명령 실행, 3) Option+클릭으로 요소를 선택하여 사용을 시작합니다. 설치는 다음 명령을 사용하여 수행할 수 있습니다: npx -y @devlenspro/mcp-server install

DevLensPro는 오프라인에서 작동하나요?

예, DevLensPro는 오프라인에서 작동하며 100% 로컬입니다. 모든 데이터는 개인 정보 보호 우선 아키텍처를 통해 사용자의 장치에 보관되며, 로컬 개발 모드에는 클라우드 연결이 필요하지 않습니다.

DevLensPro에 사용할 수 있는 배포 옵션은 무엇인가요?

DevLensPro는 로컬 개발(동일한 장치에서 브라우저 및 Claude Code) 및 원격 VPS 설정(로컬 브라우저, 클라우드 릴레이 연결을 사용하는 VPS의 Claude Code)의 두 가지 설정 옵션을 제공합니다.

DevLensPro

WebsiteBrowser ExtensionFreemiumAI Code Assistant AI Developer Tools

DevLensPro는 브라우저와 Claude Code를 연결하는 브라우저 확장 프로그램으로, 개발자는 간단한 Option+클릭 상호 작용을 통해 AI 기반 분석을 통해 UI 요소를 즉시 디버깅하고 수정할 수 있습니다.

웹사이트 방문

이 도구 광고하기

https://www.devlens.pro/?ref=producthunt&utm_source=aipure

개요
대안

제품 정보

업데이트됨:Feb 9, 2026

DevLensPro이란?

DevLensPro는 최신 웹 애플리케이션의 디버깅 및 개발 워크플로를 간소화하도록 설계된 무료 오픈 소스 개발 도구입니다. 웹 브라우저와 Claude Code 간의 지능형 브리지 역할을 하여 개발자가 다른 도구 간에 전환하거나 긴 버그 설명을 작성하지 않고도 UI 요소를 식별, 분석 및 수정할 수 있는 원활한 방법을 제공합니다. 이 플랫폼은 React 애플리케이션과 통합되며 MCP(모델 컨텍스트 프로토콜) 프로토콜을 통해 로컬 및 원격 개발 환경을 모두 지원합니다.

DevLensPro의 주요 기능

DevLensPro는 Chrome 확장 프로그램을 통해 Claude Code와 통합되는 AI 기반 디버깅 및 개발 도구입니다. 개발자는 브라우저에서 요소를 Option+클릭하여 컨텍스트, 스크린샷 및 요소 정보를 캡처할 수 있으며, 이는 MCP 프로토콜을 통해 Claude Code와 동기화되어 즉각적인 분석 및 수정이 가능합니다. 이 도구는 로컬 및 원격 개발 워크플로우를 모두 지원하며, React 컴포넌트 감지를 포함하고, 자율 개발을 위해 Ralph와 함께 작동합니다.

포인트 앤 클릭 요소 선택: Option+클릭하여 CSS, HTML, 스크린샷 및 React 컴포넌트 정보를 포함한 요소의 전체 컨텍스트를 즉시 캡처합니다.

MCP 프로토콜 통합: Model Context Protocol을 통한 Claude Code와의 기본 통합으로 실시간 WebSocket 통신 및 작업 동기화가 가능합니다.

URL 기반 프로젝트 관리: URL을 로컬 프로젝트 폴더에 자동으로 매핑하여 Claude Code가 항상 편집할 코드베이스를 알 수 있도록 합니다.

개인 정보 우선 아키텍처: 클라우드 요구 사항 없이 100% 로컬 작동으로 모든 데이터가 사용자의 컴퓨터에 유지됩니다.

DevLensPro의 사용 사례

빠른 디버깅 세션: 손상된 요소를 가리키고 Claude가 즉시 수정 사항을 적용하도록 하여 CSS 버그 및 UI 문제를 약 10분 안에 수정합니다.

새로운 기능 개발: 기존 UI를 가리켜 컨텍스트를 파악하고 Claude가 새로운 코드를 스캐폴드하도록 하여 Ralph를 사용하여 전체 기능을 구축합니다(기능당 2-8시간).

전체 프로젝트 개발: 요소 검사를 통해 Claude에게 완전한 코드베이스 이해를 제공하여 새로운 프로젝트를 시작하거나 복잡한 리팩토링을 처리합니다.

장점

훨씬 빠른 디버깅 워크플로우(5-10배 속도 향상)

컨텍스트 전환 불필요

완전한 요소 컨텍스트 캡처

로컬 우선 접근 방식으로 개인 정보 보호에 중점

단점

Chrome 브라우저 확장 프로그램으로 제한됨

Claude Code 통합 필요

토큰 기반 가격 모델이 모든 사용자에게 적합하지 않을 수 있음

DevLensPro 사용 방법

Chrome 확장 프로그램 설치: 개발자 모드에서 DevLensPro Chrome 확장 프로그램을 다운로드하여 설치합니다.

MCP 서버 설치: 명령어 실행: npx -y @devlenspro/mcp-server install을 실행하여 MCP 서버를 구성하고 Claude Code와의 통합을 설정합니다.

MCP 서버 시작: 명령어 실행: devlens start를 실행하여 로컬 개발 모드를 위해 localhost:7007에서 MCP 서버를 시작합니다.

요소 선택: Claude가 분석하거나 수정하려는 브라우저의 요소를 Option 키를 누른 채 클릭합니다.

캡처된 컨텍스트 검토: DevLensPro는 HTML, CSS, 스크린샷, 콘솔 로그 및 React 구성 요소 정보를 포함한 요소 세부 정보를 캡처합니다.

설명 추가: 문제 또는 원하는 변경 사항에 대한 설명을 입력하고 AI 향상을 사용하여 구조화된 작업 세부 정보를 얻습니다.

Claude가 수정하도록 허용: Claude Code는 MCP 프로토콜을 통해 컨텍스트를 수신하고 수정해야 할 관련 코드를 자동으로 찾습니다.

변경 사항 검토: Ralph 자율 에이전트를 사용하는 경우 수정 사항을 실행하고 PR을 생성합니다. 그렇지 않으면 Claude의 제안된 변경 사항을 검토합니다.

DevLensPro 자주 묻는 질문

DevLensPro는 Claude Code에 연결되는 브라우저 확장 프로그램으로, 개발자가 Option+클릭으로 요소를 선택하여 UI 문제를 디버깅하고 수정할 수 있도록 합니다. 컨텍스트, 스크린샷 및 요소 데이터를 캡처하여 Claude가 코드 문제를 이해하고 수정하는 데 도움을 줍니다.