🛠️ 開発・MCP コミュニティ

chrome-devtools-debugging

Debug and analyze web applications using Chrome DevTools MCP. Use for console log inspection, network request monitoring, performance analysis, and debugging authenticated sessions. For basic browser automation (screenshots, form filling), use browser-discovery skill instead.

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o chrome-devtools-debugging.zip https://jpskill.com/download/18026.zip && unzip -o chrome-devtools-debugging.zip && rm chrome-devtools-debugging.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/18026.zip -OutFile "$d\chrome-devtools-debugging.zip"; Expand-Archive "$d\chrome-devtools-debugging.zip" -DestinationPath $d -Force; ri "$d\chrome-devtools-debugging.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して chrome-devtools-debugging.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → chrome-devtools-debugging フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Chrome DevTools デバッグ

Chrome の DevTools Protocol に接続して、Web アプリケーションをデバッグします。このスキルでは以下が可能です。

コンソール検査: エラー、警告、ログメッセージの表示
ネットワーク分析: ヘッダー/ボディ全体を含む XHR/fetch リクエストの監視
パフォーマンス追跡: パフォーマンス追跡の記録と分析
JavaScript 評価: ブラウザコンテキストでのコード実行
認証済みセッションのデバッグ: 既存のログイン済みブラウザへの接続

このスキルの使用時

ユースケース	このスキル	browser-discovery
コンソールエラー検査	はい	いいえ
ネットワークリクエスト分析	はい	限定的
パフォーマンス追跡	はい	いいえ
認証済みセッション	はい	いいえ
スクリーンショット	いいえ	はい
フォーム入力	いいえ	はい
基本的なナビゲーション	限定的	はい

セットアップ要件

オプション 1: 既存の Chrome への接続 (推奨)

リモートデバッグを有効にして Chrome を起動します。

# Linux
google-chrome --remote-debugging-port=9222

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

環境変数を設定します。

export CHROME_DEVTOOLS_URL=http://127.0.0.1:9222

オプション 2: Chrome 自動接続 (145+)

Chrome 145 以降では、chrome://inspect/#remote-debugging でリモートデバッグを有効にします。

プログレッシブ開示パターン

このスキルは、トークン効率のためにプログレッシブ MCP 開示を使用します。

Chrome DevTools MCP Server
         |
         v
Python Wrappers (.claude/ai-dev-kit/dev-tools/mcp_servers/chrome_devtools/)
         |
         v
Claude executes Python via Bash (on-demand)
         |
         v
Results returned (tools NOT in system prompt)

利点: システムプロンプトにすべての MCP ツールをロードするよりも 98% 以上のトークン削減。

簡単な例

コンソールエラーの取得

uv run python -c "
import sys; sys.path.insert(0, 'dev-tools')
from mcp_servers.chrome_devtools import console

errors = console.list_console_messages(types=['error'])
print(errors)
"

ネットワークリクエストのリスト表示

uv run python -c "
import sys; sys.path.insert(0, 'dev-tools')
from mcp_servers.chrome_devtools import network

requests = network.list_network_requests(resource_types=['xhr', 'fetch'])
print(requests)
"

JavaScript の実行

uv run python -c "
import sys; sys.path.insert(0, 'dev-tools')
from mcp_servers.chrome_devtools import debug

title = debug.evaluate_script('document.title')
print(f'Page title: {title}')
"

認証済みセッションのデバッグ

# 1. Chrome でサイトに手動でログインします (--remote-debugging-port=9222 を指定して起動)。
# 2. 次に、認証状態を分析します。

uv run python -c "
import sys; sys.path.insert(0, 'dev-tools')
from mcp_servers.chrome_devtools import navigation, network, debug

# 開いているタブのリスト表示
pages = navigation.list_pages()
print(pages)

# localStorage から認証トークンを取得
tokens = debug.evaluate_script('JSON.stringify(localStorage)')
print(f'localStorage: {tokens}')

# 最近の API 呼び出しの確認
api_calls = network.get_api_requests()
print(api_calls)
"

利用可能なツールモジュール

console

list_console_messages(types, page_size, page_idx) - コンソール出力を取得
get_console_message(message_id) - 特定のメッセージの詳細を取得
get_errors() - 簡易機能: エラーメッセージのみを取得
get_warnings() - 簡易機能: 警告のみを取得

network

list_network_requests(resource_types, page_size, page_idx) - リクエストをリスト表示
get_network_request(request_id) - リクエスト/レスポンスの詳細全体を取得
get_failed_requests() - 簡易機能: 4xx/5xx リクエストを取得
get_api_requests() - 簡易機能: XHR/fetch リクエストを取得
get_slow_requests(threshold_ms) - 簡易機能: 低速なリクエストを取得

performance

start_trace(reload, auto_stop) - トレースの記録を開始
stop_trace() - トレースを停止してデータを取得
get_insights() - 利用可能なインサイトセットを取得
analyze_insight(insight_set_id, insight_name) - AI を活用したインサイト分析

debug

evaluate_script(expression) - JavaScript を実行

navigation

navigate_page(url, nav_type, ignore_cache, timeout) - ページをナビゲート
list_pages() - すべてのタブをリスト表示
select_page(page_idx, bring_to_front) - インデックスでタブを切り替え
new_page(url, timeout) - 新しいタブを開く
close_page(page_idx) - インデックスでタブを閉じる
wait_for(text, timeout) - ページ上のテキストを待機

注意点

