ファイル	場所	用途
`settings.json`	`~/.claude/settings.json`	model, hooks, statusLine, plugins, alwaysThinkingEnabled など
`.claude.json`	`~/.claude.json`	projects ごとの MCP設定、統計情報、キャッシュなど

注意: 最初 ~/.claude/settings.json にMCP設定があると予想して確認したが、MCP設定は ~/.claude.json という 別のファイル に格納されていた。この2つを混同しないこと。

MCP設定ファイルの正しい場所

プロジェクト固有のMCP設定

場所: ~/.claude.json の projects セクション内

{
  "projects": {
    "C:\\Users\\numbe\\Git_repo\\mdx-playground": {
      "mcpServers": {
        "chrome-devtools": {
          "type": "stdio",
          "command": "npx",
          "args": ["@anthropic-ai/chrome-devtools-mcp@latest"],
          "env": {}
        }
      }
    }
  }
}

claude mcp add コマンドを実行すると、このファイルの該当プロジェクトセクションに追加される：

Added stdio MCP server chrome-devtools with command: npx @anthropic-ai/chrome-devtools-mcp@latest to local config
File modified: C:\Users\numbe\.claude.json [project: C:\Users\numbe\Git_repo\mdx-playground]

復旧手順

MCPサーバーの追加

claude mcp add chrome-devtools -- npx @anthropic-ai/chrome-devtools-mcp@latest

追加後の確認

claude mcp list
claude mcp get chrome-devtools

設定が消える可能性のある原因（推測）

~/.claude.json ファイルの削除: このファイルが何らかの理由で削除された
Claude Codeのアップデート: 設定形式の変更やマイグレーション失敗
設定ファイルの場所変更: バージョン間で設定ファイルの場所が変わった可能性
プロジェクトパスの変更: プロジェクトのパスが変わると、ローカル設定が紐付かなくなる可能性
パッケージ名の変更: MCPパッケージ名が変更された場合（例: chrome-devtools-mcp → @anthropic-ai/chrome-devtools-mcp）、古い設定では接続できなくなる

Voltaとの関係

この環境ではClaude CodeをVolta経由でインストール/アップデートしている：

$ volta list claude
tool claude / @anthropic-ai/[email protected] / [email protected] npm@built-in (default)

$ claude --version
2.0.72 (Claude Code)

Voltaの管理範囲:

~/.volta/ 以下（パッケージ本体）

Claude Code設定ファイルの場所:

~/.claude.json （Voltaの管理範囲外）
~/.claude/settings.json （Voltaの管理範囲外）

Voltaのアップデート自体は設定ファイルを直接消すことはないはず。ただし、Claude Codeのバージョンアップに伴い設定形式や読み込み場所が変わると、設定が「見つからない」状態になる可能性はある。

次回消えた場合の確認事項

~/.claude.json ファイルが存在するか
そのファイル内に該当プロジェクトのセクションがあるか
~/.claude/settings.json に mcpServers セクションがあるか
Claude Codeのバージョンが更新されていないか

Chromeリモートデバッグの起動方法（重要）

Chromeでリモートデバッグを有効にするには、--user-data-dirオプションが必須である。

Chromeはセキュリティ上の理由から、リモートデバッグポートを有効にする際にデフォルト以外のユーザーデータディレクトリを使用することを要求する。

正しい起動コマンド（Windows）

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable"

間違った起動コマンド（動作しない）

# user-data-dir がないと接続できない
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

起動前の注意事項

既存のChromeプロセスを全て終了する

powershell "Stop-Process -Name chrome -Force -ErrorAction SilentlyContinue"

その後、上記の正しいコマンドで起動する

セキュリティ警告

リモートデバッグポートを有効にすると、マシン上の任意のアプリケーションがそのポートに接続してブラウザを制御できる。デバッグポートが開いている間は機密性の高いウェブサイトを閲覧しないこと。

パッケージ名の変更（2025年更新）

Chrome DevTools MCPのパッケージ名が変更されている：

旧パッケージ名	新パッケージ名
`@anthropic-ai/chrome-devtools-mcp`	`chrome-devtools-mcp`

現在の正しいMCP設定

claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222

MCP設定例（~/.claude.json）

{
  "projects": {
    "C:\\Users\\numbe\\Git_repo\\mdx-playground": {
      "mcpServers": {
        "chrome-devtools": {
          "type": "stdio",
          "command": "npx",
          "args": ["-y", "chrome-devtools-mcp@latest", "--browserUrl", "http://127.0.0.1:9222"],
          "env": {}
        }
      }
    }
  }
}

Chrome 144+の新機能（autoConnect）

Chrome M144以降では --autoConnect オプションが使用可能：

chrome://inspect#remote-debugging でリモートデバッグを有効化
MCPサーバーを --autoConnect オプション付きで起動

これにより、手動でChromeをデバッグモードで起動する必要がなくなる。

調査日時

2025-12-18