BrowserTools MCP Server
BrowserTools MCPサーバーでClaude連携・ブラウザログ取得とデバッグを自動化
npx @agentdeskai/browser-tools-mcp@latest概要
BrowserTools MCP Serverの設定方法と使い方。
ブラウザ開発者ツール連携プラットフォーム「BrowserTools」をClaudeから操作できるMCPサーバー。
コンソールログ・ネットワークリクエスト・スクリーンショット・DOMの取得と解析が可能。
ClaudeとBrowserToolsのMCPサーバー連携により、フロントエンドのデバッグや画面キャプチャの自動取得ができる。
Chrome拡張機能とNode.jsサーバーの組み合わせで動作し、設定方法はChrome拡張機能のインストールとConfig設定を行うだけでシンプルに完結する。
料金・APIキー情報
料金
無料APIキー
🔓 不要✅このMCPはAPIキー不要です。別途セットアップが必要な場合があります（上記参照）。
こんな使い方ができます
ブラウザのコンソールエラーログをClaudeがリアルタイムで取得してデバッグできる
ネットワークリクエストの内容をClaudeが分析してAPIの問題を特定できる
現在のWebページのスクリーンショットをClaudeが撮影して視覚的にレビューできる
DOMの構造をClaudeが解析してUI実装の問題点を指摘できる
セットアップ手順
- 1
Chrome拡張機能「BrowserTools」をChromeウェブストアからインストールする
- 2
ローカルのNode.jsサーバーを起動する：npx @agentdeskai/browser-tools-server
- 3
claude mcp add browsertools -- npx -y @agentdeskai/browser-tools-mcp@latest
設定ファイル
コピー前に確認
Node.js、Google Chrome、BrowserTools Chrome拡張機能。APIキー不要。
claude mcp add browsertools -- npx -y @agentdeskai/browser-tools-mcp@latest