Chrome が --remote-debugging-port=9222 を指定して起動されていない
CHROME_DEVTOOLS_URL 環境変数が設定されていない
ポート 9222 がファイアウォールによってブロックされている
スクリーンショットに使用しようとしている (代わりに browser-discovery を使用)
MCP サーバーがインストールされていない (npx chrome-devtools-mcp@latest)

Chrome DevTools Debugging

Debug web applications by connecting to Chrome's DevTools Protocol. This skill enables:

Console inspection: View errors, warnings, and log messages
Network analysis: Monitor XHR/fetch requests with full headers/body
Performance tracing: Record and analyze performance traces
JavaScript evaluation: Execute code in browser context
Authenticated session debugging: Connect to existing logged-in browsers

When to Use This Skill

Use Case	This Skill	browser-discovery
Console error inspection	Yes	No
Network request analysis	Yes	Limited
Performance tracing	Yes	No
Authenticated sessions	Yes	No
Screenshots	No	Yes
Form filling	No	Yes
Basic navigation	Limited	Yes

Setup Requirements

Option 1: Connect to Existing Chrome (Recommended)

Start Chrome with remote debugging enabled:

# Linux
google-chrome --remote-debugging-port=9222

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

Set the environment variable:

export CHROME_DEVTOOLS_URL=http://127.0.0.1:9222

Option 2: Chrome Auto-Connect (145+)

For Chrome 145+, enable remote debugging at chrome://inspect/#remote-debugging.

Progressive Disclosure Pattern

This skill uses progressive MCP disclosure for token efficiency:

Chrome DevTools MCP Server
         |
         v
Python Wrappers (.claude/ai-dev-kit/dev-tools/mcp_servers/chrome_devtools/)
         |
         v
Claude executes Python via Bash (on-demand)
         |
         v
Results returned (tools NOT in system prompt)

Benefits: 98%+ token reduction vs loading all MCP tools in system prompt.

Quick Examples

Get Console Errors

uv run python -c "
import sys; sys.path.insert(0, 'dev-tools')
from mcp_servers.chrome_devtools import console

errors = console.list_console_messages(types=['error'])
print(errors)
"

List Network Requests

uv run python -c "
import sys; sys.path.insert(0, 'dev-tools')
from mcp_servers.chrome_devtools import network

requests = network.list_network_requests(resource_types=['xhr', 'fetch'])
print(requests)
"

Execute JavaScript

uv run python -c "
import sys; sys.path.insert(0, 'dev-tools')
from mcp_servers.chrome_devtools import debug

title = debug.evaluate_script('document.title')
print(f'Page title: {title}')
"

Debug Authenticated Session

# 1. Log into the site manually in Chrome (started with --remote-debugging-port=9222)
# 2. Then analyze the authenticated state:

uv run python -c "
import sys; sys.path.insert(0, 'dev-tools')
from mcp_servers.chrome_devtools import navigation, network, debug

# List open tabs
pages = navigation.list_pages()
print(pages)

# Get auth tokens from localStorage
tokens = debug.evaluate_script('JSON.stringify(localStorage)')
print(f'localStorage: {tokens}')

# See recent API calls
api_calls = network.get_api_requests()
print(api_calls)
"

Available Tool Modules

console

list_console_messages(types, page_size, page_idx) - Get console output
get_console_message(message_id) - Get specific message details
get_errors() - Convenience: get error messages only
get_warnings() - Convenience: get warnings only

network

list_network_requests(resource_types, page_size, page_idx) - List requests
get_network_request(request_id) - Get full request/response details
get_failed_requests() - Convenience: get 4xx/5xx requests
get_api_requests() - Convenience: get XHR/fetch requests
get_slow_requests(threshold_ms) - Convenience: get slow requests

performance

start_trace(reload, auto_stop) - Start recording trace
stop_trace() - Stop and get trace data
get_insights() - Get available insight sets
analyze_insight(insight_set_id, insight_name) - AI-powered insight analysis

debug

evaluate_script(expression) - Execute JavaScript

navigation

navigate_page(url, nav_type, ignore_cache, timeout) - Navigate page
list_pages() - List all tabs
select_page(page_idx, bring_to_front) - Switch to tab by index
new_page(url, timeout) - Open new tab
close_page(page_idx) - Close tab by index
wait_for(text, timeout) - Wait for text on page

Red Flags

Chrome not started with --remote-debugging-port=9222
CHROME_DEVTOOLS_URL environment variable not set
Port 9222 blocked by firewall
Trying to use for screenshots (use browser-discovery instead)
MCP server not installed (npx chrome-devtools-mcp@latest)

chrome-devtools-debugging

🎯 このSkillでできること

📦 インストール方法 (3ステップ)

📖 Skill本文(日本語訳)

Chrome DevTools デバッグ

このスキルの使用時

セットアップ要件

オプション 1: 既存の Chrome への接続 (推奨)

オプション 2: Chrome 自動接続 (145+)

プログレッシブ開示パターン

簡単な例

コンソールエラーの取得

ネットワークリクエストのリスト表示

JavaScript の実行

認証済みセッションのデバッグ

利用可能なツールモジュール

console

network

performance

debug

navigation

注意点

関連項目

Chrome DevTools Debugging

When to Use This Skill

Setup Requirements

Option 1: Connect to Existing Chrome (Recommended)

Option 2: Chrome Auto-Connect (145+)

Progressive Disclosure Pattern

Quick Examples

Get Console Errors

List Network Requests

Execute JavaScript

Debug Authenticated Session

Available Tool Modules

console

network

performance

debug

navigation

Red Flags

See Also