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

> Chrome DevTools MCPとClaude Codeを使って、スマホ表示のバグを自動的に特定・修正するワークフローを紹介します。簡単なセットアップで、問題を伝えるだけでAIが診断・修正を行い、モバイル表示を正しく再現します。

- 公開日: 2026-02-03
- 著者: 村井 謙太
- タグ: Claude Code
- URL: https://tech.anycloud.co.jp/articles/claude-code-chrome-devtools-mcp

---

## はじめに

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

## Chrome DevTools MCPとは

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

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

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

などが可能です。

## インストール方法

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

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

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

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

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

### 3\. Claude Codeを再起動

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

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

## 使い方

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

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

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

## 実際の動作例

### Claude Codeの自動処理

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

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

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

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

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

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

### 結果

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

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

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

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

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

## まとめ

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