本文へ移動
cccskills
無料GitHub で公開日本語紹介

troubleshooting

Chrome DevTools MCPの接続やページ操作に失敗したとき、設定やエラー内容を順に確認し、原因の切り分けと修正用の設定例を案内します。

原文原文の説明を見る

Uses Chrome DevTools MCP and documentation to troubleshoot connection and target issues. Trigger this skill when list_pages, new_page, or navigate_page fail, or when the server initialization fails.

asgeirtj/system_prompts_leaksスター 70,411(GitHub 70,411 + cccskills 0)
連携ツールGitHub

実行スコア 未検証

インストール方法を見る

こんなときに便利

  • MCPサーバーの起動エラーを調べたいとき
  • Chromeとの接続不良を直したいとき
  • ページ一覧や利用ツールが表示されないとき

日本語での紹介

できること

Chrome DevTools MCPのサーバーが起動しない、ブラウザーに接続できない、ページ一覧が空になるといった問題を、設定とエラー内容から順に調べます。.mcp.jsonや各種クライアント設定を確認し、引数の誤り、環境変数の不足、接続方式の不一致などを探します。Could not find DevToolsActivePort、利用可能なツールが少ない、拡張機能が読み込めないといった症状ごとの確認手順も扱います。必要に応じて既知の問題やログを参照し、環境に合った設定例をまとめます。

こんなときに便利

list_pages、new_page、navigate_pageが失敗したときや、MCPサーバーの初期化で止まるときに役立ちます。Chromeとの接続方式やクライアントの読み取り専用設定など、原因が複数考えられる状況で診断を進めたい人にも向いています。

使い方の例

  • 「Chrome DevTools MCPが起動しないので、設定を確認してください」
  • 「list_pagesが空になる原因を調べてください」
  • 「この接続エラーに合う設定例を教えてください」

注意点

設定確認や診断には、利用中のMCPクライアントとChromeの環境情報が必要です。必要に応じて公式のトラブルシューティング資料やGitHub CLIを参照します。

この紹介文は、公開されている SKILL.md をもとに AI(OpenAI Codex)が作成しました。正確な仕様は下の原文を確認してください。

資料チェック

SKILL.md の記述から、注意が要る操作と導入の前提を AI が確認しました。点数は実際に動かした結果(実行検証)だけで付けています。

安全面送信・削除・コマンド実行などの扱いが明示されているか
C要確認設定ファイル読取やログ取得、npx実行、GitHub検索を確認なしで指示している。
導入のしやすさ必要なツールや API キーが少ないか、書かれているか
B一部不足MCPクライアントとChromeが必要だが、導入手順はなくGitHub CLI等は条件付きである。

点数には入れていません。 2026年10月30日 時点で AI(OpenAI Codex)が判定しました。目安なので、入れる前に原文も確認してください。

評価が違うと思ったら、見直しを依頼する

どの項目が、なぜ違うと思うかを書いてください。ログインは不要です。内容を SKILL.md と照らし合わせて評価を作り直し、この欄に反映します。

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

含まれるファイル(1)

  • SKILL.md6.9 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Troubleshooting Wizard

