立体物をthree.jsで作成し、あらゆる角度から確認できるビューアーに表示します。OBJ + MTLやGLBで保存し、他の3D制作ソフトへ持ち込めます。
- 立体物を作って全方向から確認したいとき
- Blenderで編集するモデルの作成
- シルエットや素材の見え方の確認
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.
実行スコア 未検証
インストール方法を見るChrome DevTools MCPのサーバーが起動しない、ブラウザーに接続できない、ページ一覧が空になるといった問題を、設定とエラー内容から順に調べます。.mcp.jsonや各種クライアント設定を確認し、引数の誤り、環境変数の不足、接続方式の不一致などを探します。Could not find DevToolsActivePort、利用可能なツールが少ない、拡張機能が読み込めないといった症状ごとの確認手順も扱います。必要に応じて既知の問題やログを参照し、環境に合った設定例をまとめます。
list_pages、new_page、navigate_pageが失敗したときや、MCPサーバーの初期化で止まるときに役立ちます。Chromeとの接続方式やクライアントの読み取り専用設定など、原因が複数考えられる状況で診断を進めたい人にも向いています。
list_pagesが空になる原因を調べてください」設定確認や診断には、利用中のMCPクライアントとChromeの環境情報が必要です。必要に応じて公式のトラブルシューティング資料やGitHub CLIを参照します。
この紹介文は、公開されている SKILL.md をもとに AI(OpenAI Codex)が作成しました。正確な仕様は下の原文を確認してください。
SKILL.md の記述から、注意が要る操作と導入の前提を AI が確認しました。点数は実際に動かした結果(実行検証)だけで付けています。
点数には入れていません。 2026年10月30日 時点で AI(OpenAI Codex)が判定しました。目安なので、入れる前に原文も確認してください。
インストールする前に、エージェントに与えられる指示の中身を確認できます。
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:
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:
--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.
Before reading documentation or suggesting configuration changes, check if the error message matches one of the following common patterns.
Could not find DevToolsActivePortThis 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:
chrome://inspect/#remote-debugging, and make sure the 'Enable remote debugging' checkbox is checked."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.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.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.
--autoBronnect instead of --autoConnect.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).
If the tools related to extensions (like install_extension) are not available, or if the extensions you load are not functioning:
--categoryExtensions flag: Ensure this flag is passed in the MCP server configuration to enable the extension category tools.--auto-connect, --browserUrl).Identify other error messages from the failed tool call or the MCP initialization logs:
Target closed--slim which only enables navigation and screenshot tools).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 unexpectedlyError [ERR_MODULE_NOT_FOUND]: Cannot find moduleRead 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:
--autoConnect handshakes, timeouts, and requirements (requires running Chrome 144+).Based on the exact error and the user's environment (OS, MCP client), formulate the correct MCP configuration snippet. Check if they need to:
--browser-url=http://127.0.0.1:9222 instead of --autoConnect (e.g. if they are in a sandboxed environment like Claude Desktop).chrome://inspect/#remote-debugging) and accept the connection prompt. Ask the user to verify this is enabled if using --autoConnect.--logFile <absolute_path_to_log_file> to capture debug logs for analysis.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.
If the issue is still unclear, run diagnostic commands to test the server directly:
npx chrome-devtools-mcp@latest --help to verify the installation and Node.js environment.DEBUG=* npx chrome-devtools-mcp@latest --logFile=/tmp/cdm-test.log to capture verbose logs. Analyze the output for errors.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.
まだレビューはありません。使ってみた感想をお寄せください。
ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。
まだコメントはありません。最初のコメントを書いてみませんか。
立体物をthree.jsで作成し、あらゆる角度から確認できるビューアーに表示します。OBJ + MTLやGLBで保存し、他の3D制作ソフトへ持ち込めます。
Chrome DevTools MCPでWebページのアクセシビリティを監査し、見出し構造、ラベル、キーボード操作、フォーカス、タップ領域、色のコントラストに関する問題を調べます。
個人用のタスク一覧に、やることや期限、返答待ち、作業が止まる理由を記録します。進捗や依存関係を更新し、重複や完了済みの項目も整理するスキルです。
作業の目標と完了条件を整理し、必要に応じて複数のエージェントへ分担します。進捗報告、成果の検証、PRのマージまで、プロジェクトとして進行を管理します。
Antigravityのカスタマイズの種類や読み込み順、検出場所を説明し、スキル、ルール、プラグイン、フック、MCPサーバーの作成方法を案内します。
再生・一時停止や時間位置の指定ができるアニメーションをHTMLページとして制作します。場面の長さや速度を調整し、横長・縦長の動画書き出しに備えます。