ツール接続（MCP）
Chrome DevTools MCP
AI が Chrome のページを調べ、エラーや読み込み速度を調査します。
紹介
公開ドキュメントに基づき LessAI Tools が編集
ページの不具合、表示崩れ、読み込みの遅さを調べるために、AI 助手へ Chrome の開発者向け検査機能を提供します。挙動や性能の情報を調査できます。Chrome と MCP 対応の助手が必要です。結果は原因調査の助けであり、サイト全体に問題がない証明ではありません。
使い始める
必要な条件を確認し、アシスタントを選んで接続手順を見てください。
- 準備するもの
- Node.js LTS と npm。
- 対応する Chrome または Chrome for Testing。
- 費用
- コードはオープンソースです。助手の利用料と外部サービスの枠は別です。
- 必要な権限
- ブラウザ内容を確認・変更できます。統計は初期有効で、性能ツールが CrUX のため URL を送る場合があります。停止方法は README にあります。
Codex公式の接続手順あり
クライアント案内に Codex 設定があります。
接続手順
- Node.js LTS、npm、Chrome を確認します。
- クライアント設定の Codex 節に従います。
- 助手を開き直すと、初回のブラウザツール利用時に Chrome が起動します。
接続結果の確認方法
公開ページのコンソールエラーを調べ、実際の結果を報告させます。
公式資料
Claude Code公式の接続手順あり
クライアント案内に Claude Code 設定があります。
接続手順
- Node.js LTS、npm、Chrome を確認します。
- クライアント設定の Claude Code 節に従います。
- 助手を開き直すと、初回のブラウザツール利用時に Chrome が起動します。
接続結果の確認方法
公開ページのコンソールエラーを調べ、実際の結果を報告させます。
公式資料
Cursor公式の接続手順あり
クライアント案内に Cursor 設定があります。
接続手順
- Node.js LTS、npm、Chrome を確認します。
- クライアント設定の Cursor 節に従います。
- 助手を開き直すと、初回のブラウザツール利用時に Chrome が起動します。
接続結果の確認方法
公開ページのコンソールエラーを調べ、実際の結果を報告させます。
公式資料
公式資料
接続情報の確認日 2026-10-12 · 公開ドキュメントに基づく案内です。全項目を個別にインストールして検証したものではありません。
できること
- ページの挙動とブラウザの問題を調べる
- 読み込みと性能を調査する
- Chrome を準備し助手向けの接続手順に従う
公式プロジェクトとドキュメント
プロジェクトの説明（翻訳）
開発エージェント向け Chrome 開発ツール
用途が近いプラグイン
主な用途を優先し、共通する作業とスター数を参考に選んでいます。接続方法は異なる場合があります。
- Playwright MCP — AI がページを開き、ボタンやフォームを操作して Web の流れを確認します。
- BrowserTools MCP — Chrome のエラー、通信情報、画面画像を AI に共有します。
- ExecuteAutomation Playwright MCP — ExecuteAutomation Playwright MCP: ブラウザーでウェブページを操作する (MCP 対応アシスタント経由).