You are acting as a troubleshooting wizard to help the user configure and fix their Chrome DevTools MCP server setup. When this skill is triggered (e.g., because list_pages, new_page, or navigate_page failed, or the server wouldn't start), follow this step-by-step diagnostic process:

Step 1: Find and Read Configuration

Your first action should be to locate and read the MCP configuration file. Search for the following files in the user's workspace: .mcp.json, gemini-extension.json, .claude/settings.json, .vscode/launch.json, or .gemini/settings.json.

If you find a configuration file, read and interpret it to identify potential issues such as:

  • Incorrect arguments or flags.
  • Missing environment variables.
  • Usage of --autoConnect in incompatible environments.

If you cannot find any of these files, only then should you ask the user to provide their configuration file content.

Step 2: Triage Common Connection Errors

Before reading documentation or suggesting configuration changes, check if the error message matches one of the following common patterns.

Error: Could not find DevToolsActivePort

This error is highly specific to the --autoConnect feature. It means the MCP server cannot find the file created by a running, debuggable Chrome instance. This is not a generic connection failure.

Your primary goal is to guide the user to ensure Chrome is running and properly configured. Do not immediately suggest switching to --browserUrl. Follow this exact sequence:

  1. Ask the user to confirm that the correct Chrome version (e.g., "Chrome Canary" if the error mentions it) is currently running.
  2. If the user confirms it is running, instruct them to enable remote debugging. Be very specific about the URL and the action: "Please open a new tab in Chrome, navigate to chrome://inspect/#remote-debugging, and make sure the 'Enable remote debugging' checkbox is checked."
  3. Once the user confirms both steps, your only next action should be to call the list_pages tool. This is the simplest and safest way to verify if the connection is now successful. Do not retry the original, more complex command yet.
  4. If list_pages succeeds, the problem is resolved. If it still fails with the same error, then you can proceed to the more advanced steps like suggesting --browserUrl or checking for sandboxing issues.

Symptom: Server starts but creates a new empty profile

If the server starts successfully but list_pages returns an empty list or creates a new profile instead of connecting to the existing Chrome instance, check for typos in the arguments.

  • Check for flag typos: For example, --autoBronnect instead of --autoConnect.
  • Verify the configuration: Ensure the arguments match the expected flags exactly.

Symptom: Missing Tools / Only 9 tools available

If the server starts successfully but only a limited subset of tools (like list_pages, get_console_message, lighthouse_audit, take_heapsnapshot) are available, this is likely because the MCP client is enforcing a read-only mode.

All tools in chrome-devtools-mcp are annotated with readOnlyHint: true (for safe, non-modifying tools) or readOnlyHint: false (for tools that modify browser state, like emulate, click, navigate_page). To access the full suite of tools, the user must disable read-only mode in their MCP client (e.g., by exiting "Plan Mode" in Gemini CLI or adjusting their client's tool safety settings).

Symptom: Extension tools are missing or extensions fail to load

If the tools related to extensions (like install_extension) are not available, or if the extensions you load are not functioning:

  1. Check for the --categoryExtensions flag: Ensure this flag is passed in the MCP server configuration to enable the extension category tools.
  2. Make sure the MCP server in configured to launch Chrome instead of connecting to an instance: Chrome before 149 is not able to load extensions when connecting to an existing instance (--auto-connect, --browserUrl).

Other Common Errors

Identify other error messages from the failed tool call or the MCP initialization logs:

  • Target closed
  • "Tool not found" (check if they are using --slim which only enables navigation and screenshot tools).
  • Missing pageId: Page-scoped tools require a pageId argument. Call list_pages to find active page IDs.
  • ProtocolError: Network.enable timed out or The socket connection was closed unexpectedly
  • Error [ERR_MODULE_NOT_FOUND]: Cannot find module
  • Any sandboxing or host validation errors.

Step 3: Read Known Issues

Read the contents of https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md to map the error to a known issue. Pay close attention to:

  • Sandboxing restrictions (macOS Seatbelt, Linux containers).
  • WSL requirements.
  • --autoConnect handshakes, timeouts, and requirements (requires running Chrome 144+).

Step 4: Formulate a Configuration

Based on the exact error and the user's environment (OS, MCP client), formulate the correct MCP configuration snippet. Check if they need to:

  • Pass --browser-url=http://127.0.0.1:9222 instead of --autoConnect (e.g. if they are in a sandboxed environment like Claude Desktop).
  • Enable remote debugging in Chrome (chrome://inspect/#remote-debugging) and accept the connection prompt. Ask the user to verify this is enabled if using --autoConnect.
  • Add --logFile <absolute_path_to_log_file> to capture debug logs for analysis.
  • Increase startup_timeout_ms (e.g. to 20000) if using Codex on Windows.

If you are unsure of the user's configuration, ask the user to provide their current MCP server JSON configuration.

Step 5: Run Diagnostic Commands

If the issue is still unclear, run diagnostic commands to test the server directly:

  • Run npx chrome-devtools-mcp@latest --help to verify the installation and Node.js environment.
  • If you need more information, run DEBUG=* npx chrome-devtools-mcp@latest --logFile=/tmp/cdm-test.log to capture verbose logs. Analyze the output for errors.

Step 6: Check GitHub for Existing Issues

If https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md does not cover the specific error, check if the gh (GitHub CLI) tool is available in the environment. If so, search the GitHub repository for similar issues:
gh issue list --repo ChromeDevTools/chrome-devtools-mcp --search "<error snippet>" --state all

Alternatively, you can recommend that the user checks https://github.com/ChromeDevTools/chrome-devtools-mcp/issues and https://github.com/ChromeDevTools/chrome-devtools-mcp/discussions for help.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

3d-object

無料概要あり

立体物をthree.jsで作成し、あらゆる角度から確認できるビューアーに表示します。OBJ + MTLやGLBで保存し、他の3D制作ソフトへ持ち込めます。

  • 立体物を作って全方向から確認したいとき
  • Blenderで編集するモデルの作成
  • シルエットや素材の見え方の確認
asgeirtj/system_prompts_leaks7万2026年10月29日 更新

a11y-debugging

無料概要あり

Chrome DevTools MCPでWebページのアクセシビリティを監査し、見出し構造、ラベル、キーボード操作、フォーカス、タップ領域、色のコントラストに関する問題を調べます。

  • ページ全体のアクセシビリティを監査したいとき
  • フォームのラベルや画像の代替テキストを確認したいとき
  • キーボード操作とフォーカスを点検したいとき
asgeirtj/system_prompts_leaks7万2026年10月29日 更新

action-items

無料概要あり

個人用のタスク一覧に、やることや期限、返答待ち、作業が止まる理由を記録します。進捗や依存関係を更新し、重複や完了済みの項目も整理するスキルです。

  • 期限付きのタスクや約束の記録
  • 返答待ちや作業が止まる理由の整理
  • 前提タスク完了後の依存関係の更新
asgeirtj/system_prompts_leaks7万2026年10月29日 更新

agents

無料概要あり

作業の目標と完了条件を整理し、必要に応じて複数のエージェントへ分担します。進捗報告、成果の検証、PRのマージまで、プロジェクトとして進行を管理します。

  • 独立した作業を並行して進めたいとき
  • 進行中の各作業の状況確認
  • 中断したプロジェクトの再開
asgeirtj/system_prompts_leaks7万2026年10月29日 更新

agy-customizations

無料概要あり

Antigravityのカスタマイズの種類や読み込み順、検出場所を説明し、スキル、ルール、プラグイン、フック、MCPサーバーの作成方法を案内します。

  • カスタマイズの種類を選びたいとき
  • 読み込み場所や優先順位を確認したいとき
  • スキルやルールを作成したいとき
asgeirtj/system_prompts_leaks7万2026年10月29日 更新

animated-video

無料概要あり

再生・一時停止や時間位置の指定ができるアニメーションをHTMLページとして制作します。場面の長さや速度を調整し、横長・縦長の動画書き出しに備えます。

  • 製品の操作紹介を動画にしたいとき
  • 文字と図形で内容を説明したいとき
  • 縦長のアニメーション制作
asgeirtj/system_prompts_leaks7万2026年10月29日 更新

asgeirtj のスキルをすべて見る

このスキルの問題を報告する