[{"data":1,"prerenderedAt":718},["ShallowReactive",2],{"content-/chrome-devtools-mcp-setup":3,"all-pages-for-dir":695,"related-/chrome-devtools-mcp-setup":696,"og-image-/chrome-devtools-mcp-setup":717},{"id":4,"title":5,"body":6,"category":680,"concepts":680,"description":681,"extension":682,"meta":683,"navigation":212,"ogImage":680,"path":684,"project_name":680,"published":685,"publishedAt":686,"seo":687,"source":680,"stem":688,"tags":689,"todo":680,"unpublished":685,"updatedAt":680,"__hash__":694},"pages/2025-11/2025-11-25/chrome-devtools-mcp-setup.md","Chrome DevTools MCPの設定方法",{"type":7,"value":8,"toc":661},"minimark",[9,13,17,22,25,44,47,52,55,100,106,126,130,133,164,168,179,183,186,233,236,244,247,250,295,298,305,360,363,366,416,419,425,428,432,488,491,509,512,527,537,540,565,568,654,657],[10,11,5],"h1",{"id":12},"chrome-devtools-mcpの設定方法",[14,15,16],"p",{},"Claude CodeでChrome DevTools MCPサーバーを使用すると、Chromeブラウザの操作、スナップショット取得、ページのナビゲーション、要素のクリックなどを自動化できます。",[18,19,21],"h2",{"id":20},"mcpとは","MCPとは",[14,23,24],{},"MCP (Model Context Protocol) は、Claude Codeに外部ツールやサービスを接続するためのプロトコルです。Chrome DevTools MCPを使用すると、以下のような操作が可能になります：",[26,27,28,32,35,38,41],"ul",{},[29,30,31],"li",{},"Webページの操作（クリック、入力、スクロール）",[29,33,34],{},"ページのスナップショット取得",[29,36,37],{},"コンソールログやネットワークリクエストの監視",[29,39,40],{},"スクリーンショットの撮影",[29,42,43],{},"パフォーマンス計測",[18,45,46],{"id":46},"設定方法",[48,49,51],"h3",{"id":50},"_1-グローバル設定全プロジェクトで使用","1. グローバル設定（全プロジェクトで使用）",[14,53,54],{},"すべてのプロジェクトでChrome DevTools MCPを使用したい場合は、グローバルに設定します。",[56,57,62],"pre",{"className":58,"code":59,"language":60,"meta":61,"style":61},"language-bash shiki shiki-themes vitesse-light vitesse-light","claude mcp add --transport stdio chrome-devtools -- npx chrome-devtools-mcp@latest\n","bash","",[63,64,65],"code",{"__ignoreMap":61},[66,67,70,74,78,81,85,88,91,94,97],"span",{"class":68,"line":69},"line",1,[66,71,73],{"class":72},"senZ8","claude",[66,75,77],{"class":76},"sdGka"," mcp",[66,79,80],{"class":76}," add",[66,82,84],{"class":83},"snbK4"," --transport",[66,86,87],{"class":76}," stdio",[66,89,90],{"class":76}," chrome-devtools",[66,92,93],{"class":83}," --",[66,95,96],{"class":76}," npx",[66,98,99],{"class":76}," chrome-devtools-mcp@latest\n",[14,101,102],{},[103,104,105],"strong",{},"説明:",[26,107,108,114,120],{},[29,109,110,113],{},[63,111,112],{},"--transport stdio",": 標準入出力を使用してMCPサーバーと通信",[29,115,116,119],{},[63,117,118],{},"chrome-devtools",": MCPサーバーの名前（任意の名前を指定可能）",[29,121,122,125],{},[63,123,124],{},"npx chrome-devtools-mcp@latest",": 実行するコマンド（最新版を自動ダウンロード）",[48,127,129],{"id":128},"_2-プロジェクトローカル設定特定のプロジェクトのみ","2. プロジェクトローカル設定（特定のプロジェクトのみ）",[14,131,132],{},"特定のプロジェクトでのみChrome DevTools MCPを使用したい場合は、ローカル設定を使用します。",[56,134,136],{"className":58,"code":135,"language":60,"meta":61,"style":61},"claude mcp add -s local --transport stdio chrome-devtools -- npx chrome-devtools-mcp@latest\n",[63,137,138],{"__ignoreMap":61},[66,139,140,142,144,146,149,152,154,156,158,160,162],{"class":68,"line":69},[66,141,73],{"class":72},[66,143,77],{"class":76},[66,145,80],{"class":76},[66,147,148],{"class":83}," -s",[66,150,151],{"class":76}," local",[66,153,84],{"class":83},[66,155,87],{"class":76},[66,157,90],{"class":76},[66,159,93],{"class":83},[66,161,96],{"class":76},[66,163,99],{"class":76},[14,165,166],{},[103,167,105],{},[26,169,170,176],{},[29,171,172,175],{},[63,173,174],{},"-s local",": プロジェクトローカルスコープで設定（このオプションでローカル設定になる）",[29,177,178],{},"その他のオプションはグローバル設定と同じ",[48,180,182],{"id":181},"_3-設定の確認","3. 設定の確認",[14,184,185],{},"設定されているMCPサーバーを確認するには：",[56,187,189],{"className":58,"code":188,"language":60,"meta":61,"style":61},"# すべてのMCPサーバーを一覧表示\nclaude mcp list\n\n# 特定のMCPサーバーの詳細を表示\nclaude mcp get chrome-devtools\n",[63,190,191,197,207,214,220],{"__ignoreMap":61},[66,192,193],{"class":68,"line":69},[66,194,196],{"class":195},"sxvE3","# すべてのMCPサーバーを一覧表示\n",[66,198,200,202,204],{"class":68,"line":199},2,[66,201,73],{"class":72},[66,203,77],{"class":76},[66,205,206],{"class":76}," list\n",[66,208,210],{"class":68,"line":209},3,[66,211,213],{"emptyLinePlaceholder":212},true,"\n",[66,215,217],{"class":68,"line":216},4,[66,218,219],{"class":195},"# 特定のMCPサーバーの詳細を表示\n",[66,221,223,225,227,230],{"class":68,"line":222},5,[66,224,73],{"class":72},[66,226,77],{"class":76},[66,228,229],{"class":76}," get",[66,231,232],{"class":76}," chrome-devtools\n",[14,234,235],{},"出力例:",[56,237,242],{"className":238,"code":240,"language":241},[239],"language-text","chrome-devtools:\n  Scope: Local config (private to you in this project)\n  Status: ✓ Connected\n  Type: stdio\n  Command: npx\n  Args: chrome-devtools-mcp@latest\n  Environment:\n","text",[63,243,240],{"__ignoreMap":61},[18,245,246],{"id":246},"設定の削除",[14,248,249],{},"不要になったMCPサーバーを削除するには：",[56,251,253],{"className":58,"code":252,"language":60,"meta":61,"style":61},"# グローバル設定を削除\nclaude mcp remove chrome-devtools\n\n# ローカル設定を削除\nclaude mcp remove chrome-devtools -s local\n",[63,254,255,260,271,275,280],{"__ignoreMap":61},[66,256,257],{"class":68,"line":69},[66,258,259],{"class":195},"# グローバル設定を削除\n",[66,261,262,264,266,269],{"class":68,"line":199},[66,263,73],{"class":72},[66,265,77],{"class":76},[66,267,268],{"class":76}," remove",[66,270,232],{"class":76},[66,272,273],{"class":68,"line":209},[66,274,213],{"emptyLinePlaceholder":212},[66,276,277],{"class":68,"line":216},[66,278,279],{"class":195},"# ローカル設定を削除\n",[66,281,282,284,286,288,290,292],{"class":68,"line":222},[66,283,73],{"class":72},[66,285,77],{"class":76},[66,287,268],{"class":76},[66,289,90],{"class":76},[66,291,148],{"class":83},[66,293,294],{"class":76}," local\n",[18,296,297],{"id":297},"環境変数の設定",[14,299,300,301,304],{},"MCPサーバーに環境変数を渡す必要がある場合は、",[63,302,303],{},"--env","オプションを使用します：",[56,306,308],{"className":58,"code":307,"language":60,"meta":61,"style":61},"claude mcp add --transport stdio \\\n  --env API_KEY=your_api_key \\\n  --env DEBUG=true \\\n  my-mcp-server -- npx my-mcp-server@latest\n",[63,309,310,325,335,348],{"__ignoreMap":61},[66,311,312,314,316,318,320,322],{"class":68,"line":69},[66,313,73],{"class":72},[66,315,77],{"class":76},[66,317,80],{"class":76},[66,319,84],{"class":83},[66,321,87],{"class":76},[66,323,324],{"class":83}," \\\n",[66,326,327,330,333],{"class":68,"line":199},[66,328,329],{"class":83},"  --env",[66,331,332],{"class":76}," API_KEY=your_api_key",[66,334,324],{"class":83},[66,336,337,339,342,346],{"class":68,"line":209},[66,338,329],{"class":83},[66,340,341],{"class":76}," DEBUG=",[66,343,345],{"class":344},"sHkkW","true",[66,347,324],{"class":83},[66,349,350,353,355,357],{"class":68,"line":216},[66,351,352],{"class":76},"  my-mcp-server",[66,354,93],{"class":83},[66,356,96],{"class":76},[66,358,359],{"class":76}," my-mcp-server@latest\n",[18,361,362],{"id":362},"使用例",[14,364,365],{},"設定後、Claude Codeのセッション内で以下のようなツールが使用可能になります：",[26,367,368,374,380,386,392,398,404,410],{},[29,369,370,373],{},[63,371,372],{},"mcp__chrome-devtools__new_page",": 新しいページを開く",[29,375,376,379],{},[63,377,378],{},"mcp__chrome-devtools__navigate_page",": ページに移動",[29,381,382,385],{},[63,383,384],{},"mcp__chrome-devtools__take_snapshot",": ページのスナップショットを取得",[29,387,388,391],{},[63,389,390],{},"mcp__chrome-devtools__click",": 要素をクリック",[29,393,394,397],{},[63,395,396],{},"mcp__chrome-devtools__fill",": フォームに入力",[29,399,400,403],{},[63,401,402],{},"mcp__chrome-devtools__take_screenshot",": スクリーンショットを撮影",[29,405,406,409],{},[63,407,408],{},"mcp__chrome-devtools__list_console_messages",": コンソールログを取得",[29,411,412,415],{},[63,413,414],{},"mcp__chrome-devtools__list_network_requests",": ネットワークリクエストを取得",[48,417,418],{"id":418},"実際の使用例",[56,420,423],{"className":421,"code":422,"language":241},[239],"ユーザー: https://example.com にアクセスして、トップページのスクリーンショットを撮ってください\n\nClaude: [mcp__chrome-devtools__new_page を使用]\n        [mcp__chrome-devtools__navigate_page でページに移動]\n        [mcp__chrome-devtools__take_screenshot でスクリーンショット撮影]\n",[63,424,422],{"__ignoreMap":61},[18,426,427],{"id":427},"トラブルシューティング",[48,429,431],{"id":430},"mcpサーバーが接続できない場合","MCPサーバーが接続できない場合",[433,434,435,457,482],"ol",{},[29,436,437,440,453,456],{},[103,438,439],{},"Node.jsのバージョンを確認",[56,441,443],{"className":58,"code":442,"language":60,"meta":61,"style":61},"node --version\n",[63,444,445],{"__ignoreMap":61},[66,446,447,450],{"class":68,"line":69},[66,448,449],{"class":72},"node",[66,451,452],{"class":83}," --version\n",[454,455],"br",{},"Node.js 18以上が推奨されます。",[29,458,459,462,475,477,478,481],{},[103,460,461],{},"MCPサーバーのステータスを確認",[56,463,465],{"className":58,"code":464,"language":60,"meta":61,"style":61},"claude mcp list\n",[63,466,467],{"__ignoreMap":61},[66,468,469,471,473],{"class":68,"line":69},[66,470,73],{"class":72},[66,472,77],{"class":76},[66,474,206],{"class":76},[454,476],{},"ステータスが",[63,479,480],{},"✓ Connected","になっているか確認します。",[29,483,484,487],{},[103,485,486],{},"Claude Codeを再起動","\nMCPサーバーの設定変更後は、Claude Codeを再起動する必要がある場合があります。",[48,489,490],{"id":490},"別のセッションで使えない場合",[26,492,493,503],{},[29,494,495,498,499,502],{},[103,496,497],{},"ローカル設定の場合",": 各プロジェクトで個別に",[63,500,501],{},"claude mcp add -s local","を実行する必要があります",[29,504,505,508],{},[103,506,507],{},"グローバル設定の場合",": 一度設定すればすべてのプロジェクトで使用可能です",[14,510,511],{},"設定のスコープを確認するには：",[56,513,515],{"className":58,"code":514,"language":60,"meta":61,"style":61},"claude mcp get chrome-devtools\n",[63,516,517],{"__ignoreMap":61},[66,518,519,521,523,525],{"class":68,"line":69},[66,520,73],{"class":72},[66,522,77],{"class":76},[66,524,229],{"class":76},[66,526,232],{"class":76},[14,528,529,532,533,536],{},[63,530,531],{},"Scope: Local config","と表示される場合はローカル設定、",[63,534,535],{},"Scope: Global config","と表示される場合はグローバル設定です。",[18,538,539],{"id":539},"参考情報",[26,541,542,551,558],{},[29,543,544],{},[545,546,550],"a",{"href":547,"rel":548},"https://github.com/modelcontextprotocol/servers/tree/main/src/chrome-devtools",[549],"nofollow","Chrome DevTools MCP GitHub",[29,552,553],{},[545,554,557],{"href":555,"rel":556},"https://code.claude.com/docs/en/mcp",[549],"Claude Code MCP Documentation",[29,559,560,561,564],{},"MCPサーバーのリスト: ",[63,562,563],{},"claude mcp list","コマンドで確認可能",[18,566,567],{"id":567},"まとめ",[26,569,570,600,634,646],{},[29,571,572,575,576],{},[103,573,574],{},"グローバル設定",": すべてのプロジェクトで使用する場合に推奨",[56,577,578],{"className":58,"code":59,"language":60,"meta":61,"style":61},[63,579,580],{"__ignoreMap":61},[66,581,582,584,586,588,590,592,594,596,598],{"class":68,"line":69},[66,583,73],{"class":72},[66,585,77],{"class":76},[66,587,80],{"class":76},[66,589,84],{"class":83},[66,591,87],{"class":76},[66,593,90],{"class":76},[66,595,93],{"class":83},[66,597,96],{"class":76},[66,599,99],{"class":76},[29,601,602,605,606],{},[103,603,604],{},"ローカル設定",": 特定のプロジェクトでのみ使用する場合",[56,607,608],{"className":58,"code":135,"language":60,"meta":61,"style":61},[63,609,610],{"__ignoreMap":61},[66,611,612,614,616,618,620,622,624,626,628,630,632],{"class":68,"line":69},[66,613,73],{"class":72},[66,615,77],{"class":76},[66,617,80],{"class":76},[66,619,148],{"class":83},[66,621,151],{"class":76},[66,623,84],{"class":83},[66,625,87],{"class":76},[66,627,90],{"class":76},[66,629,93],{"class":83},[66,631,96],{"class":76},[66,633,99],{"class":76},[29,635,636,639,640,642,643],{},[103,637,638],{},"設定確認",": ",[63,641,563],{},"または",[63,644,645],{},"claude mcp get chrome-devtools",[29,647,648,639,651],{},[103,649,650],{},"削除",[63,652,653],{},"claude mcp remove chrome-devtools [-s local]",[14,655,656],{},"Chrome DevTools MCPを活用することで、Webページのテスト、スクレイピング、UI操作の自動化などを効率的に行うことができます。",[658,659,660],"style",{},"html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .snbK4, html code.shiki .snbK4{--shiki-default:#A65E2B;--shiki-dark:#A65E2B}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}",{"title":61,"searchDepth":199,"depth":199,"links":662},[663,664,669,670,671,674,678,679],{"id":20,"depth":199,"text":21},{"id":46,"depth":199,"text":46,"children":665},[666,667,668],{"id":50,"depth":209,"text":51},{"id":128,"depth":209,"text":129},{"id":181,"depth":209,"text":182},{"id":246,"depth":199,"text":246},{"id":297,"depth":199,"text":297},{"id":362,"depth":199,"text":362,"children":672},[673],{"id":418,"depth":209,"text":418},{"id":427,"depth":199,"text":427,"children":675},[676,677],{"id":430,"depth":209,"text":431},{"id":490,"depth":209,"text":490},{"id":539,"depth":199,"text":539},{"id":567,"depth":199,"text":567},null,"Claude CodeでChrome DevTools MCPサーバーを設定し、ブラウザ操作を自動化する方法について解説します","md",{},"/chrome-devtools-mcp-setup",false,"2025-11-25T00:00:00.000Z",{"title":5,"description":681},"2025-11/2025-11-25/chrome-devtools-mcp-setup",[690,691,118,692,693],"claude-code","mcp","automation","setup","6OGsuEGfNEWbceYJOVGF-gpR2Y9So-xCdaHom672Uos",[],[697,701,705,709,713],{"title":698,"path":699,"publishedAt":700},"Chrome DevTools MCP の autoConnect で、自分のブラウザセッションをそのままAIに渡せるようになった","/chrome-devtools-mcp-auto-connect","2026-03-31T00:00:00.000Z",{"title":702,"path":703,"publishedAt":704},"Chrome DevTools MCP設定消失の調査記録","/chrome-devtools-mcp-investigation","2025-12-18T00:00:00.000Z",{"title":706,"path":707,"publishedAt":708},"1Password EnvironmentsのMCP連携がWindowsで解禁 — Claude Code / Codexへの設定手順と実機検証","/1password-mcp-windows-claude-codex","2026-07-18T00:00:00.000Z",{"title":710,"path":711,"publishedAt":712},"make-diary に update-portfolio をチェーン化してタスクスケジューラのスリープ問題を埋める","/make-diary-update-portfolio-chain","2026-06-18T00:00:00.000Z",{"title":714,"path":715,"publishedAt":716},"Draw.io MCP サーバー調査ログ - 3つの選択肢を比較して現状維持を選んだ話","/drawio-mcp-investigation-2026-02-13","2026-02-13T00:00:00.000Z","https://log.eurekapu.com/og/blog/chrome-devtools-mcp-setup.png?v=2025-11-25T00%3A00%3A00.000Z&title=Chrome%20DevTools%20MCP%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95&author=Kei%20Komatsu&sig=856e071cb913bbd2",1785654664042]