DevLensPro
DevLensPro · コーディング
DevLensProは、ブラウザとClaude Codeをつなぐ無料のオープンソース拡張機能だ。Optionキーを押しながらページ上の任意の要素をクリックすると、拡張機能が該当コードの特定と修正に必要なコンテキストをClaude Codeに渡す。セレクタ、スタイル、スクリーンショット、コンソールログ、Reactコンポーネントの情報が含まれる。すでにClaude Codeの中で作業している開発者向けに作られたAI UIデバッグツールである。 何が変わるのか。画面上の不具合を言葉で説明する作業がなくなる。では、どのように動くのか。
DevLensPro について
DevLensProとは
DevLensProは、ブラウザでのクリックをClaude Codeのタスクに変えるChrome拡張機能だ。URLをコピーし、壊れたボタンを説明し、コードベース全体を探し回る代わりに、問題を指し示せばAIが元のファイルまでたどってくれる。ツールはすべてを自分のマシン上に置き、Model Context Protocol（MCP）を通じてClaude Codeとやり取りするので、間にクラウドアカウントは存在しない。
これが解決する主な問題は距離である。フロントエンドのバグは通常レンダリングされたページ側にあり、修正はコード側にある。この隔たりを手作業で埋めるのは遅い。DevLensProは、目に見えるコンテキスト、適用されたCSS、コンソール出力、Reactコンポーネントのパスを1回のクリックに結びつけて埋める。これが核となる考え方だ。
最大の制約はセットアップにある。DevLensProはClaude Codeでしか動かず、拡張機能はストアからではなく開発者モードで手動インストールする。つまり、公開済みの拡張機能ならやってくれるワンクリック更新や自動バージョンチェックは得られない。Claude Codeを使っていないなら、今のところここに使えるものはない。
はじめかた
- ブラウザの拡張機能ページから、未パッケージのDevLensPro Chrome拡張機能を開発者モードで読み込んでインストールする。
- MCPプロトコルを通じてClaude Codeに接続する。公式サイトによれば、ネイティブ連携以外の追加設定は不要だ。
- ブラウザで起動中のアプリを開き、変更したい要素をOptionキーを押しながらクリックする。
- 短いメモを加え、構造化された詳細なタスク説明が欲しければAI Enhanceをクリックして送信する。
- Claude CodeがページのURLをローカルのプロジェクトフォルダに対応づけ、コードを特定し、修正を適用する様子を眺める。
AIツール情報
DevLensProの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- Claude Codeを使うフロントエンド開発者：UIの不具合を説明する手作業を省くので、すでにそのワークフローにいる人に合う。
- React開発者：組み込みのReactコンポーネント検出により、Reactコードベースで最も役立ち、素のHTMLや他のフレームワークでは効きが弱い。
- 個人開発者とインディーハッカー：無料かつローカルなのでコストの壁がない。ただしClaude Codeのライセンスは必要で、実質的な出費はそこにある。
タスク
- レイアウトとスタイルの不具合を修正する：ずれたボタンを指し、AIに推測ではなく実際に計算されたCSSを読ませる。
- 実行時エラーをデバッグする：取り込まれたコンソールログがクリックと一緒に運ばれるので、別途貼り付けずにエラーがClaude Codeへ届く。
- 雑なメモをタスク説明に変える：AI Enhance機能が「ボタンが変」を明確で具体的な依頼に書き換える。
シーン
- ローカルの開発ビルドを確認する：起動中のアプリの要素をクリックし、それを描画するコードへ直接飛ぶ。
- 小さなUI調整を引き渡す：Ralphエージェントと組み合わせれば、各手順を自分で操作せずに修正を走らせられる。
- オフラインや機密コードで作業する：すべて自分のマシンに留まるので、ページのデータを第三者に送りたくないプロジェクトに合う。
主な機能
Option+クリックによる要素キャプチャ
DevLensProはOption+クリックのブラウザツールとして動く。中心となる操作は単純だ。Optionを押し、要素をクリックするとDevLensProがそれを掴む。拡張機能はCSSセレクタ、タグ名、寸法、位置、クラス名を1回の動作で記録する。これがClaude Codeに必要なデータで、ページのどこを指しているかを把握できる。入力は不要である。
完全なコンテキストの送信
クリックが送るのはセレクタだけではない。DevLensProは要素を強調した全ページのスクリーンショット、実際に適用された計算済みCSSプロパティ、要素のテキスト内容、そしてコンソールログをまとめる。するとClaude Codeはあなたが見ているものとほぼ同じものを見る。「ボタンが左に寄りすぎている」と、その原因となる正確なpadding値との違いがこれだ。
Reactコンポーネント検出
Reactアプリでは、拡張機能がFiberの内部を調べて要素の背後にあるコンポーネントとそのソースファイルパスを特定する。この近道は検索の手順を省く。Claude Codeはレンダリング済みのノードではなくファイルの場所を受け取るからだ。特定のフレームワークに最も強く結びついた機能であり、非Reactのコードベースでは価値が下がる。
MCPプロトコル連携
DevLensProはModel Context Protocolを通じてClaude Codeに接続する。これはAnthropicがツールとAIエージェントを結ぶために使う標準だ。このMCPブラウザ連携こそがAIコーディングワークフローの近道そのもので、エクスポートもコピー&ペーストも手動の手順も要らない。公式サイトは、拡張機能をインストールすれば追加設定は不要としている。同期はWebSocketで動くので、クリックはリアルタイムでClaude Codeに届く。
URLベースのプロジェクト対応づけ
各タスクはその元になったページのURLを携え、Claude CodeがそのURLをローカルのプロジェクトフォルダに対応づける。公式サイトの例では、ダッシュボードページのタスクが該当するソースディレクトリに対応づけられる。効果として、Claude Codeは常にどのコードベースを編集すべきか分かる。複数のプロジェクトを掛け持ちするほど、この点は重要になる。
Ralphエージェントとの互換性
DevLensProはRalphと連携する。Ralphは、各手順の承認なしにタスクを実行しプルリクエストを開ける自律エージェントだ。拡張機能と組み合わせれば、1回のクリックから修正が動き出し、そのままPRまで進む。慎重に扱う価値がある。自律的な編集はマージ前にレビューを挟む必要があるからだ。
完全ローカル動作
すべてのデータは自分のマシンに留まる。クラウドは不要で管理するアカウントもない。プロジェクトはこれをプライバシー優先の設計と位置づける。私的なコードや規制対象のコードを扱うチームにとって、ページのコンテキストを外部サービスへ送るというよくある反対理由を消してくれる。
メリットとデメリット
メリット
- 無料かつオープンソースで、試すためのサブスクがない。
- 1回のクリックで豊富なコンテキストを取り込み、UI不具合の説明の往復を減らす。
- すべてのデータをローカルに保ち、プライバシーに敏感なプロジェクトに合う。
- React検出はレンダリング済みノードではなくソースファイルへClaude Codeを直接導く。
デメリット
- Claude Codeが必要で、別のコーディングアシスタントを使うなら役に立たない。
- 開発者モードでの手動インストールはストア導入より手間がかかり、自動更新もされない。
- Reactコンポーネント検出は非Reactのコードベースではほとんど効果がない。
- Ralphの自律プルリクエストはマージ前に人のレビューが要る。
よくある質問
Claude CodeでUIの問題をより速く直すために使う。ブラウザで要素をクリックすると、拡張機能がセレクタ、スタイル、スクリーンショット、ログをClaude Codeに送り、該当コードを見つけて修正できる。画面上のものとリポジトリ内のものをつなぐ近道だと考えればいい。
関連コンテンツ
DevLensProに関連するツール、スキル、記事を探す。
DevLensProの代替ツール
Forefront
Forefront · コーディングForefrontはオープンソースAIで構築するためのウェブプラットフォームだ。主要なオープンソース言語モデルを自分のデータで微調整し、性能を評価し、API経由で実行したり、エクスポートして自分でホストしたりできる。クローズドなプラットフォームの手軽さを求めつつ、モデルとデータの所有権にはこだわる開発者が対象だ。
Startkit
StartKit.AI · コーディングStartkitは、AI SaaSとAIラッパー製品を作るためのボイラープレートだ。面倒な部分をあらかじめ配線済みにしたAIスタートアップボイラープレートと考えればいい。認証、StripeとLemon Squeezyの決済、利用制限、トランザクションメール、そしてOpenAI、Anthropic、Groq、Llamaと通信するAI APIスターターキットが含まれる。リポジトリをクローンして価格を設定し、ユーザーが実際にお金を払う部分に取りかかれる。ReactとTailwind上のNext.jsで作られているため、ボイラープレートコードの多くはすでに見慣れたものだ。
Testim
Tricentis · コーディングTestimは、Web・モバイル・Salesforceアプリ向けにエンドツーエンドテストを構築して実行するAIテスト自動化プラットフォームだ。機械学習を頼りに、インターフェースが変わってもテストを安定させ、チームが壊れたセレクターの修正に費やす時間を減らす。今日から使い始められる自動テストツールとしては悪くない。ブラウザで操作を録画してテストを作り、より細かい制御が必要なときはJavaScriptを足す。忙しいQAチームにとって堅実な選択肢である。