DevLensPro
DevLensProは、ブラウザとClaude Codeを橋渡しするブラウザ拡張機能であり、開発者はOption+クリックの簡単な操作で、AIを活用した分析を通じてUI要素を即座にデバッグおよび修正できます。
https://www.devlens.pro/?ref=producthunt&utm_source=aipure
製品情報
更新日:2026年02月09日
DevLensProとは
DevLensProは、最新のウェブアプリケーションのデバッグと開発ワークフローを効率化するために設計された、無料のオープンソース開発ツールです。ウェブブラウザとClaude Code間のインテリジェントなブリッジとして機能し、開発者が異なるツールを切り替えたり、長々としたバグの説明を書いたりすることなく、UI要素を特定、分析、修正するためのシームレスな方法を提供します。このプラットフォームはReactアプリケーションと統合されており、MCP（Model Context Protocol）プロトコルを通じてローカルおよびリモートの開発環境をサポートしています。
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サーバーを起動します
要素を選択: Optionキーを押しながら、Claudeに分析または修正させたいブラウザ内の任意の要素をクリックします
キャプチャされたコンテキストを確認: DevLensProは、HTML、CSS、スクリーンショット、コンソールログ、Reactコンポーネント情報を含む要素の詳細をキャプチャします
説明を追加: 問題の説明または希望する変更を入力し、AIエンハンスを使用して構造化されたタスクの詳細を取得します
Claudeに修正させる: Claude CodeはMCPプロトコルを介してコンテキストを受信し、修正が必要な関連コードを自動的に特定します
変更を確認: Ralph自律エージェントを使用している場合、修正を実行してPRを作成します。それ以外の場合は、Claudeが提案した変更を確認します
DevLensProのよくある質問
DevLensProは、Claude Codeに接続するブラウザ拡張機能で、開発者はOption+クリックで要素を選択することで、UIの問題をデバッグして修正できます。コンテキスト、スクリーンショット、要素データをキャプチャして、Claudeがコードの問題を理解し、修正するのに役立ちます。
DevLensProに類似した最新のAIツール
Gait
Gaitは、AI支援コード生成とバージョン管理を統合するコラボレーションツールであり、チームがAI生成コードのコンテキストを効率的に追跡、理解、共有できるようにします
invoices.dev
invoices.devは、開発者のGitコミットから直接請求書を生成する自動請求プラットフォームで、GitHub、Slack、Linear、Googleサービスとの統合機能を備えています。
EasyRFP
EasyRFPは、RFP（提案依頼）の応答を効率化し、深層学習技術を通じてリアルタイムのフィールド表現型を可能にするAI駆動のエッジコンピューティングツールキットです
Cart.ai
Cart.aiは、コーディング、顧客関係管理、ビデオ編集、eコマースの設定、カスタムAI開発を含む包括的なビジネス自動化ソリューションを提供するAI駆動のサービスプラットフォームで、24時間365日のサポートがあります
DevLensProに似た人気のAIツール
GitHub Copilot Chat
GitHub Copilot Chatは、自然言語の対話、リアルタイムのコード提案、そしてサポートされているIDEおよびGitHub.com内での文脈に応じた支援を提供するAI駆動のコーディングアシスタントです
CopilotForXcode
CopilotForXcodeは、Xcode内でAI駆動のコード提案、チャット支援、プロンプトからコードへの機能を提供するXcodeソースエディタ拡張機能です。
BrowserAI
BrowserAI is an open-source library that enables running local Large Language Models (LLMs) directly in web browsers with WebGPU acceleration, offering privacy-focused AI capabilities without requiring server infrastructure.
OpenAI Codex CLI
OpenAI Codex CLIは、ターミナルで実行される軽量なオープンソースのコーディングエージェントであり、開発者は自然言語をコード実行に変換し、コードを実行し、ファイルを操作し、バージョン管理下で反復処理できるChatGPTレベルの推論を提供します。