<h2 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h2>
<p data-line="1" class="code-line">Googleが2025年9月23日にChrome DevTools MCPの公開プレビューを開始しました。<br>
これによってChrome DevToolsの機能をAIに解析してもらうことやWebページを直接デバッグすることなどが可能になった。<br>
色々なAIサービスに対応しているが、今回は弊社で使用しているCursorでの設定でChrome DevTools MCPを連携をやっていきます。</p>
<h2 id="%E9%80%A3%E6%90%BA%E6%96%B9%E6%B3%95" data-line="4" class="code-line">
<a class="header-anchor-link" href="#%E9%80%A3%E6%90%BA%E6%96%B9%E6%B3%95" aria-hidden="true"></a> 連携方法</h2>
<p data-line="5" class="code-line">連携方法には<a href="https://github.com/ChromeDevTools/chrome-devtools-mcp?tab=readme-ov-file#mcp-client-configuration" target="_blank" rel="nofollow noopener noreferrer">公式</a>から出ているように2種類存在します。</p>
<h3 id="%E8%87%AA%E5%8B%95%E9%80%A3%E6%90%BA" data-line="6" class="code-line">
<a class="header-anchor-link" href="#%E8%87%AA%E5%8B%95%E9%80%A3%E6%90%BA" aria-hidden="true"></a> 自動連携</h3>
<p data-line="7" class="code-line"><a href="https://github.com/ChromeDevTools/chrome-devtools-mcp?tab=readme-ov-file#mcp-client-configuration" target="_blank" rel="nofollow noopener noreferrer">公式</a>の方で自動的に設定してくれるボタンを用意しているらしくこのボタンをクリックしていけば連携されます。</p>
<h3 id="%E6%89%8B%E5%8B%95%E9%80%A3%E6%90%BA" data-line="8" class="code-line">
<a class="header-anchor-link" href="#%E6%89%8B%E5%8B%95%E9%80%A3%E6%90%BA" aria-hidden="true"></a> 手動連携</h3>
<p data-line="9" class="code-line"><code>Cursor</code> → <code>基本設定</code> → <code>Cursor Settings</code> → <code>Tools &amp; MCP</code> → <code>New MCP Serverボタン</code>を押下して、下記設定を追加すれば、MCPとして使用できます。</p>
<div class="code-block-container"><pre class="language-json"><code class="language-json code-line" data-line="10"><span class="token punctuation">{</span>
  <span class="token property">"chrome-devtools"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">"command"</span><span class="token operator">:</span> <span class="token string">"npx -y chrome-devtools-mcp@latest"</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="%E8%A6%81%E4%BB%B6" data-line="17" class="code-line">
<a class="header-anchor-link" href="#%E8%A6%81%E4%BB%B6" aria-hidden="true"></a> 要件</h2>
<p data-line="18" class="code-line">Chrome DevTools MCPを使用する上で要件がいくつかあります。</p>
<ol data-line="19" class="code-line">
<li data-line="19" class="code-line">Nodeのバージョンはv20.19またはそれ以降の最新のメンテナンスLTSバージョン以降</li>
<li data-line="20" class="code-line">Chromeの現在の安定バージョン以降</li>
<li data-line="21" class="code-line">npm</li>
</ol>
<p data-line="23" class="code-line">この３つが必要になります。</p>
<p data-line="25" class="code-line">2と3はほぼほぼ問題ないかと思いますが、Nodeのバージョンに関してはnodenvなどを導入し、Nodeのバージョンを切り替えられるようにすることをおすすめします。</p>
<p data-line="27" class="code-line">Chrome DevTools MCP使用可能な場合<br>
<img src="https://storage.googleapis.com/zenn-user-upload/1391d44faf36-20251023.png" alt="" class="md-img" loading="lazy"><br>
Chrome DevTools MCP使用不可な場合<br>
<img src="https://storage.googleapis.com/zenn-user-upload/18cb4454fafe-20251023.png" alt="" class="md-img" loading="lazy"></p>
<h2 id="%E4%BD%BF%E7%94%A8%E4%BE%8B" data-line="32" class="code-line">
<a class="header-anchor-link" href="#%E4%BD%BF%E7%94%A8%E4%BE%8B" aria-hidden="true"></a> 使用例</h2>
<div class="code-block-container"><pre class="language-txt"><code class="language-txt code-line" data-line="33">https://actbe.co.jp/press-release/ で 株式会社アクトビ、東京証券取引所 TOKYO PRO Market（TPM）へ上場の記事をクリックして詳細画面に遷移してほしい
</code></pre></div><p data-line="36" class="code-line">とするとChromeが立ち上がり該当のページに遷移して記事をクリックし詳細画面に遷移してくれます。</p>
<div class="code-block-container"><pre class="language-txt"><code class="language-txt code-line" data-line="38">https://〇〇〇〇/contact で 下記のお問い合わせ内容を記入してお問い合わせをしてほしい
お問い合わせ内容: 〇〇について
名前: 〇〇 〇〇
フリガナ: 〇〇 〇〇
メールアドレス: 〇〇@〇〇.com
お問い合わせ内容: 〇〇〇〇
</code></pre></div><p data-line="46" class="code-line">とするとそのページのお問い合わさせを自動的に行なってくれたりなどします。</p>
<h2 id="%E6%A9%9F%E8%83%BD%E4%B8%80%E8%A6%A7" data-line="47" class="code-line">
<a class="header-anchor-link" href="#%E6%A9%9F%E8%83%BD%E4%B8%80%E8%A6%A7" aria-hidden="true"></a> 機能一覧</h2>
<p data-line="49" class="code-line">ブラウザの自動操作、パフォーマンス計測、デバッグを実現する包括的なツールセットです。以下の6つのカテゴリに分類される28のツールを提供しています。<br>
※2025年10月24日時点</p>
<h3 id="1.-%E5%85%A5%E5%8A%9B%E6%93%8D%E4%BD%9C%E3%81%AE%E8%87%AA%E5%8B%95%E5%8C%96-(8%E3%83%84%E3%83%BC%E3%83%AB)" data-line="51" class="code-line">
<a class="header-anchor-link" href="#1.-%E5%85%A5%E5%8A%9B%E6%93%8D%E4%BD%9C%E3%81%AE%E8%87%AA%E5%8B%95%E5%8C%96-(8%E3%83%84%E3%83%BC%E3%83%AB)" aria-hidden="true"></a> 1. 入力操作の自動化 (8ツール)</h3>
<p data-line="52" class="code-line">Webページ上の要素を操作するためのツール群</p>
<ul data-line="53" class="code-line">
<li data-line="53" class="code-line">click - 要素のクリック操作（ダブルクリックにも対応）</li>
<li data-line="54" class="code-line">drag - 要素のドラッグ&amp;ドロップ</li>
<li data-line="55" class="code-line">fill - テキスト入力やセレクトボックスの選択</li>
<li data-line="56" class="code-line">fill_form - 複数のフォーム要素を一括入力</li>
<li data-line="57" class="code-line">handle_dialog - ブラウザダイアログの処理（承認/却下）</li>
<li data-line="58" class="code-line">hover - 要素へのホバー操作</li>
<li data-line="59" class="code-line">press_key - キーボード操作（ショートカットキーにも対応）</li>
<li data-line="60" class="code-line">upload_file - ファイルアップロード</li>
</ul>
<h3 id="2.-%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3-(7%E3%83%84%E3%83%BC%E3%83%AB)" data-line="61" class="code-line">
<a class="header-anchor-link" href="#2.-%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3-(7%E3%83%84%E3%83%BC%E3%83%AB)" aria-hidden="true"></a> 2. ページナビゲーション (7ツール)</h3>
<p data-line="62" class="code-line">ブラウザのタブやページ遷移を制御</p>
<ul data-line="63" class="code-line">
<li data-line="63" class="code-line">list_pages - 開いているページの一覧取得</li>
<li data-line="64" class="code-line">new_page - 新しいページを開く</li>
<li data-line="65" class="code-line">select_page - 操作対象のページを選択</li>
<li data-line="66" class="code-line">close_page - ページを閉じる</li>
<li data-line="67" class="code-line">navigate_page - 指定URLへ移動</li>
<li data-line="68" class="code-line">navigate_page_history - 戻る/進む操作</li>
<li data-line="69" class="code-line">wait_for - 特定のテキストが表示されるまで待機</li>
</ul>
<h3 id="3.-%E3%82%A8%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3-(3%E3%83%84%E3%83%BC%E3%83%AB)" data-line="70" class="code-line">
<a class="header-anchor-link" href="#3.-%E3%82%A8%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3-(3%E3%83%84%E3%83%BC%E3%83%AB)" aria-hidden="true"></a> 3. エミュレーション (3ツール)</h3>
<p data-line="71" class="code-line">デバイスやネットワーク環境のシミュレーション</p>
<ul data-line="72" class="code-line">
<li data-line="72" class="code-line">emulate_cpu - CPU速度の制限（1-20倍のスロットリング）</li>
<li data-line="73" class="code-line">emulate_network - ネットワーク環境の再現（3G/4G、オフラインなど）</li>
<li data-line="74" class="code-line">resize_page - ページサイズの変更（レスポンシブデザインのテスト用）</li>
</ul>
<h3 id="4.-%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9%E8%A8%88%E6%B8%AC-(3%E3%83%84%E3%83%BC%E3%83%AB)" data-line="75" class="code-line">
<a class="header-anchor-link" href="#4.-%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9%E8%A8%88%E6%B8%AC-(3%E3%83%84%E3%83%BC%E3%83%AB)" aria-hidden="true"></a> 4. パフォーマンス計測 (3ツール)</h3>
<p data-line="76" class="code-line">Webページのパフォーマンス分析</p>
<ul data-line="77" class="code-line">
<li data-line="77" class="code-line">performance_start_trace - パフォーマンストレースの開始（Core Web Vitalsも計測）</li>
<li data-line="78" class="code-line">performance_stop_trace - トレースの停止</li>
<li data-line="79" class="code-line">performance_analyze_insight - パフォーマンス改善のインサイト詳細を取得</li>
</ul>
<h3 id="5.-%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E7%9B%A3%E8%A6%96-(2%E3%83%84%E3%83%BC%E3%83%AB)" data-line="80" class="code-line">
<a class="header-anchor-link" href="#5.-%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E7%9B%A3%E8%A6%96-(2%E3%83%84%E3%83%BC%E3%83%AB)" aria-hidden="true"></a> 5. ネットワーク監視 (2ツール)</h3>
<p data-line="81" class="code-line">HTTPリクエスト/レスポンスの確認</p>
<ul data-line="82" class="code-line">
<li data-line="82" class="code-line">list_network_requests - ネットワークリクエストの一覧表示（リソースタイプでフィルタ可能）</li>
<li data-line="83" class="code-line">get_network_request - 特定のリクエスト詳細を取得</li>
</ul>
<h3 id="6.-%E3%83%87%E3%83%90%E3%83%83%E3%82%B0-(5%E3%83%84%E3%83%BC%E3%83%AB)" data-line="84" class="code-line">
<a class="header-anchor-link" href="#6.-%E3%83%87%E3%83%90%E3%83%83%E3%82%B0-(5%E3%83%84%E3%83%BC%E3%83%AB)" aria-hidden="true"></a> 6. デバッグ (5ツール)</h3>
<p data-line="85" class="code-line">開発者向けのデバッグ機能</p>
<ul data-line="86" class="code-line">
<li data-line="86" class="code-line">take_snapshot - アクセシビリティツリーベースのページ構造取得（要素にuidが付与される）</li>
<li data-line="87" class="code-line">take_screenshot - ページまたは要素のスクリーンショット撮影</li>
<li data-line="88" class="code-line">list_console_messages - コンソールメッセージの一覧（エラー、警告などでフィルタ可能）</li>
<li data-line="89" class="code-line">get_console_message - 特定のコンソールメッセージの詳細取得</li>
<li data-line="90" class="code-line">evaluate_script - JavaScriptコードの実行と結果取得</li>
</ul>
<h1 id="%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3%E4%B8%8A%E3%81%AE%E8%AD%A6%E5%91%8A" data-line="92" class="code-line">
<a class="header-anchor-link" href="#%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3%E4%B8%8A%E3%81%AE%E8%AD%A6%E5%91%8A" aria-hidden="true"></a> セキュリティ上の警告</h1>
<p data-line="93" class="code-line">MCPクライアントと共有したくない機密情報や個人情報は、絶対に扱わないでください。</p>
<ul data-line="94" class="code-line">
<li data-line="94" class="code-line">ブラウザに表示される全ての情報がMCPクライアントから閲覧可能</li>
<li data-line="95" class="code-line">パスワード、個人情報、機密データなどは入力・表示しない</li>
<li data-line="96" class="code-line">テスト・開発用途専用のブラウザインスタンスとして使用することを推奨</li>
</ul>
<h1 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="98" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h1>
<p data-line="99" class="code-line">特定のWebサイトの内容を分析するだけでなく、UIのテストやSTテストなども行えることもありテストも自動化できるようになりよりエンジニアの負担が減るようなMCPなのかなと思うので是非皆さんも使用してみてください！</p>


AI駆動開発でやったこと

Chrome DevTools MCPとCursorとの連携

2. ページナビゲーション (7ツール)

4. パフォーマンス計測 (3ツール)

chrome

Discussion