Claude Code × Chrome DevTools MCP でUI崩れを自動修正する

はじめに

この記事では、Claude Code と Chrome DevTools MCP を組み合わせて、スマホ表示のバグを特定・修正するワークフローを紹介します。

Chrome DevTools MCPとは

MCP (Model Context Protocol) は、AIモデルが外部ツールやサービスと連携するための標準プロトコルです。

Chrome DevTools MCPを使うと、Claude Codeがブラウザを直接操作できるようになります。

• ページの表示・操作
• モバイルビューポートのエミュレーション
• JavaScript実行によるDOM検査
• スクリーンショット取得
• ネットワークリクエストやコンソールログの確認

などが可能です。

インストール方法

1. Chrome DevTools MCP サーバーをインストール

npm install -g @anthropic/chrome-devtools-mcp

2. Claude Codeの設定ファイルに追加

~/.claude/settings.json に以下を追加します。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "@anthropic/chrome-devtools-mcp"]
    }
  }
}

3. Claude Codeを再起動

設定を反映するため、Claude Codeを再起動します。

Chromeのリモートデバッグモードでの起動もClaude Codeが自動で行うため、手動での操作は不要です。

使い方

セットアップが完了したら、あとはClaude Codeに問題を伝えるだけです。

<http://localhost:3000/settings> がスマホで崩れてる。
Chrome DevTools で調査して。

これだけで、Claude Codeが指定したURLをブラウザで開き、iPhone SEなどの画面サイズにエミュレートします。 scrollWidth と viewportWidth を比較して横はみ出しを検出し、原因の要素を特定したら、該当ファイルを編集して問題を解消し、リロードして修正を確認するところまで自動で行います。

実際の動作例

Claude Codeの自動処理

Claude Codeは内部で以下のような診断を行います。

// 横はみ出しを検出
const viewportWidth = window.innerWidth;    // 320px
const scrollWidth = document.body.scrollWidth; // 756px → はみ出している！

// 原因要素を特定
// → class="w-[756px]" を持つDIVが最も右にはみ出している

原因を特定したら、Claude Codeがコードを直接修正します。

// 修正前
<div className="w-[756px]">

// 修正後（Claude Codeが自動で変更）
<div className="w-full max-w-[756px]">

結果

問題が解消され、スマホでも正しく表示されるようになります。

複雑なケースでは二分探索を指示しよう

AIが原因を簡単に特定できない場合は、「二分探索」で原因を絞り込むよう指示を出しましょう。

コメントアウトしながら、二分探索で原因を特定して

Claude Codeがページの半分のコンポーネントをコメントアウトし、リロードして問題が残っているか確認します。 問題がある方をさらに半分に絞り込む、という作業を繰り返して原因コンポーネントを特定します。

まとめ

Chrome DevTools MCPをセットアップすれば、あとは問題を伝えるだけです。 Claude Codeがブラウザを操作してモバイル表示を再現し、問題を数値化して原因要素を特定し、コードを修正して確認まで自動で行います。